React native Question posted in
The official React Native documentation can be found here.

React native – I want to use useSafeAreaInsets in the expo to get the paddingbottom, but I get an error

import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();
export default function App() {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaProvider>
        <View style={{ flex: 1, }}>
          <WebView ... />
       </View>
   </SafeAreaProvider>
);

An error occurs.
I wrote the code at the top and it does.
I updated to the latest version of expo and it doesn’t work.
I want to get the bottom padding value of the iPhone.
Is there any way to do this?

”’Error: No safe area value available. Make sure you are rendering ”’<SafeAreaProvider> at the top of your app.

I found the link by accident and it seems to have stopped 2 years ago, so if there is another way, please help.
https://github.com/a-eid/expo-static-safearea-insets

I want to get the bottom padding value of the iPhone.
Please help me.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    export default function App() {
  return (
    <SafeAreaProvider>
      <Main />
    </SafeAreaProvider>
  )
}

//export default function App() {
function Main() {
  const insets = useSafeAreaInsets();

  return (
    <Root>
      <View>
      ...
      </Vide>
    </Root>
  )
}

    I did what @johnhaup said and it worked. However, I wish there was an easier way to do it..


  2. 0

    You need to call useSafeAreaInsets in a child component, not in the same component as the Provider.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search