ReactNativeでカルーセルと地図上のマーカーを連動させたい。

前提・実現したいこと

ReactNativeでreact-native-mapsとreact-native-snap-carouselを使い、
カルーセルと地図上のマーカーが連動して動くアプリを作っています。
イメージはこのようなアプリです。
CodeDailyを参考にして、そこへreact-native-snap-carouselを導入しましたが、
カルーセルのスクロールとマーカーを連動させることができません。
無知な質問で申し訳ありませんが、アドバイスを頂けると嬉しいです。

該当のソースコード

変更前

render() {
    return (
      <View style={styles.container}>
        <MapView
          ref={map => this.map = map}
          initialRegion={this.state.region}
          style={styles.container}
        >
          {this.state.markers.map((marker, index) => {
            return (
              <MapView.Marker key={index} coordinate={marker.coordinate}>
                <Animated.View style={[styles.markerWrap]}>
                  <Animated.View style={[styles.ring]} />
                  <View style={styles.marker} />
                </Animated.View>
              </MapView.Marker>
            );
          })}
        </MapView>
        <Animated.ScrollView
          horizontal
          scrollEventThrottle={1}
          showsHorizontalScrollIndicator={false}
          snapToInterval={CARD_WIDTH}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    x: this.animation,
                  },
                },
              },
            ],
            { useNativeDriver: true }
          )}
          style={styles.scrollView}
          contentContainerStyle={styles.endPadding}
        >
          {this.state.markers.map((marker, index) => (
            <View style={styles.card} key={index}>
              <Image
                source={marker.image}
                style={styles.cardImage}
                resizeMode="cover"
              />
              <View style={styles.textContent}>
                <Text numberOfLines={1} style={styles.cardtitle}>{marker.title}</Text>
                <Text numberOfLines={1} style={styles.cardDescription}>
                  {marker.description}
                </Text>
              </View>
            </View>
          ))}
        </Animated.ScrollView>
      </View>
    );
  }

変更後

return (
            <View style={styles.container}>
                <MapView
                    ref={map => this.map = map}
                    initialRegion={this.state.region}
                    style={styles.container}
                >
                    {markers.map((marker, index) => {
                        const scaleStyle = {
                            transform: [
                                {
                                    scale: interpolations[index].scale,
                                },
                            ],
                        };
                        const opacityStyle = {
                            opacity: interpolations[index].opacity,
                        };
                        return (
                            <MapView.Marker key={index} coordinate={marker.coordinate}>
                                <Animated.View style={[styles.markerWrap, opacityStyle]}>
                                    <Animated.View style={[styles.ring, scaleStyle]} />
                                    <View style={styles.marker} />
                                </Animated.View>
                            </MapView.Marker>
                        );
                    })}
                </MapView>
                <Animated.View
                    style={[styles.animated]}
                    onScroll={Animated.event(
                        [
                            {
                                nativeEvent: {
                                    contentOffset: {
                                        x: this.animation,
                                    },
                                },
                            },
                        ],
                        { useNativeDriver: true }
                    )}
                >
                    <Carousel
                        ref={c => this._slider1Ref = c}
                        data={markers}
                        renderItem={this._renderItem.bind(this)}
                        sliderWidth={sliderWidth}
                        itemWidth={itemWidth}
                        inactiveSlideScale={1}
                        inactiveSlideOpacity={0.5}
                    />
                </Animated.View>
            </View >
        );
    }
}

試したこと

Animated.View内のonScrollをCarousel内に書き換えましたが、下記のエラーが発生しました。

onScroll is not function. (In 'onScroll(event)','onScroll' is an instance of AnimatedEvent)

補足情報（FW/ツールのバージョンなど）

react: "^16.3.1"
react-native: "^0.55.3"
react-native-maps: "^0.21.0"
react-native-snap-carousel: "^3.7.2"

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1onScroll={Animated.event(
2            [
3              {
4                nativeEvent: {
5                  contentOffset: {
6                    x: this.animation,
7                  },
8                },
9              },
10            ],

は Animated.Viewのメソッドですが
Carousel（＜＝今回の外部ライブラリー）のメソッドではありません、エラーメッセージの通りです。
たまたま別件のコンサルティング案件に、似たようなものがあって、記事にまとめました。
よかったら、そっちをお読みください。
リンクを共有します。
https://kokensha.xyz/reactnative/reactnative-connect-map-with-carousel-swipe-animation/

投稿2018/08/13 23:49