React-native-gesture-handler: Flatlist scrolltoIndex not working

[sridhard]

Hi,

I am using Flatlist from react-native-gesture-handler. React-native flatlist has scrolltoindex support (https://facebook.github.io/react-native/docs/flatlist#scrolltoindex).

react-native-gesture-handler flatlist scrollToIndex is not working.

[sridhard]

Not able to get the ref of flatlist. So we cannot access the methods of flatlist

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of Swiper.
in FlatListWithGHScroll (at Swiper.js:168)
in RCTView (at View.js:60)
in View (at Swiper.js:167)
in Swiper (at Slider.js:172)
in RCTView (at View.js:60)
in View (at Slider.js:171)
in RCTSafeAreaView (at SafeAreaView.ios.js:34)
in SafeAreaView (at Slider.js:170)
in Slider (created by Connect(Slider))
in Connect(Slider) (at LstSlider.js:68)
in Provider (at LstSlider.js:67)
in LstSlider (at index.js:17)
in CoursePlayer (created by Connect(CoursePlayer))
in Connect(CoursePlayer) (at SceneView.js:10)
in SceneView (at StackViewLayout.js:439)
in RCTView (at View.js:60)
in View (at createAnimatedComponent.js:154)
in AnimatedComponent (at StackViewCard.js:12)
in Card (at createPointerEventsContainer.js:28)
in Container (at StackViewLayout.js:488)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:385)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:384)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:58)
in RCTView (at View.js:60)
in View (at Transitioner.js:146)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:96)
in Navigator (at createKeyboardAwareNavigator.js:11)
in KeyboardAwareNavigator (at createNavigationContainer.js:387)
in NavigationContainer (at SceneView.js:10)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:96)
in Navigator (at createNavigationContainer.js:387)
in NavigationContainer (at rootNavigator.js:247)
in Root (at rootContainer.js:18)
in RootContainer (created by Connect(RootContainer))
in Connect(RootContainer) (at App.js:35)
in PersistGate (at App.js:31)
in Provider (at App.js:30)
in App (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)

Can you pls fix this issue

[osdnk]

in order to get ref to unwrapped FlatList, let you use ref to Animated.FlatList and then ref.getNode()

[vladkosinov]

@osdnk can you please explain what do you mean in use ref to Animated.FlatList?

[erickreutz]

@osdnk I'm not sure that is the problem? Isn't the problem that we can't use refs with stateless functional components?

i.e.

const FlatListWithGHScroll = props => (
  <FlatList
    {...props}
    renderScrollComponent={props => <WrappedScrollView {...props} />}
  />
);

solution:

import { FlatList } from "react-native";
import { ScrollView } from "react-native-gesture-handler";

...

<FlatList
  ref={ref => (this._list = ref)} 
  renderScrollComponent={props => <ScrollView {...props} />}
/>

[ndethore]

Fixed this by importing FlatList from react-native instead of react-native-handler-gesture 😉