how can I scroll the full screen with a tab view? - react-native

Question

How can I scroll in my profil page where is a Tab and inside a Tab is a Flatlist?
Like Instagram If you go on your profile then there is a Tab and you can scroll down until no more images available.
I use this libary: https://github.com/satya164/react-native-tab-view
I tried many times and different things but I dont succeed. I hope anyone can help me
€: I can scroll but he dont show all results. And I dont want to scroll inside a Tab I want to scroll the full profile screen
<ScrollView style={styles.containerProfil}>
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center', height: height * 1, width: width * 1, position: 'relative'}}>
<TouchableOpacity style={{justifyContent: 'center', alignItems: 'center', position: 'relative'}} onPress={() => navigation.navigate('Platform')}>
<ImageBackground style={styles.profilImage} resizeMode="cover" source={require('../assets/profil.jpg')} />
</TouchableOpacity>
<View style={{justifyContent: 'center', height: 40}}>
<Text style={{ fontFamily: 'nunito-regular', color: '#333', fontSize: 20, letterSpacing: 0, marginVertical: 10}}>#lenamaier123</Text>
</View>
<View style={{flex: 1, backgroundColor: '#eee', width: width * 1}}>
<ProfileTab /> <-- HERE ARE THE TABS
</View>
</View>
</ScrollView>
Css:
containerProfil: {
flex: 1,
backgroundColor: '#fff',
position: 'relative',
padding: 0,
},
profilImage: {
width: 100,
height: 100,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 1,
borderColor: '#eee',
textAlign: 'center',
},
ProfileTab.js
import * as React from 'react';
import { View, Text, useWindowDimensions, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import MyProducts from '../../../screens/profile/myProducts';
const height = Dimensions.get('window').height;
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: '#ff4081' }}>
<MyProducts />
</View>
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }}>
<Text>Second</Text>
</View>
);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
export default function TabViewExample() {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: Dimensions.get('window').width }}
scrollEnable={true}
style={{width: layout.width * 1}}
/>
);
}
Flatlist.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, FlatList, SafeAreaView, Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const myProducts = () => {
const [product, setProduct] = useState([
{key: 1, text: 'Hose'},
{key: 2, text: 'Hose'},
{key: 3, text: 'Hose'},
{key: 4, text: 'Hose'},
{key: 5, text: 'Hose'},
{key: 6, text: 'Hose'},
{key: 7, text: 'Hose'},
{key: 8, text: 'Hose'},
]);
return (
<View style={{width: width * 1}}>
<FlatList
data={product}
scrollEnabled={true}
keyExtractor={(item) => item.key.toString()}
renderItem={({item}) => (<View style={{flex: 1, height: 80, width: width * 1, padding: 20, borderWidth: 1, bordderColor: '#eee'}}><Text style={{flex: 1, backgroundColor: 'red', color: 'blue'}}>{item.text}</Text></View>)}
/>
</View>
)
};
export default myProducts;

Answer 1

FlatList inside a ScrollView doesn't work as expected.
FlatList inside ScrollView doesn't scroll - https://github.com/facebook/react-native/issues/19971
As a solution to your problrm I found this.

Answer 2

you want this;
https://www.npmjs.com/package/react-native-scrollable-tab-view-collapsible-header
Take a look.
If you are using FlatList component inside tabview, change
<HScrollView> with <HFlatList>