React native android safe area

⚠️ This library is deprecated. It is no longer used in React Navigation and it has been succeeded by the excellent react-native-safe-area-context. Please use react-native-safe-area-context instead, or you are likely to have a bad time.

This library provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).

💡 The latest release is currently marked as 1.1.1 and depends on react-native-safe-area-context@^0.7.3. To use react-native-safe-area-context@^1.0.0, you will need to install react-native-safe-area-view@2.0.0 — this currently has the next tag on npm.

In the Expo managed workflow:

In bare React Native projects:

Next, you need to link react-native-safe-area-context . If you are using autolinking, run npx pod-install again. If not, follow these instructions. Then re-build your app binary.

First you need to wrap the root of your app with the SafeAreaProvider .

Now you can wrap components that touch any edge of the screen with a SafeAreaView .

Look, I’m safe! Not under a status bar or notch or home indicator or anything! Very cool

Sometimes you will observe unexpected behavior and jank because SafeAreaView uses onLayout then calls measureInWindow on the view. If you know your view will touch certain edges, use forceInset to force it to apply the inset padding on the view.

Yeah, I’m safe too!

Accessing safe area inset values

Sometimes it’s useful to know what the insets are for the top, right, bottom, and left of the screen. See the documentation for react-native-safe-area-context for more information.

About

⚠️ Deprecated: use the successor react-native-safe-area-context instead!

Источник

react-native-safe-area-context

A flexible way to handle safe area, also works on Android and Web!

Getting started

You then need to link the native parts of the library for the platforms you are using.

Linking in React Native >= 0.60

Linking the package is not required anymore with Autolinking.

iOS Platform:

Linking in React Native Manually link the library on iOS

Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile :

Make the following changes:

android/settings.gradle

android/app/build.gradle

android/app/src/main/. /MainApplication.java

On top, where imports are:

Add the SafeAreaContextPackage class to your list of exported packages.

Note Before 3.1.9 release of safe-area-context, Building for React Native 0.59 would not work due to missing header files. Use >= 3.1.9 to work around that.

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.

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

Props

Accepts all View props. Has a default style of .

initialMetrics

Optional, defaults to null .

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

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=<> on a SafeAreaView that has insets of 20 will result in a top padding of 30.

Example

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:

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:

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.

useSafeAreaFrame

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

SafeAreaInsetsContext

React Context with the value of the safe area insets.

Can be used with class components:

withSafeAreaInsets

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

SafeAreaFrameContext

React Context with the value of the safe area frame.

initialWindowMetrics

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

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

Deprecated apis

useSafeArea

Use useSafeAreaInsets instead.

SafeAreaConsumer

Use SafeAreaInsetsContext.Consumer instead.

SafeAreaContext

Use SafeAreaInsetsContext instead.

initialWindowSafeAreaInsets

Use initialWindowMetrics instead.

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.

Optimization

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

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 .

Testing

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

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

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.

Источник

A flexible way to handle safe area insets in JS. Also works on Android and Web!

Overview

A flexible way to handle safe area, also works on Android and Web!

You then need to link the native parts of the library for the platforms you are using.

Linking in React Native >= 0.60

Linking the package is not required anymore with Autolinking.

iOS Platform:

Linking in React Native Manually link the library on iOS

Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile :

Make the following changes:

On top, where imports are:

Add the SafeAreaContextPackage class to your list of exported packages.

Note Before 3.1.9 release of safe-area-context, Building for React Native 0.59 would not work due to missing header files. Use >= 3.1.9 to work around that.

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

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.

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.

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.

Accepts all View props. Has a default style of .

Optional, defaults to null .

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

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=<> on a SafeAreaView that has insets of 20 will result in a top padding of 30.

Accepts all View props.

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:

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:

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

React Context with the value of the safe area insets.

Can be used with class components:

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

React Context with the value of the safe area frame.

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

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

Use useSafeAreaInsets instead.

Use SafeAreaInsetsContext.Consumer instead.

Use SafeAreaInsetsContext instead.

Use initialWindowMetrics instead.

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

When testing components nested under SafeAreaProvider , ensure to pass initialMetrics to provide mock data for frame and insets and ensure the provider renders its children.

Issues

Violation: requireNativeComponent: «RNCSafeAreaView» was not found in the UIManager.

I believe I linked the lib correctly but it still doesn’t find RNCSafeAreaView . Using RN 0.59.x.

V2 seems to have performance issues

just upgraded to v2.0.0 from v0.7.3.

I am using react-navigation V5 at the moment with latest version.

upon upgrading to 2.0.0, stack navigation animations lags / stutters on some screens(maybe because of native code changes in 2.0.0?).

Confirmed that this only happens on the latest version of react-native-safe-area-context,

since v0.7.3 works fine. Also tried v1.0.2, works fine as well.

besides react navigation, I am using safeAreaViews in my screens from react-native-safe-area-context as well.

Due to the problem, at the moment I upgraded to 1.0.2 from 0.7.3.

Incorrect insets.bottom value on the devices with Android 5.x.x and hardware buttons

The package returns incorrect insets.bottom value on the devices with Android 5.x.x and hardware buttons. E.g. Samsung S4.

Extra padding with reactnavigation on android

Sorry, for the short bug report as I can only describe it for now:

After upgrading from v0.7.3 to anything above v1.0.0 I’m seeing an extra padding in stack navigators on android. I goes away as soon as I tap into a text field.

Downgrading fixes the issue.

Build error on iOS after installing react-native-safe-area-context

Getting this error after installing the library for the first time and trying to build the project on xcode. it worked perfectly on android. I’m using RN 0.59.9

SafeAreaView «edges» prop not working

Hey – loving the library! Working great here with react-navigation 5.

Just tried using the edges prop and it doesn’t appear to be working.

I wasn’t sure if the docs meant to literally to pass an array of which edges (‘top’, ‘left’, etc.) to apply insets to, so I checked out the source (which appears to confirm this assumption).

While I was there, noticed something. Though I’m not super familiar w/ TS, it seems like in src/SafeAreaView.tsx , that the constants for the TOP , RIGHT , BOTTOM , and LEFT should be different bits if we’re accumulating them in the reduce function below? Not sure if related or even a good observation.

Anyway, thanks. Let me know if I can help.

useSafeAreaInsets all return 0 for values

I am trying to fix an issue while using the tab navigator and/or Safe Area where my keyboardAvoidingView is covering the message input box on the chat screen when the keyboard is brought up. Not sure what the culprit is exactly, but I am pretty sure it’s the safeview padding on top and/or bottom, which I have learned are the «insets». I am trying to use useSafeAreaInsets , but all the values return 0! (See in CustomKeyboardAvoidingView ) I want to use those insets to add to the keyboardVerticalOffset param so the avoiding view works properly. I tried setting the keyboardVerticalOffset to a flat value, but it seems to be different depending on the device, aka the inset padding values would make sense. I like the style of the tab bar right now, so I’d like to keep it with an increased height and padding and font size, but maybe I am doing it wrong with react native navigation? Regardless, the insets should be returning a value.

I tried using the solution outlined in this issue: https://github.com/th3rdwave/react-native-safe-area-context/issues/54

Here is my App.js code recreating the issue:

package.json

IOS devices without notches get stucked

Hey folks, first of all thanks for this library, it’s amazing!

This week I moved on from react-native-safe-area-view to react-native-safe-area-context and I noticed my app wasn’t running in some devices without notches. Unfortunately I had n log and I have no idea what’s happening (it’s not a crash itself, my app just get stucked on splash screen).

Earlier this afternoon I started to debug and found that’s related to this lib. I just removed and it started to work again (obviously I couldn’t get the insets from the context anymore lol)

Any thoughts? Apparently SafeAreaProvider isn’t rendering children somehow.

I’d be glad to help.

App crashes after updating to 1.0.0

0.7.3 was fine. After the update to 1.0.0 app crashes upon every start.

Running Version 1.0.0 with React-Native 0.61.5 crashes aswell:

Unable to resolve «./SafeAreaContext» from «node_modules/react-native-safe-area-context/src/index.tsx»

I have been getting this error when I am trying to do stack navigation in react-native: Unable to resolve «./SafeAreaContext» from «node_modules/react-native-safe-area-context/src/index.tsx»

Thank you for your help!

RNCSafeAreaProvider causing crash

It looks like RNCSafeAreaProvider causing crashes as seen in this firebase error report

From what I can tell it looks like some props are undefined. This is how we are using it.

react-native: 0.66.3
react-native-safe-area-context: 3.1.8
@react-navigation/native: 5.7.6

SafeAreaProvider doesn’t support all the props of a View.

SafeAreaProvider doesn’t support all the props of a View .

Because You forgot to spread other props.

I need the onLayout props of View .

Update README.md

add yarn installation option

When navigating to a new screen, a short flicker/jump appears. I am using SafeAreaProvider wrapped around the rest of my app and then using SafeAreaView at the root of my screens.

react-native: 0.66.1
react-native-safe-area-context: 3.3.2
@react-navigation/stack 6.0.11
@react-navigation/native-stack: 6.2.5
@react-navigation/native: 6.0.6
iOS: 15, iPhone 13
macOS 11.6 (Big Sur)
Macbook Pro 13″ M1

Bump url-parse from 1.5.1 to 1.5.3

Bumps url-parse from 1.5.1 to 1.5.3.

Commits

ad44493 [dist] 1.5.3
c798461 [fix] Fix host parsing for file URLs (#210)
201034b [dist] 1.5.2
2d9ac2c [fix] Sanitize only special URLs (#209)
fb128af [fix] Use ‘null’ as origin for non special URLs
fed6d9e [fix] Add a leading slash only if the URL is special
94872e7 [fix] Do not incorrectly set the slashes property to true
81ab967 [fix] Ignore slashes after the protocol for special URLs
ee22050 [ci] Use GitHub Actions
d2979b5 [fix] Special case the file: protocol (#204)
Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase .

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Bump tmpl from 1.0.4 to 1.0.5

Bumps tmpl from 1.0.4 to 1.0.5.

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase .

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Add documentation to enable notch on android

It might be convenient to include the needed android config to enable notches here

Add these lines to MainActivity.java

Credit: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3 https://stackoverflow.com/a/29311321

iphone xr withSafeAreaInsets()

I have an iphone xr, which has a top notch and a soft bottom nav button thing. This looks correct for portrait: this.props.insets =

And on portrait, the notch is now on the left, and th bottom bar thing is moved to the bottom and I get these insets: insets this.props.insets = <"bottom": 21, "left": 48, "right": 48, "top": 0>. I would expect it to come across as this.props.insets =

Are the left and right both set to 48 expected?

Investigate using androix.window.layout

Missing types for react-native-safe-area-context/jest/mock

When setting up the mock for jest, I face a typescript error:

Could not find a declaration file for module ‘react-native-safe-area-context/jest/mock’.

The mock is currently a JS file, would it be possible to rewrite it to TS or provide a definition for it?

Источник

React native android safe area