DOCSEARCHbyAlgolia
Submit Docs

react-native-safe-area-context

repository·main·Indexed 25 days ago

https://github.com/appandflow/react-native-safe-area-context

A flexible library for handling safe area insets in React Native applications, supporting Android, iOS, Web, macOS, and Windows. It provides tools like SafeAreaProvider, SafeAreaView, and hooks such as useSafeAreaInsets and useSafeAreaFrame to ensure UI components account for notches, status bars, and other system-level insets.

Tokens
6.2K
Snippets
22
Records
54
Agent score
79%

What's inside react-native-safe-area-context

  1. Overview of react-native-safe-area-context

    main
    react-native-safe-area-context provides a flexible way to handle safe areas in React Native applications. It supports multiple platforms including Android, iOS, Web, macOS, and Windows, ensuring that your UI components can account for notches, status bars, and other system-level insets.

  5. Speed up initial render with initialWindowMetrics

    main

    To improve initial render performance, import initialWindowMetrics from react-native-safe-area-context and pass it to the initialMetrics prop of the SafeAreaProvider.

    Limitations:

    • Do not use this if your provider remounts.
    • Do not use this if you are using react-native-navigation.
    import {
  SafeAreaProvider,
  initialWindowMetrics,
} from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      ...
    </SafeAreaProvider>
  );
}

  8. Setup SafeAreaProvider in your app root

    main

    To use react-native-safe-area-context, you must wrap your application in a SafeAreaProvider. This is typically done at the root component of your app.

    Important Considerations:

    • If you are using react-native-screens, you may also need to add SafeAreaProvider at the root of modals and routes.
    • Avoid Nesting: Do not place the provider inside a View that is animated with Animated or inside a ScrollView, as this can cause performance issues due to very frequent updates.
    import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>{/*...*/}</SafeAreaProvider>;
}