useSafeAreaInsets not working

[janandaraj]

useSafeAreaInsets is not working

Android - Not Checked iOS - Not Working

I'm facing jumping or flickering while entering new screen due to SafeAreaView tag, it was mentioned in react-navigation.

WARNING The react-native-safe-area-context library also exports a SafeAreaView component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the useSafeAreaInsets hook instead and avoid using the SafeAreaView component.

So i tried to use useSafeAreaInsets hooks return below error, it's reproducible. How to fix it, any temporary solution either to fix the flickering or to use useSafeAreaInsets hook.

ERROR  Error: No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.
This error is located at:
    in Body (created by App)
    in PersistGate (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in Redux(RootComponent), js engine: hermes

Code

import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const Body = () => {
  const insets = useSafeAreaInsets();

  useEffect(() => {
    console.log(insets);
  }, [insets]);

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
        flex: 1,
        backgroundColor: 'black',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text style={{color: 'white'}}>Hello</Text>
    </View>
  );
};

export default Body;

Project Info

System: OS: macOS 13.6 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 58.76 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.13.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 8.1.0 path: /usr/local/bin/npm Watchman: version: 2023.11.20.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /usr/local/bin/pod SDKs: iOS SDK: Platforms:

• DriverKit 23.0
• iOS 17.0
• macOS 14.0
• tvOS 17.0
• watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.16.1 path: /usr/bin/javac Ruby: version: 2.6.10 path: /usr/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.7 wanted: 0.72.7 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

[jacobp100]

Make sure you are rendering <SafeAreaProvider> at the top of your app

[janandaraj]

Thanks for the reply i was misunderstood the error, also there is some bottom padding difference between react native's SafeAreaView and useSafeAreaInsets

[HarshitMadhav]

I am facing this issue in iOS 18 beta release and I am rendering <SafeAreaProvider > at the top of my app