I have following code snapshot for App.tsx,

const Stack = createNativeStackNavigator();

const MainStackNavigator = () => (
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Home" component={Home} />
  </Stack.Navigator>
);

const App: React.FC = () => {
  return (
    <SafeAreaProvider>
      <Contexts>
        <NavigationContainer>
          <ScrollView contentContainerStyle={styles.scrollViewContent}>
            <Header />
            <View style={styles.content}>
              <MainStackNavigator />
            </View>
            <Footer />
          </ScrollView>
        </NavigationContainer>
      </Contexts>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  scrollViewContent: {
    flexGrow: 1,
    // justifyContent: 'flex-start',
  },
  content: {
    flex: 1,
  },
});

I have Header.tsx

const Header: React.FC = () => {
    return (
        <View style={styles.header}>
            <Pressable onPress={() => navigation.navigate('Home')}>
                <Image source={logo} style={styles.logo} />
            </Pressable>
            {citiesList.length > 0 ? (
                <CitySelection />
            ) : (
                <ActivityIndicator style={styles.spinner} />
            )}
        </View>
    );
}
const styles = StyleSheet.create({
    header: {
        backgroundColor: 'black',
        paddingVertical: 10,
        paddingHorizontal: '5%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    logo: {
        height: 50,
        width: 100,
        resizeMode: 'contain',
    },
    cityDropdown: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    cityText: {
        color: 'white',
        marginLeft: 10,
    },
    spinner: {
        marginLeft: 10,
    },
    navButton: {
        height: '100%',
        justifyContent: 'center',
        marginHorizontal: 10,
    },
    navButtonIcon: {
        height: '100%',
        paddingHorizontal: 10,
        justifyContent: 'center',
    },
    navLinks: {
        flexDirection: 'row',
        alignItems: 'center',
        height: '100%',
    },
    navText: {
        color: 'white',
        fontSize: 16,
    },
    icon: {
        marginHorizontal: 15,
        fontWeight: '100',
    },
    nameText: {
        fontStyle: 'italic',
        fontWeight: 'bold',
    },
});

My Header is not scrolling with the content. It’s stuck on top of the browser hiding content when I scroll the web page. What am I missing here?

I tried different flex settings, justifyContent: ‘flex-start’ etc but even that didn’t work. I have put the Header component in scrollview.