Previously, I was using toggling to handle navigation. Now I am switching to useNavigation hooks. From one page, I move to another page like this:
<TouchableOpacity onPress={() => { if (title == 'h') { navigation.navigate('AddFriend'); } }}>When In navigate to the screen, I see an unwanted white space at the bottom, even though the original design did not have this. However, when I click the Cancelbutton, the space disappear, the page formats according to what it should be like and then it navigates back to the original page. Why is it showing the white space? How can I remove it?
This is how the code for my AddFriend page looks like:
type AddFriendPageProps = { toggleShowPage: () => void; showAddFriendPage: boolean;};export const AddFriendPage: React.FunctionComponent<AddFriendPageProps> = ({ toggleShowPage, showAddFriendPage,}) => { const [showAddFriendPhonePage, setShowAddFriendPhonePage] = useState(false); const navigation = useNavigation(); const toggleAddFriendPhonePage = () => { setShowAddFriendPhonePage(showAddFriendPhonePage ? false : true); }; return (<Modal visible={showAddFriendPage} animationType="slide" transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text style={styles.searchCancelDoneText} onPress={() => navigation.navigate('Home')}> Cancel</Text><Text style={styles.searchTopMiddleText}>Add Friend</Text><Text style={styles.searchCancelDoneText}>Done</Text></View><View style={styles.searchFieldContainer}><View style={styles.buttonContainer}><Button rounded style={styles.button} onPress={() => setShowAddFriendPhonePage(true)}><Text style={styles.text}>Add by Phone Number</Text></Button></View></View></View><AddFriendPhonePage showAddFriendPhonePage={showAddFriendPhonePage} toggleShowPage={toggleAddFriendPhonePage} /></View></SafeAreaView></Modal> );};Styles:
const styles = ScaledSheet.create({ container: { height: '100%', backgroundColor: 'white', //'#2E3331', width: '100%', }, searchTopContainer: { backgroundColor: '#2E3331', height: moderateScale(750), }, searchTopTextContainer: { flexDirection: 'row', justifyContent: 'space-between', marginVertical: moderateScale(15), height: moderateScale(30), paddingLeft: moderateScale(30), paddingRight: moderateScale(30), }, searchCancelDoneText: { fontSize: moderateScale(14), color: 'white', }, searchTopMiddleText: { fontSize: moderateScale(15), fontWeight: 'bold', color: 'white', }, searchFieldContainer: { alignItems: 'center', height: moderateScale(120), }, button: { width: moderateScale(200), height: moderateScale(50), backgroundColor: '#31C283', justifyContent: 'center', marginBottom: 20, }, text: { fontSize: moderateScale(14, 0.7), }, searchField: { backgroundColor: 'white', width: moderateScale(300, 0.3), height: verticalScale(40), marginVertical: moderateScale(6), borderRadius: verticalScale(10), }, buttonContainer: { paddingTop: 250, flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between', }, inputText: { color: '#ffffff', }, searchText: { fontSize: moderateScale(14), },});If I change the background color the container to red and apply that style on the safeView, it makes the top part (where the time is written) red along with the bottom part which is supposed to match with the other screen. Both come under the safeView thing. How do I separate them?
If I remove the SafeView, the whole screen moves upwards, apart from the Cancel and Done button. The white space increases even more