访问ref react native onpress

Question

I'am using to display a list of view and with this a list of marker. I want to link my marker with my Animated.scrollview but using ref it's not working (i may use ref in a wrong way)

there is my work

return (
  <View style={styles.container}>
    <MapView
      ref={map => this.map = map}
      initialRegion={this.state.region}
      style={styles.container}
    >
      <UrlTile
        urlTemplate="http://IP:8080/styles/klokantech-basic/{z}/{x}/{y}.png"
        zIndex={-1}
      />
      {this.state.markers.map((marker, index) => {

        return (
          <MapView.Marker key={index} coordinate={marker.coordinates} onPress={() => this.myRef.scrollTo({x: 0, y: 0})
        } >
            <Animated.View style={[styles.markerWrap, opacityStyle]} >
              <Animated.View style={[styles.ring, scaleStyle]} />
              <View style={styles.marker} />
            </Animated.View>
          </MapView.Marker>
        );

      })}
    </MapView>
    <Animated.ScrollView
      horizontal
      ref={c => (this.myRef = c)}
      scrollEventThrottle={1}
      showsHorizontalScrollIndicator={true}
      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) => {
          return (
            <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.espace.titre}</Text>
                <Text numberOfLines={1} style={styles.cardDescription}>
                  {marker.description}
                </Text>
              </View>
            </View>)
      })
      }
    </Animated.ScrollView>
  </View>
);

when i try call this.myRef.scrollTo({x: 0, y: 0} i get _this4.myRef.scrollTo is not a function

Answer 1

i think you need replace refs, should working:

// MapView
ref={map => {if (map) this.map=map}}

// Animated.ScrollView
ref={c => {if (c) this.myRef=c}}

UPDATE

// there is typo in your code
// Animated.ScrollView
ref={c => (this.myRef = c)}