React native tabs: navigating between tabs is really slow when using FlatList or ListView

So I'm using the react-native-elements tabs and tab components react native elements tabs, I also used other tab components like TabBarIOS and TabNavigator

I basically have two components, People and Feed, Both have FlatList inside. Here is some code from the component I'm using the tabs in.

<Tabs>
                <Tab
                    selected={this.state.selectedTab === 'people'}
                    title={this.state.selectedTab === 'people' ? 'PEOPLE' : null}
                    renderIcon={() => <Icon containerStyle={{ justifyContent: 'center', alignItems: 'center', marginTop: 12 }} color={'#5e6977'} name='whatshot' size={33} />}
                    renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
                    onPress={() => this.tabChanged('people')}>
                    <People />
                </Tab>
                <Tab
                    selected={this.state.selectedTab === 'feed'}
                    title={this.state.selectedTab === 'feed' ? 'FEED' : null}
                    renderIcon={() => <Icon containerStyle={{ justifyContent: 'center', alignItems: 'center', marginTop: 12 }} color={'#5e6977'} name='person' size={33} />}
                    renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
                    onPress={() => this.tabChanged('feed')}>
                    <Feed />
                </Tab>
            </Tabs>

The People and Feed components both are using the FlatList component. it's really slow when I navigate between these tabs because of the items in the FlatList, and the larger the list, the slower it gets to navigate, sometimes it takes around 2 seconds to go to the other tab.

I'm sure it's because of the FlatList because when I remove the FlatList, everything is normal. and it's the same issue if I use the ListView.

here is a code example from the People component's render method.

renderProfileRowItem(profile) {
        return (
            <Profile key={profile.id} profile={profile} />
        )
    }

    render() {
        return (
            <View style={Style.container}>
                <StatusBar barStyle="default" />

                <FlatList
                    data={this.state.profiles}
                    ItemSeparatorComponent={() => <View style={Style.separator} />}
                    keyExtractor={profile => profile.id}
                    renderItem={({ item }) => this.renderProfileRowItem(item)}
                />

            </View>
        )
    }

I'm using react native version 0.46.1.

side note: I'm using redux if it helps