React Native Maps FlatList scrollToIndex() not a function / undefined

Question

I'm working with React Native maps with an animated FlatList on top and when I press on a map marker, I want the list to scroll to that particular index. But when I try to do that I get this error _this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined

The basics of my code look like this...

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

export default Map extends component {

  scrollToCard = index => {
    this.flatListRef.scrollToIndex({index})
  }

  render() {

    const { allProperties } = this.props;

    <MapView
       ref={map => this.map = map}
       style={styles.map}
       initialRegion={{
          latitude: 35.2271,
          longitude: -80.8431,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.421
          }}
       >

       {allProperties && allProperties.map((property, index) => (
         <Marker
           coordinate={property.coordinates}
           title={property.propertyName}
           pinColor={theme.COLOR_GREEN}
           key={property.id}
           onPress={() => this.scrollToCard(index)}
         />
       ))}

       </MapView>

         {allProperties &&
            <AnimatedFlatList
               ref={ref => {this.flatListRef = ref }}
               data={allProperties}
               getItemLayout={(data, index) => (
                  {length: CARD_WITH_MARGIN, offset: CARD_WITH_MARGIN * index, index}
               )}
               initialNumToRender={2}
               horizontal
               scrollEventThrottle={1}
               showsHorizontalScrollIndicator={false}
               snapToInterval={CARD_WITH_MARGIN}
               onScroll={Animated.event(
                  [
                     {
                        nativeEvent: {
                           contentOffset: {
                             x: this.animation
                           },
                        },
                      },
                  ],
                  { useNativeDriver: true }
                    )}
               style={styles.scrollView}
               contentContainerStyle={styles.scrollContainer}
               renderItem={this._renderItem}
               keyExtractor={item => item.id}
             />
         }
  }

}

Mainly it seems like my ref of flatListRef is undefined for some reason. At least that's my theory but I can't tell why.

Can anyone spot what I'm doing wrong here?

If it helps, allProperties is data coming back from a graphql query.

Answer 1

In case anyone finds this post and is having the same issue (or for me later on when I forget), I've found the answer here...

It looks like, in order to use a Ref with private variable like the animated one I created above the component, you need to use getNode() when you call it.

For instance, in my scrollToCard() function it should have done the following...

this.flatListRef.getNode().scrollToIndex({index})