### Install Example App Dependencies

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

Navigate to the example directory and install its dependencies using yarn and bundle.

```sh
cd example
yarn install
bundle install
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

Start the example application on iOS from the repository root.

```sh
yarn ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

Start the example application on Android from the repository root.

```sh
yarn android
```

--------------------------------

### Install iOS Pods

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

After installing example app dependencies, navigate to the ios directory and install the CocoaPods dependencies.

```sh
cd ios && bundle exec pod install
```

--------------------------------

### Install Bundler

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

If bundler is not installed, use gem to install it.

```sh
gem install bundler
```

--------------------------------

### Start Local Development Server

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/README.md

Starts a local development server and opens the website in a browser. Changes are reflected live without server restarts.

```bash
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/README.md

Run this command to install project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Install react-native-safe-area-context with npm

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/getting-started.mdx

Use npm to install the library. This is the standard package manager for Node.js projects.

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

--------------------------------

### Install Development Dependencies

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

Use yarn to install the necessary development dependencies for the project.

```sh
yarn install
```

--------------------------------

### Install react-native-safe-area-context with Yarn

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/getting-started.mdx

Use Yarn, another popular package manager, to add the library to your project.

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

--------------------------------

### withSafeAreaInsets Usage

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/with-safe-area-insets.mdx

This example demonstrates how to use the `withSafeAreaInsets` HOC with a class component. The HOC wraps the `ClassComponent`, making the `insets` prop available. The `insets.top` value is then used to apply padding to the top of a `View` component, ensuring content is displayed below the status bar.

```APIDOC
## withSafeAreaInsets

### Description
A higher-order component that wraps a React component and injects safe area insets as a prop.

### Usage

```tsx
type Props = WithSafeAreaInsetsProps & {
  someProp: number;
};

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

const ClassComponentWithInsets = withSafeAreaInsets(ClassComponent);

// Render the wrapped component
<ClassComponentWithInsets someProp={1} />;
```

### Props

`withSafeAreaInsets` injects the following prop:

- **insets** (object) - An object containing the safe area insets. It has the following properties:
  - **top** (number) - The inset from the top of the screen.
  - **bottom** (number) - The inset from the bottom of the screen.
  - **left** (number) - The inset from the left of the screen.
  - **right** (number) - The inset from the right of the screen.
```

--------------------------------

### useSafeAreaInsets

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/use-safe-area-insets.mdx

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.

```APIDOC
## useSafeAreaInsets

### Description
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.

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

### Example
```tsx
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }} />;
}
```
```

--------------------------------

### Mock react-native-safe-area-context for Jest

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/testing.mdx

Add this code to your Jest setup file to mock the react-native-safe-area-context library. This ensures your tests use the provided mock implementation.

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

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

--------------------------------

### Accessing Safe Area Insets with useSafeAreaInsets

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/use-safe-area-insets.mdx

Use this hook to get the safe area insets object, which contains `top`, `right`, `bottom`, and `left` properties. It's useful for applying padding or margins that respect the device's safe areas. Insets are not updated synchronously, so expect a slight delay.

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

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

  return <View style={{ paddingBottom: Math.max(insets.bottom, 16) }} />;
}
```

--------------------------------

### Build Static Website

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/README.md

Generates static content for the website into the 'build' directory, ready for hosting.

```bash
yarn build
```

--------------------------------

### Deploy Website (SSH)

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/README.md

Builds the website and deploys it using SSH. Assumes GitHub pages hosting.

```bash
USE_SSH=true yarn deploy
```

--------------------------------

### Deploy Website (No SSH)

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/README.md

Builds the website and deploys it without using SSH. Requires your GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Define Library and Source Files

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Sets up variables for library naming and directories, then uses globbing to find custom and codegen-generated C++ source files.

```cmake
cmake_minimum_required(VERSION 3.13)
set(CMAKE_VERBOSE_MAKEFILE ON)

set(LIB_LITERAL safeareacontext)
set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})

set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../common/cpp)
set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})

file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL}/*.cpp)
file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
```

--------------------------------

### Run Project Tests

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/contributing.mdx

Execute the project's test suite using yarn.

```sh
yarn test
```

--------------------------------

### Specify Include Directories

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Configures the include paths for the library target, making headers accessible during compilation.

```cmake
target_include_directories(
  ${LIB_TARGET_NAME}
  PUBLIC
  .
  ${LIB_COMMON_DIR}
  ${LIB_ANDROID_GENERATED_JNI_DIR}
  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
)
```

--------------------------------

### Custom TestSafeAreaProvider with Initial Metrics

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/testing.mdx

Wrap your test components with this provider to supply custom mock data for frame and insets. This allows for more granular control over safe area values during testing.

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

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>
  );
}
```

--------------------------------

### Project Include Directories

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Adds the current source directory to the project's include paths.

```cmake
target_include_directories(
  ${CMAKE_PROJECT_NAME}
  PUBLIC
  ${CMAKE_CURRENT_SOURCE_DIR}
)
```

--------------------------------

### Additional Compiler Options

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Applies specific, additional compiler warnings and options to the library target.

```cmake
target_compile_options(
  ${LIB_TARGET_NAME}
  PRIVATE
  -Wpedantic
  -Wno-gnu-zero-variadic-macro-arguments
  -Wno-dollar-in-identifier-extension
)
```

--------------------------------

### Initial Window Metrics Structure

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/initial-window-metrics.mdx

This object defines the structure for `initialWindowMetrics`, containing the frame and insets of the application window. It is used with `initialMetrics` from `SafeAreaProvider` for layout optimizations.

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

--------------------------------

### SafeAreaProvider Component

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-provider.mdx

This snippet demonstrates the basic usage of SafeAreaProvider by wrapping the root of your application component.

```APIDOC
## SafeAreaProvider

### Description

The `SafeAreaProvider` component should be added to your app's root component to manage safe area insets. It can also be used in the root of modals and routes when integrating with `react-native-screens`.

Avoid placing providers within animated `View` components or `ScrollView`s to prevent frequent updates.

### Props

Accepts all [View](https://reactnative.dev/docs/view) props. Has a default style of `{flex: 1}`.

#### `initialMetrics`

- **Type**: `object` | `null`
- **Optional**
- **Default**: `null`

Can be used to provide the initial value for frame and insets, enabling immediate rendering. Refer to the optimizations documentation for more details on its usage.
```

--------------------------------

### Using SafeAreaInsetsContext with Class Components

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-insets-context.mdx

Demonstrates how to consume the SafeAreaInsetsContext in a React class component to access and utilize safe area insets, such as for adjusting padding.

```APIDOC
## SafeAreaInsetsContext.Consumer

### Description
Allows class components to subscribe to changes in the safe area insets.

### Usage
```tsx
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>
    );
  }
}
```

### Parameters
- `insets` (object) - The current safe area insets object, containing `top`, `bottom`, `left`, and `right` properties.
```

--------------------------------

### useSafeAreaFrame

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/use-safe-area-frame.mdx

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

```APIDOC
## useSafeAreaFrame

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

### Returns
An object with the following properties:
- `x` (number): The x-coordinate of the frame.
- `y` (number): The y-coordinate of the frame.
- `width` (number): The width of the frame.
- `height` (number): The height of the frame.

### Example
```javascript
import { useSafeAreaFrame } from 'react-native-safe-area-context';

function MyComponent() {
  const insets = useSafeAreaFrame();
  return (
    <View style={{ marginTop: insets.top, marginLeft: insets.left, ... }}>
      {/* Your content */}
    </View>
  );
}
```
```

--------------------------------

### Set Initial Metrics for Web SSR

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/optimizations.mdx

To prevent rendering issues on web SSR, use `initialWindowMetrics` to provide insets and frame values. This avoids asynchronous measurement delays.

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

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

--------------------------------

### Use SafeAreaInsetsContext with Class Components

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-insets-context.mdx

Access safe area insets in class components using the `SafeAreaInsetsContext.Consumer`. This allows you to apply padding or margins based on the device's safe area.

```tsx
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>
    );
  }
}
```

--------------------------------

### Using withSafeAreaInsets with a Class Component

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/with-safe-area-insets.mdx

Wrap your class component with `withSafeAreaInsets` to gain access to `insets` prop. This prop provides top, bottom, left, and right safe area insets.

```tsx
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} />;
```

--------------------------------

### Basic SafeAreaView Usage

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-view.mdx

Use SafeAreaView to wrap your content and ensure it respects the device's safe area insets. It applies padding by default.

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

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

--------------------------------

### SafeAreaView with Maximum Edge Mode

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-view.mdx

Use the 'maximum' mode for the `edges` prop to ensure padding is at least the safe area inset or a specified value, useful for floating UI elements.

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

--------------------------------

### Add Library Target

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Defines the shared library target for the safe area context module, including custom and codegen sources.

```cmake
add_library(
  ${LIB_TARGET_NAME}
  SHARED
  ${LIB_CUSTOM_SRCS}
  ${LIB_CODEGEN_SRCS}
)
```

--------------------------------

### SafeAreaView with Margin Mode

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-view.mdx

Apply safe area insets to the margin instead of padding by setting the `mode` prop to 'margin'. This is useful for components like separators.

```tsx
<SafeAreaView mode="margin" style={{ height: 1, backgroundColor: '#eee' }} />
```

--------------------------------

### Compiler Options (Conditional)

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Sets compiler options based on the React Native version. For versions 0.80 and above, it uses a specific React Native function; otherwise, it sets standard C++ compilation flags.

```cmake
if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
  target_compile_reactnative_options(${LIB_TARGET_NAME} PUBLIC)
else()
  target_compile_options(
    ${LIB_TARGET_NAME}
    PRIVATE
    -fexceptions
    -frtti
    -std=c++20
    -Wall
  )
endif()
```

--------------------------------

### Using SafeAreaListener

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-listener.mdx

Listen to safe area inset and frame changes using the onChange prop. This component does not trigger re-renders when changes occur.

```tsx
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>
  );
}
```

--------------------------------

### Add SafeAreaProvider to App Root

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-provider.mdx

Wrap your app's root component with SafeAreaProvider. Ensure it's imported from 'react-native-safe-area-context'.

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

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

--------------------------------

### SafeAreaView Component

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-view.mdx

The SafeAreaView component is a regular View with safe area insets applied. Styles like padding or margin are added to these insets.

```APIDOC
## SafeAreaView

### Description
A regular `View` component that automatically applies safe area insets as padding or margin.

### Props

Accepts all [View](https://reactnative.dev/docs/view) props.

#### `edges`

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

Sets the edges to apply the safe area insets to.

Example:
```tsx
<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 the default mode. Maximum mode will use safe area inset or padding/margin if safe area is less.

Example:
```tsx
<SafeAreaView style={{paddingBottom: 24}} edges={{bottom: 'maximum'}} />
```

#### `mode`

Optional, `padding` (default) or `margin`.

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

Example:
```tsx
<SafeAreaView mode="margin" style={{ height: 1, backgroundColor: '#eee' }} />
```
```

--------------------------------

### Link Libraries (Conditional)

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/android/src/main/jni/CMakeLists.txt

Links the library against necessary dependencies. The specific libraries linked depend on the React Native version, differentiating between merged and older versions.

```cmake
if (REACTNATIVE_MERGED_SO)
  target_link_libraries(
          ${LIB_TARGET_NAME}
          fbjni
          jsi
          reactnative
  )
else()
  target_link_libraries(
          ${LIB_TARGET_NAME}
          fbjni
          folly_runtime
          glog
          jsi
          react_codegen_rncore
          react_debug
          reactnativemodule_core
          react_render_core
          react_render_debug
          react_render_graphics
          react_render_mapbuffer
          react_render_componentregistry
          react_utils
          rrc_view
          turbomodulejsijni
          yoga
  )
endif()
```

--------------------------------

### Configure Jest transformIgnorePatterns

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/testing.mdx

Modify your Jest configuration to include 'react-native-safe-area-context' in 'transformIgnorePatterns'. This allows Babel to parse the module and resolve 'SyntaxError: Cannot use import statement outside a module.'

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

--------------------------------

### Default Jest Mock Metrics

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/testing.mdx

These are the default metrics used by the built-in Jest mock for react-native-safe-area-context. They represent a standard screen size with no safe area insets.

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

--------------------------------

### SafeAreaListener Component

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-listener.mdx

This component listens for changes in safe area insets and frame dimensions. It accepts all props from React Native's View component and provides an `onChange` callback.

```APIDOC
## SafeAreaListener

### Description

A 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. Unlike the hooks, this notifies about changes with the `onChange` prop and doesn't trigger re-renders when the insets or frame change.

### Props

Accepts all [View](https://reactnative.dev/docs/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.

### Example

```tsx
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>
  );
}
```
```

--------------------------------

### SafeAreaView with Specific Edges

Source: https://github.com/appandflow/react-native-safe-area-context/blob/main/docs/docs/api/safe-area-view.mdx

Control which edges of the screen the safe area insets are applied to by providing an array of edge names to the `edges` prop.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.