Scroll Not working when using component

[Rohan-Rajesh]

• [x] I have searched existing issues
• [x] I am using the latest react native tab navigator version

I have a page with a header and a tab navigator as the body, I want to loop through data so that I can scroll through it, when I wrap the entire page with a ScrollView it does not work, although if I just wrap the content of the tab navigator in a ScrollView it works, this is not ideal for me as I do not want the header to be fixed to the top of the page

Steps to Reproduce

1. Copy over the code and styles
2. Run code.

Here is my JS code

const Library: React.FC<LibraryProps> = () => {
  const [libraryData, setLibraryData] = useState<LibraryData>();

  const [selectedTab, setSelectedTab] = useState('eBooks');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
        // Getting data from API
  }, [libraryData]);

  return (
    <>
      <ScrollView style={styles.container}>
        <LibraryHeader setSearchText={() => {}} />
        <View style={styles.body}>
          <TabNavigator
            tabBarStyle={{
              backgroundColor: 'white',
              width: '50%',
              marginLeft: '18%',
            }}
            tabBarShadowStyle={{backgroundColor: 'transparent'}}
            sceneStyle={styles.tabContainer}>
            <TabNavigator.Item
              selected={selectedTab === 'eBooks'}
              onPress={() => setSelectedTab('eBooks')}
              renderIcon={() => <Text style={styles.tabBarTitle}>eBooks</Text>}
              renderSelectedIcon={() => (
                <View style={styles.bottomLine}>
                  <Text style={styles.tabBarTitleSelected}>eBooks</Text>
                </View>
              )}>
              <View>
                            <Text style={{marginTop: 300}}>hi</Text>
        <Text style={{marginTop: 300}}>hi</Text>
        <Text style={{marginTop: 300}}>hi</Text>
        <Text style={{marginTop: 300}}>hi</Text>
        <Text style={{marginTop: 300}}>hi</Text>
              </View>
            </TabNavigator.Item>
            <TabNavigator.Item
              selected={selectedTab === 'Audio Books'}
              onPress={() => setSelectedTab('Audio Books')}
              renderIcon={() => (
                <Text style={styles.tabBarTitle}>Audio Books</Text>
              )}
              renderSelectedIcon={() => (
                <View style={styles.bottomLine}>
                  <Text style={styles.tabBarTitleSelected}>Audio Books</Text>
                </View>
              )}>
              <ScrollView>
        <Text style={{marginTop: 300}}>hi</Text>
          <Text style={{marginTop: 300}}>hi</Text>
          <Text style={{marginTop: 300}}>hi</Text>
          <Text style={{marginTop: 300}}>hi</Text>
          <Text style={{marginTop: 300}}>hi</Text>
              </ScrollView>
            </TabNavigator.Item>
          </TabNavigator>
        </View>
      </ScrollView>
    </>
  );
};

export default Library;

Styles:

import {Dimensions, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  body: {
    marginTop: Dimensions.get('screen').height / 14,
  },
  // Container for entire tab navigator
  tabContainer: {
    height: Dimensions.get('screen').height,
    width: '100%',

    backgroundColor: 'white',
  },
  // Text shown in tab bar
  tabBarTitle: {
    marginBottom: 3.5,

    fontSize: 14,
    fontFamily: 'Quicksand-SemiBold',
    color: '#212121',
    opacity: 0.8,
  },
  // Text shown in tab bar when selected
  tabBarTitleSelected: {
    marginBottom: 0,

    fontSize: 14,
    fontFamily: 'Quicksand-SemiBold',
    color: '#00296b',
  },
  bottomLine: {
    borderBottomColor: '#00296B',
    borderBottomWidth: 2,
    paddingBottom: 2,
  },
});

export default styles;

NOTE: The code in the first tab content does not scroll, the code in the second one does, though this isn't the functionality I wanted

Expected Behavior

I need the entire page to scroll along with the header and content

Actual Behavior

The page bounces back as if the height if capped at the screen height, I tried changing the styles of the scroll view, when I try it without putting content inside the TabNavigator.Item it scrolls fine