My view is getting cut off on android with React Navigation's header (it works fine on IOS). I have tried changing the windowSoftInputMode to adjustPan to no avail. No matter what content I put in the View it gets cut off. Heres a minimal version of the code:
page.jsx
<View style={styles.container}>
...
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.White.rgb,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
},
});
<Stack.Navigator>
<Stack.Screen
name="screen"
component={screenPrimary}
options={({ navigation, route }) => ({
headerLeft: () => <BackButton goBack={navigation.goBack} />,
headerTitle: 'Details',
title: 'Details',
headerTitleAlign: "center",
})}
/>
</Stack.Navigator>
