Menu
Basically, i am creating a react-native app and i wanted that my logo image didn't overlap with the notification/status bar and i didn't want to set a marginTop property manually because the size of the notification bar changes on different models of phones, and i found out that if i replaced my <View/> component with a <SafeAreaView/> component my problem would be solved.
And while it worked great for IOS, it didn't worked at all for android. Of course, after a quick research i found out that this is a IOS only component, and when you try to use it on Android the <SafeAreaView/> component returns a regular <View/> back.
So, i am trying to find out if there's a component or a workaround that works on android.
719
The SafeAreaView acts like a regular View component from React Native and includes additional padding to position the content below the notch or status bar of a device. It also comes with an edges prop that customizes safe area insets around different edges such as top, bottom, left, and right.
The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.
import { useSafeAreaInsets } from 'react-native-safe-area-context'; ... const insets = useSafeAreaInsets(); Then you can get the bottom safe area height from safeAreaInsets.
react-native-safe-area-context provides a flexible API for accessing device safe area inset information. This allows you to position your content appropriately around notches, status bars, home indicators, and other such device and operating system interface elements.
Yes, status bar height changes from device to device, so you can either import status bar from react-native, or Constants from Expo so you can get the actual status bar height based on the device that is used.
import { StyleSheet, Platform, StatusBar } from "react-native";
import Constants from 'expo-constants';
const statusBarHeight = Constants.statusBarHeight
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
