From 437415c7a229747349f5ae3a849567b41674b5cf Mon Sep 17 00:00:00 2001 From: Nicoole Date: Mon, 26 Oct 2026 11:23:02 -0400 Subject: [PATCH] docs: redirect legacy pages to rnsac domain --- docs/api/deprecated/index.html | 34 +++++++------- docs/api/initial-window-metrics/index.html | 30 ++++++++----- docs/api/safe-area-frame-context/index.html | 27 +++++++---- docs/api/safe-area-insets-context/index.html | 29 +++++++----- docs/api/safe-area-listener/index.html | 34 +++++++------- docs/api/safe-area-provider/index.html | 37 ++++++++------- docs/api/safe-area-view/index.html | 44 ++++++++---------- docs/api/use-safe-area-frame/index.html | 28 +++++++----- docs/api/use-safe-area-insets/index.html | 30 ++++++++----- docs/api/with-safe-area-insets/index.html | 28 +++++++----- docs/category/api-reference/index.html | 27 +++++++---- docs/contributing/index.html | 47 ++++++++------------ docs/index.html | 33 +++++++------- docs/optimizations/index.html | 33 +++++++------- docs/testing/index.html | 43 ++++++++---------- docs/usage/index.html | 41 ++++++++--------- index.html | 27 +++++++---- 17 files changed, 306 insertions(+), 266 deletions(-) diff --git a/docs/api/deprecated/index.html b/docs/api/deprecated/index.html index 111bb00e..13fa65cb 100644 --- a/docs/api/deprecated/index.html +++ b/docs/api/deprecated/index.html @@ -1,20 +1,22 @@ - + - - -Deprecated APIs | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/initial-window-metrics/index.html b/docs/api/initial-window-metrics/index.html index 9904d657..ed0123c4 100644 --- a/docs/api/initial-window-metrics/index.html +++ b/docs/api/initial-window-metrics/index.html @@ -1,16 +1,22 @@ - + - - -initialWindowMetrics | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

initialWindowMetrics

Insets and frame of the window on initial render. This can be used with the initialMetrics from SafeAreaProvider. See optimization for more information.

-

Object with:

-
{
  frame: { x: number, y: number, width: number, height: number },
  insets: { top: number, left: number, right: number, bottom: number },
}
-

NOTE: This value can be null or out of date as it is computed when the native module is created.

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/safe-area-frame-context/index.html b/docs/api/safe-area-frame-context/index.html index 58abefe9..d5ee73a2 100644 --- a/docs/api/safe-area-frame-context/index.html +++ b/docs/api/safe-area-frame-context/index.html @@ -1,13 +1,22 @@ - + - - -SafeAreaFrameContext | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/safe-area-insets-context/index.html b/docs/api/safe-area-insets-context/index.html index c090bfb0..a8d592af 100644 --- a/docs/api/safe-area-insets-context/index.html +++ b/docs/api/safe-area-insets-context/index.html @@ -1,15 +1,22 @@ - + - - -SafeAreaInsetsContext | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

SafeAreaInsetsContext

React Context with the value of the safe area insets.

-

Can be used with class components:

-
import { SafeAreaInsetsContext } from 'react-native-safe-area-context';

class ClassComponent extends React.Component {
  render() {
    return (
      <SafeAreaInsetsContext.Consumer>
        {(insets) => <View style={{ paddingTop: insets.top }} />}
      </SafeAreaInsetsContext.Consumer>
    );
  }
}
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/safe-area-listener/index.html b/docs/api/safe-area-listener/index.html index 055a90ce..ea87bd0c 100644 --- a/docs/api/safe-area-listener/index.html +++ b/docs/api/safe-area-listener/index.html @@ -1,20 +1,22 @@ - + - - -SafeAreaListener | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

SafeAreaListener

Component that lets you listen to safe area insets and frame changes at the position where it is rendered.

-

This is an alternative to using the useSafeAreaInsets and useSafeAreaFrame hooks in combinations with SafeAreaProvider. Unlike the hooks, this notifies about changes with the onChange prop and doesn't trigger re-renders when the insets or frame change.

-

Example​

-
import { SafeAreaListener } from 'react-native-safe-area-context';

function SomeComponent() {
  return (
    <SafeAreaListener
      onChange={({ insets, frame }) => {
        console.log('Safe area changed:', { insets, frame });
      }}
    >
      {/* Your content here */}
    </SafeAreaListener>
  );
}
-

Props​

-

Accepts all View props.

-

onChange​

-

Required, a function that receives an object with insets and frame properties. The insets property contains the safe area insets, and the frame property contains the frame of the component.

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/safe-area-provider/index.html b/docs/api/safe-area-provider/index.html index 055fb20b..c5ea5af3 100644 --- a/docs/api/safe-area-provider/index.html +++ b/docs/api/safe-area-provider/index.html @@ -1,23 +1,22 @@ - + - - -SafeAreaProvider | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

SafeAreaProvider

You should add SafeAreaProvider in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens.

-

Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.

-

Example​

-
import { SafeAreaProvider } from 'react-native-safe-area-context';

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

Props​

-

Accepts all View props. Has a default style of {flex: 1}.

-

initialMetrics​

-

Optional, defaults to null.

-

Can be used to provide the initial value for frame and insets, this allows rendering immediately. See optimization for more information on how to use this prop.

-

ref​

-

Optional ref to the underlying view.

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/safe-area-view/index.html b/docs/api/safe-area-view/index.html index fc8f3a00..a0ff6bb4 100644 --- a/docs/api/safe-area-view/index.html +++ b/docs/api/safe-area-view/index.html @@ -1,30 +1,22 @@ - + - - -SafeAreaView | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

SafeAreaView

SafeAreaView is a regular View component with the safe area insets applied as padding or margin.

-

Padding or margin styles are added to the insets, for example style={{paddingTop: 10}} on a SafeAreaView that has insets of 20 will result in a top padding of 30.

-

Example​

-
import { SafeAreaView } from 'react-native-safe-area-context';

function SomeComponent() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
    </SafeAreaView>
  );
}
-

Props​

-

Accepts all View props.

-

edges​

-

Optional, array of top, right, bottom, and left. Defaults to all.

-

Sets the edges to apply the safe area insets to.

-

For example if you don't want insets to apply to the top edge because the view does not touch the top of the screen you can use:

-
<SafeAreaView edges={['right', 'bottom', 'left']} />
-

Optionally it can be set to an object { top?: EdgeMode, right?: EdgeMode, bottom?: EdgeMode, left?: EdgeMode } where EdgeMode = 'off' | 'additive' | 'maximum'. Additive is a default mode and is the same as passing an edge in the array: finalPadding = safeArea + padding. Maximum mode will use safe area inset or padding/margin (depends on mode) if safe area is less: finalPadding = max(safeArea, padding). For example if you want a floating UI element that should be at the bottom safe area edge on devices with safe area or 24px from the bottom of the screen on devices without safe area or if safe area is less than 24px:

-
<SafeAreaView style={{paddingBottom: 24}} edges={{bottom: 'maximum'}} />
-

mode​

-

Optional, padding (default) or margin.

-

Apply the safe area to either the padding or the margin.

-

This can be useful for example to create a safe area aware separator component:

-
<SafeAreaView mode="margin" style={{ height: 1, backgroundColor: '#eee' }} />
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/use-safe-area-frame/index.html b/docs/api/use-safe-area-frame/index.html index 2caf2b15..c8bac2ed 100644 --- a/docs/api/use-safe-area-frame/index.html +++ b/docs/api/use-safe-area-frame/index.html @@ -1,14 +1,22 @@ - + - - -useSafeAreaFrame | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

useSafeAreaFrame

Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module.

-

Object with { x: number, y: number, width: number, height: number }

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/use-safe-area-insets/index.html b/docs/api/use-safe-area-insets/index.html index e5b100f2..58f808e4 100644 --- a/docs/api/use-safe-area-insets/index.html +++ b/docs/api/use-safe-area-insets/index.html @@ -1,16 +1,22 @@ - + - - -useSafeAreaInsets | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

useSafeAreaInsets

Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.

-

Object with { top: number, right: number, bottom: number, left: number }.

-

Example​

-
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function HookComponent() {
  const insets = useSafeAreaInsets();

  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }} />;
}
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/api/with-safe-area-insets/index.html b/docs/api/with-safe-area-insets/index.html index 13e12d25..4ad46b4c 100644 --- a/docs/api/with-safe-area-insets/index.html +++ b/docs/api/with-safe-area-insets/index.html @@ -1,14 +1,22 @@ - + - - -withSafeAreaInsets | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

withSafeAreaInsets

Higher order component that provides safe area insets as the insets prop.

-
type Props = WithSafeAreaInsetsProps & {
  someProp: number;
};

class ClassComponent extends React.Component<Props> {
  render() {
    return <View style={{ paddingTop: this.props.insets.top }} />;
  }
}

const ClassComponentWithInsets = withSafeAreaInsets(ClassComponent);

<ClassComponentWithInsets someProp={1} />;
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/category/api-reference/index.html b/docs/category/api-reference/index.html index 8d8a9fc6..e73a3dbf 100644 --- a/docs/category/api-reference/index.html +++ b/docs/category/api-reference/index.html @@ -1,13 +1,22 @@ - + - - -API reference | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

API reference

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/contributing/index.html b/docs/contributing/index.html index a0be78d1..1c14987c 100644 --- a/docs/contributing/index.html +++ b/docs/contributing/index.html @@ -1,33 +1,22 @@ - + - - -Contributing | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Contributing

Install dependencies​

-

Use yarn to install development dependencies.

-
yarn install
-

If you don't have bundler installed:

-
gem install bundler
-

Move to the example directory and install dependencies there too.

-
cd example
yarn install
bundle install
-
cd ios && bundle exec pod install
-

Example app​

-

Start the example app to test your changes. You can use one of the following commands from the repo root, depending on the platform you want to use.

-

From the example directory:

-

iOS​

-
yarn ios
-

I also recommend opening example/ios/SafeAreaViewExample.xcworkspace in Xcode if you need to make changes to native code.

-

Android​

-
yarn android
-

I also recommend opening example/android in Android Studio if you need to make changes to native code.

-

Use ctrl+cmd+z on iOS or ctrl+m on Android to open the dev menu and choose an example.

-

Run tests​

-
yarn test
-

Open a pull request!​

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/index.html b/docs/index.html index 5b818c97..275b63a8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,19 +1,22 @@ - + - - -Getting started | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Getting started

npm install react-native-safe-area-context
-

Supported react-native versions​

-
react-native-safe-area-context versionreact-native version
5.x>= 0.75
4.x0.64 - 0.74
-

New architecture support​

-

This library currently has experimental support for the new react-native architecture. Note that there will be breaking changes and only the latest version of react-native will be supported.

-

Contributing​

-

See the Contributing Guide

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/optimizations/index.html b/docs/optimizations/index.html index bc328d16..e9dd4e31 100644 --- a/docs/optimizations/index.html +++ b/docs/optimizations/index.html @@ -1,19 +1,22 @@ - + - - -Optimizations | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Optimizations

Web SSR​

-

If you are doing server side rendering on the web you can use initialMetrics to inject insets and frame value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.

-

SafeAreaView​

-

If you can, use SafeAreaView. It's implemented natively so when rotating the device, there is no delay from the asynchronous bridge.

-

initialWindowMetrics​

-

To speed up the initial render, you can import initialWindowMetrics from this package and set as the initialMetrics prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using react-native-navigation.

-
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      ...
    </SafeAreaProvider>
  );
}
Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/testing/index.html b/docs/testing/index.html index 28935e61..bc28c227 100644 --- a/docs/testing/index.html +++ b/docs/testing/index.html @@ -1,29 +1,22 @@ - + - - -Testing | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Testing

Built in mocks​

-

This library includes a built in mock for Jest. It will use the following metrics by default:

-
{
  frame: {
    width: 320,
    height: 640,
    x: 0,
    y: 0,
  },
  insets: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
}
-

To use it, add the following code to the jest setup file:

-
import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';

jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
-

To have more control over the test values it is also possible to pass initialMetrics to -SafeAreaProvider to provide mock data for frame and insets.

-
export function TestSafeAreaProvider({ children }) {
  return (
    <SafeAreaProvider
      initialMetrics={{
        frame: { x: 0, y: 0, width: 0, height: 0 },
        insets: { top: 0, left: 0, right: 0, bottom: 0 },
      }}
    >
      {children}
    </SafeAreaProvider>
  );
}
-

Enabling Babel Parsing for Modules​

-

While trying to use this mock, a frequently encountered error is:

-
SyntaxError: Cannot use import statement outside a module.
-

This issue arises due to the use of the import statement. To resolve it, you need to permit Babel to parse the file.

-

By default, Jest does not parse files located within the node_modules folder.

-

However, you can modify this behavior as outlined in the Jest documentation on transformIgnorePatterns customization. -If you're using a preset, like the one from react-native, you should update your Jest configuration to include react-native-safe-area-context as shown below:

-
transformIgnorePatterns: [
  'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-safe-area-context)/)',
];
-

This adjustment ensures Babel correctly parses modules, avoiding the aforementioned syntax error.

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/docs/usage/index.html b/docs/usage/index.html index 62fd1bb2..67baa8a4 100644 --- a/docs/usage/index.html +++ b/docs/usage/index.html @@ -1,27 +1,22 @@ - + - - -Usage | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Usage

This library has 2 important concepts, if you are familiar with React Context this is very similar.

-

Providers​

-

The SafeAreaProvider component is a View from where insets provided by consumers are relative to. This means that if this view overlaps with any system elements (status bar, notches, etc.) these values will be provided to descendent consumers. Usually you will have one provider at the top of your app.

-

Consumers​

-

Consumers are components and hooks that allow using inset values provided by the nearest parent provider. Values are always relative to a provider and not to these components.

-
    -
  • -

    SafeAreaView is the preferred way to consume insets. This is a regular View with insets applied as extra padding or margin. It offers better performance by applying insets natively and avoids flickers that can happen with the other JS based consumers.

    -
    • -
  • -

    useSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. Use this if you need more control over how insets are applied.

    -
    • -
-

Keyboard handling​

-

The safe area insets do not include the software keyboard. It is recommended to use react-native-keyboard-controller to handle those.

Copyright © 2026 App & Flow. Built with Docusaurus.
+ + + Continue to the documentation + - \ No newline at end of file + diff --git a/index.html b/index.html index 7411dd1d..317d9f05 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,22 @@ - + - - -React Native Safe Area Context | React Native Safe Area Context - - + + Documentation moved + + + - -
Skip to main content

Simplifying Layout Management with React Native Safe Area Context

Get started
npm install react-native-safe-area-context

Build layouts your way

Use safe area insets directly from JavaScript instead of calculating offsets for different devices. Set the padding or margins you want and let the safe area handle the rest.

Same API across platforms

Handle safe areas on iOS, Android, and web without writing separate logic for each platform.

Better handling during rotation

SafeAreaView applies safe area insets natively, so your layout can update when the device rotates without waiting for a JavaScript update.

iOS and Android phones with blue safe content areas clear of camera cutouts and home indicators.
+ + + Continue to the documentation + - \ No newline at end of file +