AnimatedViewをfetchしたViewで表示したい（react native）

Question

質問の内容に不備がありましたので、再度こちらにて訂正させて載せさせていただきます。
React Native Mapというライブラリで、Animated Viewを表示できるようにしたいと考えています。

こちらのリンク先にあるAnimatedView.jsをコピペするとちゃんと表示されるのですが、自前のデータベースからFetchしてきたデータを当てようとすると下記のエラーが生じてしまいます。

Invariant Violation: outputRange must have at least 2 elements

※こちらのエラーをぐぐってみたのですが、未解決のようです。。。

変更点は下記の部分です。

Fetchするためのredux追加

・・・
const mapStateToProps = (state) => {
  const markers = _.orderBy(state.markers, ['id'], ['desc']);

  return { markers };
};

export default connect(mapStateToProps, {
  markersFetch
})(AnimatedViews);

this.stateで出していたmarkersをthis.propsで書き換え

    const {
　 　　・・・
      markers
    } = this.state;

上記の部分を下記のように書き換えました。

    const { markers } = this.props;

どのようにして解決すればよろしいでしょうか・・・。
お手数ですが、おたすけくださいませ。

▼ソースコードはこちらです

・・・

function getMarkerState(panX, panY, scrollY, i) {
  const xLeft = (-SNAP_WIDTH * i) + (SNAP_WIDTH / 2);
  const xRight = (-SNAP_WIDTH * i) - (SNAP_WIDTH / 2);
  const xPos = -SNAP_WIDTH * i;

  const isIndex = panX.interpolate({
    inputRange: [xRight - 1, xRight, xLeft, xLeft + 1],
    outputRange: [0, 1, 1, 0],
    extrapolate: 'clamp',
  });

  const isNotIndex = panX.interpolate({
    inputRange: [xRight - 1, xRight, xLeft, xLeft + 1],
    outputRange: [1, 0, 0, 1],
    extrapolate: 'clamp',
  });

  const center = panX.interpolate({
    inputRange: [xPos - 10, xPos, xPos + 10],
    outputRange: [0, 1, 0],
    extrapolate: 'clamp',
  });

  const selected = panX.interpolate({
    inputRange: [xRight, xPos, xLeft],
    outputRange: [0, 1, 0],
    extrapolate: 'clamp',
  });

  const translateY = Animated.multiply(isIndex, panY);

  const translateX = panX;

  const anim = Animated.multiply(isIndex, scrollY.interpolate({
    inputRange: [0, BREAKPOINT1],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  }));

  const scale = Animated.add(ONE, Animated.multiply(isIndex, scrollY.interpolate({
    inputRange: [BREAKPOINT1, BREAKPOINT2],
    outputRange: [0, SCALE_END - 1],
    extrapolate: 'clamp',
  })));

  // [0 => 1]
  let opacity = scrollY.interpolate({
    inputRange: [BREAKPOINT1, BREAKPOINT2],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });

  // if i === index: [0 => 0]
  // if i !== index: [0 => 1]
  opacity = Animated.multiply(isNotIndex, opacity);


  // if i === index: [1 => 1]
  // if i !== index: [1 => 0]
  opacity = opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  let markerOpacity = scrollY.interpolate({
    inputRange: [0, BREAKPOINT1],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });

  markerOpacity = Animated.multiply(isNotIndex, markerOpacity).interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  const markerScale = selected.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 1.2],
  });

  return {
    translateY,
    translateX,
    scale,
    opacity,
    anim,
    center,
    selected,
    markerOpacity,
    markerScale,
  };
}

class AnimatedViews extends React.Component {
  constructor(props) {
    super(props);

    const { markers } = this.props;

    const panX = new Animated.Value(0);
    const panY = new Animated.Value(0);

    const scrollY = panY.interpolate({
      inputRange: [-1, 1],
      outputRange: [1, -1],
    });

    const scrollX = panX.interpolate({
      inputRange: [-1, 1],
      outputRange: [1, -1],
    });

    const scale = scrollY.interpolate({
      inputRange: [0, BREAKPOINT1],
      outputRange: [1, 1.6],
      extrapolate: 'clamp',
    });

    const translateY = scrollY.interpolate({
      inputRange: [0, BREAKPOINT1],
      outputRange: [0, -100],
      extrapolate: 'clamp',
    });

    const animations = markers.map((m, i) =>
      getMarkerState(panX, panY, scrollY, i));

    this.state = {
      panX,
      panY,
      animations,
      index: 0,
      canMoveHorizontal: true,
      scrollY,
      scrollX,
      scale,
      translateY,
      region: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }),
    };
  }

  componentDidMount() {
    const { region, panX, panY, scrollX } = this.state;
    const { markers } = this.props;

    panX.addListener(this.onPanXChange);
    panY.addListener(this.onPanYChange);

    region.stopAnimation();
    region.timing({
      latitude: scrollX.interpolate({
        inputRange: markers.map((m, i) => i * SNAP_WIDTH),
        outputRange: markers.map(m => m.coordinate.latitude),
      }),
      longitude: scrollX.interpolate({
        inputRange: markers.map((m, i) => i * SNAP_WIDTH),
        outputRange: markers.map(m => m.coordinate.longitude),
      }),
      duration: 0,
    }).start();
  }

  onStartShouldSetPanResponder = (e) => {
    // we only want to move the view if they are starting the gesture on top
    // of the view, so this calculates that and returns true if so. If we return
    // false, the gesture should get passed to the map view appropriately.
    const { panY } = this.state;
    const { pageY } = e.nativeEvent;
    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
    const topOfTap = screen.height - pageY;

    return topOfTap < topOfMainWindow;
  }

  onMoveShouldSetPanResponder = (e) => {
    const { panY } = this.state;
    const { pageY } = e.nativeEvent;
    const topOfMainWindow = ITEM_PREVIEW_HEIGHT + panY.__getValue();
    const topOfTap = screen.height - pageY;

    return topOfTap < topOfMainWindow;
  }

  onPanXChange = ({ value }) => {
    const { index } = this.state;
    const newIndex = Math.floor(((-1 * value) + (SNAP_WIDTH / 2)) / SNAP_WIDTH);
    if (index !== newIndex) {
      this.setState({ index: newIndex });
    }
  }

  onPanYChange = ({ value }) => {
    const { canMoveHorizontal, region, scrollY, scrollX, index } = this.state;
    const { markers } = this.props;

・・・

  onRegionChange(/* region */) {
    // this.state.region.setValue(region);
  }

  render() {
    const {
      panX,
      panY,
      animations,
      canMoveHorizontal,
      region,
    } = this.state;
    const { markers } = this.props;

    return (
      <View style={styles.container}>
        <PanController
          style={styles.container}
          vertical
          horizontal={canMoveHorizontal}
          xMode="snap"
          snapSpacingX={SNAP_WIDTH}
          yBounds={[-1 * screen.height, 0]}
          xBounds={[-screen.width * (markers.length - 1), 0]}
          panY={panY}
          panX={panX}
          onStartShouldSetPanResponder={this.onStartShouldSetPanResponder}
          onMoveShouldSetPanResponder={this.onMoveShouldSetPanResponder}
        >
          <AnimatedMap
            provider={this.props.provider}
            style={styles.map}
            region={region}
            onRegionChange={this.onRegionChange}
          >
            {markers.map((marker, i) => {
              const {
                selected,
                markerOpacity,
                markerScale,
              } = animations[i];

              return (
                <Marker
                  key={marker.id}
                  coordinate={marker.coordinate}
                >
                  <PriceMarker
                    style={{
                      opacity: markerOpacity,
                      transform: [
                        { scale: markerScale },
                      ],
                    }}
                    amount={marker.amount}
                    selected={selected}
                  />
                </Marker>
              );
            })}
          </AnimatedMap>
          <View style={styles.itemContainer}>
            {markers.map((marker, i) => {
              const {
                translateY,
                translateX,
                scale,
                opacity,
              } = animations[i];

              return (
                <Animated.View
                  key={marker.id}
                  style={[styles.item, {
                    opacity,
                    transform: [
                      { translateY },
                      { translateX },
                      { scale },
                    ],
                  }]}
                />
              );
            })}
          </View>
        </PanController>
      </View>
    );
  }
}

AnimatedViews.propTypes = {
  provider: ProviderPropType,
};

 ...

const mapStateToProps = (state) => {
  const markers = _.orderBy(state.markers, ['id'], ['desc']);

  return { markers };
};

export default connect(mapStateToProps, {
  markersFetch
})(AnimatedViews);

Answer 1

const animations = markers.map((m, i) =>
      getMarkerState(panX, panY, scrollY, i));

this.state = {
  animations
}

1. 貼ってあるコードだと省略されますが、コンストラクタで定義したanimationsをstateにセットしてますでしょうか？

2. consoel.log(this.state)を見るとanimations:[]で空になってるみたいですが、問題のコンポーネントを扱ってる箇所でmarkersに適切な値が渡ってないなども考えられます

<AnimatedViews markers={/* この渡してるデータが空？ */} />

Comments

[yamady]

いつもご回答いただきまして、ありがとうございます。
こちら、animationsはstateにセットしてあるはずなのですが、うまくいっておりません。
markersに適切な値が入っていない可能性は考えられると思いますので今一度調整して行きたいと思います。

Answer 2

定義されているなら
console.log(animations) をしてみてください！
[i]でアクセスしてるキーが間違っているのだと思います

Comments

[yamady]

いつも迅速なご対応いただきましてありがとうございます！！！
非常に助かります。問題が非常に分かりづらかったので、今一度質問内容を改めさせていただきます(_ _)

Answer 3

} = animations[i]; が無いのでは？

たどると

      animations,
      canMoveHorizontal,
      region,
    } = this.state;

animations はここで取得してますが、コンストラクタでちゃんと設定できますか？

Comments

[yamady]

何度もありがとうございます。
animationは定義されているはずなのですが、やはり表示されません。。

const {
selected,
markerOpacity,
markerScale,
} = animations[i];

Answer 4

貼ってあるソースだと、実際にselectedを使ってるところが無いのですが
selectedを使ってるところのコードありますか？

Comments

[yamady]

DotEarlさま、さっそくご回答頂きましてありがとうございます。
selectedを実際に使用しているView部分を追記させていただきました。
どうぞよろしくお願いいたします。