react-native-nested-safe-area

A wrapper on top of react-native-safe-area-context that allows nested safe area contexts with automatic inset consumption tracking.

Features

- Nested Context Support: Stack multiple safe area providers without overlapping insets
- Automatic Consumption: Automatically tracks and subtracts consumed insets in nested contexts
- React Integration: Built-in React Context and hooks
- Cross-Platform: Works on iOS, Android, and Web
- TypeScript Support: Fully typed with TypeScript
- Edge Control: Selectively apply safe area insets to specific edges

Installation

``sh
npm install react-native-nested-safe-area


or


yarn add react-native-nested-safe-area
`

$3

This library depends on react-native-safe-area-context. If you don't have it installed:

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


or


yarn add react-native-safe-area-context
`

Follow the react-native-safe-area-context installation guide for platform-specific setup.

Usage

$3

`jsx
import React from 'react';
import { View, Text } from 'react-native';
import { NestedSafeAreaView } from 'react-native-nested-safe-area';

export default function App() {
return (

edges={['top', 'left', 'right']}
style={{ flex: 1, backgroundColor: 'lightblue' }}
>
First safe area - has padding for top, left, right edge

edges={['bottom']}
style={{ backgroundColor: 'blue', marginTop: 'auto' }}
>
Nested safe area - has padding for bottom edge



);
}
`

$3

`jsx
import React from 'react';
import { View, Text } from 'react-native';
import {
NestedSafeAreaProvider,
useNestedSafeAreaInsets,
} from 'react-native-nested-safe-area';

function MyComponent() {
const insets = useNestedSafeAreaInsets();

return (


Content with consumed top inset


);
}

export default function App() {
return (



);
}
`

$3

The consumedEdges prop provides a convenient way to completely consume specific edges, setting them to zero in nested contexts:

`jsx
import React from 'react';
import { View, Text } from 'react-native';
import { NestedSafeAreaProvider } from 'react-native-nested-safe-area';

export default function App() {
return (

{/ Header consumes top edge completely /}

Header


{/ Main content - top edge is now zero for nested components /}


Main content (top safe area consumed)

{/ Footer consumes bottom edge /}


Footer (bottom safe area consumed)





);
}
`

$3

The resetEdges prop allows you to reset specific edges back to the original safe area values, useful when you need to restore safe areas in deeply nested contexts:

`jsx
import React from 'react';
import { View, Text } from 'react-native';
import { NestedSafeAreaProvider } from 'react-native-nested-safe-area';

export default function App() {
return (

{/ First level consumes top and bottom edges /}


No top or bottom safe areas here

{/ Modal/overlay that needs original top safe area restored /}


Modal with restored top safe area





);
}
`

$3

`jsx
import React from 'react';
import { View, Text } from 'react-native';
import { NestedSafeAreaView } from 'react-native-nested-safe-area';

export default function App() {
return (

{/ Header with only top safe area /}

Header


{/ Content area with left/right safe areas /}

Main content


{/ Footer with only bottom safe area /}
edges={['bottom']}
style={{ backgroundColor: 'green' }}
>
Footer


);
}
`

API Reference

$3

A View component that applies safe area insets as padding and automatically provides consumed insets to nested contexts.

`typescript
/>
`

Props:

- edges?: Array<'top' | 'right' | 'bottom' | 'left'> - Which edges to apply safe area to (default: all edges)
- Inherits all React Native View props

$3

Provides nested safe area context with automatic inset consumption tracking.

`typescript
consumedInsets?: Partial
consumedEdges?: Edge[]
resetEdges?: Edge[]
>
{children}

`

Props:

- consumedInsets?: Partial - Insets to subtract from parent context
- consumedEdges?: Edge[] - List of edges to completely consume (set to zero). Takes precedence over consumedInsets when provided
- resetEdges?: Edge[] - List of edges to reset to the original safe area values. Takes precedence over both consumedInsets and consumedEdges
- children: ReactNode - Child components

#### Edge Type

`typescript
type Edge = 'top' | 'right' | 'bottom' | 'left';
`

$3

Hook to access current safe area insets in nested context.

`typescript
const insets = useNestedSafeAreaInsets();
`

Returns:

- insets: EdgeInsets - Current safe area insets ({ top, right, bottom, left })

$3

Hook to access the full nested safe area context.

`typescript
const { insets, consumeInsets } = useNestedSafeAreaContext();
`

Returns:

- insets: EdgeInsets - Current safe area insets
- consumeInsets: (consumed: Partial) => EdgeInsets - Function to calculate consumed insets

How It Works

1. Base Context: The root NestedSafeAreaProvider gets insets from react-native-safe-area-context
2. Consumption Tracking: Each nested provider subtracts consumed insets from its parent context
3. Automatic Management: NestedSafeAreaView automatically applies insets as padding and marks them as consumed
4. Edge Control: Use the edges` prop to selectively apply insets to specific sides

Platform Support

- ✅ iOS: Full support with react-native-safe-area-context
- ✅ Android: Full support with react-native-safe-area-context
- ✅ Web: Full support with react-native-safe-area-context

License

MIT