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

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>