Closed tanteemmie closed 1 year ago
I have the same error, i test on device iphone 7
Any update on this issue?
Hitting the same issue when using the statusBarHidden
API from createNativeStackNavigator()
in react-navigation
... Setting statusBarHidden
to true
when rotating an iPad to landscape, then to false
again upon rotating back to portrait causes the StatusBar to overlap the App content.
It appears the issue is that the top
value from safe area insets is 0 after hiding/showing the status bar.
I created a sample React Native project that reproduces the issue here. To repro, simply run the app on an iPad, rotate to landscape and then back to portrait.
I was able to work around the issue by saving the top
value from useSafeAreaInsets()
in a separate piece of state and then use this state if/when top
ever moves to 0.
const {top} = useSafeAreaInsets();
const [originalTop, setOriginalTop] = useState(top);
useEffect(() => {
if (top > 0 && originalTop !== top) {
setOriginalTop(top);
}
}, [originalTop, top]);
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, marginTop: top === 0 ? originalTop : undefined}}>
{...}
</View>
</SafeAreaView>
);
Hitting the same issue when using the
statusBarHidden
API fromcreateNativeStackNavigator()
inreact-navigation
... SettingstatusBarHidden
totrue
when rotating an iPad to landscape, then tofalse
again upon rotating back to portrait causes the StatusBar to overlap the App content.It appears the issue is that the
top
value from safe area insets is 0 after hiding/showing the status bar.I created a sample React Native project that reproduces the issue here. To repro, simply run the app on an iPad, rotate to landscape and then back to portrait.
I was able to work around the issue by saving the
top
value fromuseSafeAreaInsets()
in a separate piece of state and then use this state if/whentop
ever moves to 0.const {top} = useSafeAreaInsets(); const [originalTop, setOriginalTop] = useState(top); useEffect(() => { if (top > 0 && originalTop !== top) { setOriginalTop(top); } }, [originalTop, top]); return ( <SafeAreaView style={{flex: 1}}> <View style={{flex: 1, marginTop: top === 0 ? originalTop : undefined}}> {...} </View> </SafeAreaView> );
Yes, it's a workaround, but in my project with hundreds of pages, i cann't just solve it by this. Actually , i met this problem not by using
statusBarHidden
api. I face it in such a situation: There is aTextInput
near the bottom of this page, when focus the TextInput, the page scrolls to let the TextInput show( which is expected----I don't know why the behavior differs in Expo which will not automatically scroll). But when blurs, the top sometimes (maybe 50% chance) becomes 0 instead of 20 in my Iphone which let header overlaying statusbar. This is only happenning on ios. The pseudo code is like:const insets = useSafeAreaInsets(); // for console only return ( <SafeAreaView style={{flex: 1, backgroundColor: 'green'}}> <Text>This is the title</Text> <View style={{height: 500}}/> <TextInput style={{backgroundColor: 'blue'}}/> <Text>H2</Text> </SafeAreaView> )
Console.log
insets
will tell that the top changes between 20 and 0 when focus/blur the TextInput.
I also get this problem, for me it only seems to happen on iPhones without a notch/island, currently the iPhone SE 3rd Gen.
This is for v3 of the library, and we're on v4. Please re-open a new issue if you're still facing issues
I experience same issue with newest version of library on iPhone SE 3rd Gen.
Is it the same as https://github.com/th3rdwave/react-native-safe-area-context/issues/23 ?
Is it the same as #23 ?
Not sure, it's related to status bar as well but maybe it's not worth to mention this problem in this topic. Safe Area just doesn't work on iPhone SE but on any other iOS phone works correctly.
Could you make an issue for Android only? This issue is muddled both with the iOS and Android
Report the issue also here as requested in the issue reported here: https://github.com/react-navigation/react-navigation/issues/8425
Current Behavior
We have a profile view as stackview within a tabbarview. In profile you can edit your profile photo by taking a photo. We use Expo camera and set the StatusBar hidden when the camera is active. All the other views display the statusbar. The screen is rotating freely when the device is rotating. Going a stack screen back after hiding the statusbar, and then display it again, causes the header to overlay the statusbar
This is the code simplyfied.
RootNavigation.tsx
MoreNavigation.tsx
Profile.tsx
EditProfilePhoto.tsx
CameraView.tsx
Expected Behavior
Header not overlaying the statusbar.
How to reproduce
When the camera is active, the statusbar is hidden, and we have our phone in portrait Change the phone to landscape, and change it back to portrait. Close the camera were you go back 1 stack screen. The header set in the navigation is overlaying the statusbar, while the statusbar is visible.
When we have the camera in landscape and close the camera and go back 1 stack screen, there is no statusbar, while it is default behaviour for IOS. When we then hold our phone in portrait outside of the camera all is well.
Also during overlaying the statusbar, then turning the phone to landscape and back to portrait, the header is correctly adjusted to the statusbar.
Your Environment