To help you get started, we've collected the most common ways that react-native-safe-area-context is being used within popular public projects.

berty / berty / js / packages / components / main / CreateGroupFinalize.tsx View on Github

}> = ({ members, onRemoveMember }) => {
	const { goBack, reset } = useNativeNavigation()
	const [groupName, setGroupName] = useState('New group')
	const { call, error, done, reply } = (messengerMethodsHooks as any).useConversationCreate()

	const createGroup = React.useCallback(
		() => call({ displayName: groupName, contactsToInvite: members.map((m) => m.publicKey) }),
		[groupName, members, call],
	)
	const [layout, setLayout] = useState(0)
	const [{ flex, background, padding }] = useStyles()
	const ctx = useMsgrContext()
	const insets = useSafeAreaInsets()
	const { t }: { t: any } = useTranslation()

	React.useEffect(() => {
		// TODO: better handle error
		if (done) {
			if (error) {
				console.error('Failed to create group:', error)
			} else if (reply?.publicKey) {
				reset({
					index: 0,
					routes: [
						{
							name: Routes.Main.Home,
						},
						{
							name: Routes.Chat.Group,

View more ways to use react-native-safe-area-context

react-native-safe-area-context

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

Getting started

npm install react-native-safe-area-context

yarn add react-native-safe-area-context

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

• iOS Platform:

  $ npx pod-install

Supported react-native version

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.

You will need to be on 4.4.0 and react-native 0.70+.

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.

API

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 ...;
}

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 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={{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 (
    
      
  );
}

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:

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 and 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:

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:

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 }.

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

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

  return