React-native-tab-view: Swiping page instead of scrolling horizontal nested FlatList on Android

[vpodolyan]

I have a friend list implemented as horizontally scrollable FlatList which is nested in one of the pages of TabViewAnimated component. TabViewPagerExperimental is used for renderPager() function.

I get different behavior on iOS and Android.

Expected behaviour

FlatList is scrolled horizontally on both iOS and Android.

Actual behaviour

FlatList is scrolled well on iOS only while the tab page is swiping on Android most of time instead.

Code sample, screenshots

Scrolling on iOS

Scrolling on Android

What have you tried

I tried to change pager component to TabViewPagerPan that led to the working scroll on Android, but it got broken on iOS.

[vpodolyan]

I fixed it using FlatList from react-native-gesture-handler

[yaronlevi]

Any solutions to the issue?

[vpodolyan]

@yaronlevi You can import FlatList from react-native-gesture-handler as workaround. It should fix the issue

Update: importing ScrollView from react-native-gesture-handler for renderScrollComponent also fixes it

[imansalhi]

@vpodolyan it will be helpful if you share your code with us ...i did what you said but nothing changed

[vpodolyan]

@imansalhi which version do you use? it's probably fixed in the current version. Sorry, I'm on vacations now, I'll get back next week and try to find that code :slightly_smiling_face:

[vpodolyan]

@imansalhi I came back :) Here's the code. I don't put ProfilePhotos component code for simplicity

import { ScrollView } from 'react-native-gesture-handler';

class ProfileFriends extends PureComponent {
    render() {
            <FlatList
                 horizontal
                 contentContainerStyle={styles.flatlist}
                 showsHorizontalScrollIndicator={false}
                 keyExtractor={(item: RelationEntity) => item.user.id}
                 renderItem={({ item }) => (<FriendsItem user={item.user} />)}
                 ItemSeparatorComponent={() => (<View style={styles.friendListSeparator} />)}
                 renderScrollComponent={(props) => (<ScrollView {...props} />)}
                 data={this.props.friends}
              />
    }
}

class Profile extends PureComponent {
    state = {
        index: 0,
        routes: [
            { key: 'friends' },
            { key: 'photos' },
        ],
    };

    render() {
        return (
            <TabView
                navigationState={this.state}
                renderScene={SceneMap({
                     friends: ProfileFriends,
                     photos: ProfilePhotos,
                 })}
                onIndexChange={index => this.setState({ index })}
                initialLayout={{ width: Dimensions.get('window').width }}
          />
        );
    }
}