React Native Edge To Edge

https://github.com/zoontek/react-native-edge-to-edge
Admin
React Native Edge To Edge enables edge-to-edge display on Android apps, allowing content to flow...
Tokens:19,920
Snippets:295
Trust Score:9.5
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run the example application

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Commands to navigate to the example directory, install dependencies, and start the development server.

```bash
cd react-native-edge-to-edge/example
npm install
npm start
```

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

### Install Example App Dependencies

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/CONTRIBUTING.md

Install dependencies for the example app and its iOS native modules.

```bash
cd example
yarn install

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

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

### Start the Development Server

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/CONTRIBUTING.md

Start the React Native development server for the example app.

```bash
yarn start
```

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

### Installation Command

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/00-START-HERE.txt

Command to install the library via npm.

```bash
npm install react-native-edge-to-edge
```

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

### Install react-native-edge-to-edge

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Commands to install the package using common package managers.

```bash
npm install react-native-edge-to-edge
```

```bash
yarn add react-native-edge-to-edge
```

```bash
pnpm add react-native-edge-to-edge
```

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

### Install Project Dependencies

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/CONTRIBUTING.md

Install the project dependencies using yarn v1.

```bash
cd react-native-edge-to-edge
yarn install
```

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

### Install react-native-keyboard-controller

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Install the keyboard management library for better handling of edge-to-edge layouts compared to KeyboardAvoidingView.

```bash
npm install react-native-keyboard-controller
```

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

### Basic SystemBars Setup

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Initializes the SystemBars component within the root application component.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

export default function App() {
  return (
    <>
      <SystemBars style="light" />
      {/* App content */}
    </>
  );
}
```

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

### Basic App Setup with SystemBars

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Apply a consistent system bar style to the entire application by wrapping the root navigator.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./navigation";

export function App() {
  return (
    <>
      <SystemBars style="auto" />
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </>
  );
}
```

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

### Install @zoontek/react-native-navigation-bar

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Install the navigation bar control library for advanced styling on Android.

```bash
npm install @zoontek/react-native-navigation-bar
```

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

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

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Install the safe area management library to handle insets when content flows behind system bars.

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

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

### Configure static Expo configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/configuration.md

Example of applying the plugin within an app.json file.

```json
{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Material3.Dynamic",
            "enforceNavigationBarContrast": true
          }
        }
      ]
    ]
  }
}
```

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

### Configure dynamic Expo configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/configuration.md

Example of applying the plugin within an app.config.ts or app.config.js file.

```typescript
import type { ConfigContext, ExpoConfig } from "expo/config";
import edgeToEdge from "react-native-edge-to-edge/expo";

export default ({ config }: ConfigContext): ExpoConfig => ({
  name: "MyApp",
  slug: "myapp",
  // ... other config
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Material3",
        enforceNavigationBarContrast: false,
      },
    }),
  ],
});
```

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

### Configure Android Parent Theme

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Example of setting the parentTheme property to match the existing Android AppTheme.

```typescript
// If your styles.xml has:
// <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">

edgeToEdge({
  android: {
    parentTheme: "Material3", // Will change parent to Theme.EdgeToEdge.Material3
  },
});
```

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

### Configure Expo Plugin in Different Formats

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Examples for integrating the plugin into Expo projects using TypeScript, JavaScript, or JSON configuration files.

```typescript
import edgeToEdge from "react-native-edge-to-edge/expo";
import type { ConfigContext, ExpoConfig } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  // ... other config
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Material3.Dynamic",
        enforceNavigationBarContrast: false,
      },
    }),
  ],
});
```

```javascript
const edgeToEdge = require("react-native-edge-to-edge/expo").default;

module.exports = {
  // ... other config
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Material3",
        enforceNavigationBarContrast: true,
      },
    }),
  ],
};
```

```json
{
  "expo": {
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Material3",
            "enforceNavigationBarContrast": true
          }
        }
      ]
    ]
  }
}
```

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

### Install react-native-edge-to-edge with npm or yarn

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Use npm or yarn to add the react-native-edge-to-edge package to your project dependencies.

```bash
$ npm i -S react-native-edge-to-edge
# --- or ---
$ yarn add react-native-edge-to-edge
```

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

### Configure Expo Plugin

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Example of using the withEdgeToEdge plugin within an app.config.ts or app.json configuration file.

```typescript
import { withEdgeToEdge } from "react-native-edge-to-edge/expo";
import type { ExpoConfig } from "expo/config";

export default (): ExpoConfig => ({
  name: "MyApp",
  slug: "myapp",
  plugins: [withEdgeToEdge({ android: { parentTheme: "Material3" } })],
});
```

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

### Manage System Bars Manually

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Example of using the SystemBars component to control navigation bar style when contrast enforcement is disabled.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

export function App() {
  return (
    <>
      <SystemBars
        style={{ navigationBar: "light" }}
        hidden={false}
      />
      {/* Your app */}
    </>
  );
}
```

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

### Configure Navigation Bar Contrast

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Example of disabling navigation bar contrast enforcement to allow manual control.

```typescript
edgeToEdge({
  android: {
    enforceNavigationBarContrast: false,
  },
});
```

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

### Demonstrate navigation stack transitions

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Illustrates how the navigation stack handles system bar style transitions when moving between screens.

```text
Navigation.navigate("Home")     → HomeScreen mounts with style="light"
Navigation.navigate("Dark")     → DarkScreen mounts with style="dark"
                                  Light entry still in stack (lower priority)
Navigation.goBack()             → DarkScreen unmounts
                                  Light entry becomes active again
```

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

### Project File Structure

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/INDEX.md

Overview of the documentation directory layout and file contents.

```text
/output/
├── README.md                          # Overview and quick start
├── INDEX.md                           # This file - navigation guide
├── quick-reference.md                 # Cheat sheet (300+ lines)
├── setup-guide.md                     # Installation & init (400+ lines)
├── types.md                           # Type definitions (350+ lines)
├── configuration.md                   # Configuration options (350+ lines)
├── advanced-patterns.md               # Stack & modals (600+ lines)
└── api-reference/
    ├── index.md                       # API overview (350+ lines)
    ├── system-bars.md                 # Component API (350+ lines)
    └── expo-plugin.md                 # Plugin API (350+ lines)
```

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

### Configure system bars using the declarative component

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Recommended approach for screen-level configuration; automatically manages lifecycle and stack integration.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

export function HomeScreen() {
  return (
    <>
      <SystemBars style="light" hidden={false} />
      {/* Screen content */}
    </>
  );
}
```

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

### Clone the Repository

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/CONTRIBUTING.md

Clone your forked repository to your local machine.

```bash
git clone https://github.com/zoontek/react-native-edge-to-edge.git
```

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

### Run Pre-commit Checks

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/CONTRIBUTING.md

Execute pre-commit checks, including formatting, typing, and build checks.

```bash
yarn prepack
```

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

### Basic Library Import and Usage

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/00-START-HERE.txt

Standard import and component usage for the library.

```jsx
import { SystemBars } from "react-native-edge-to-edge"
<SystemBars style="light" />
```

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

### Build for Android

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Commands to create a development build, as the plugin is not supported in Expo Go.

```bash
# Using EAS
eas build --platform android --profile preview

# Or locally
expo prebuild --clean
npx react-native run-android
```

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

### Troubleshooting Style Application

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Verify component mounting and stack state when styles fail to apply.

```typescript
// Ensure component is mounted
if (Platform.OS !== "web") {
  <SystemBars style="light" />
}

// Check stack state (debug)
const entry = SystemBars.pushStackEntry({ style: "light" });
console.log(entry); // See what was pushed

// Ensure theme is correct in android/app/src/main/res/values/styles.xml
// <style name="AppTheme" parent="Theme.EdgeToEdge">
```

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

### Memoize SystemBars styles

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Use useMemo to prevent unnecessary re-renders when passing style objects.

```typescript
const style = useMemo(() => ({
  statusBar: "light",
  navigationBar: "dark",
}), []);
```

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

### View distribution file structure

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Overview of the library's distribution directory layout.

```text
dist/
├── commonjs/
│   ├── index.js                  # Main CJS export
│   └── extras/expo.js            # Expo plugin CJS
├── module/
│   ├── index.js                  # Main ESM export
│   └── extras/expo.js            # Expo plugin ESM
└── typescript/
    ├── commonjs/
    │   └── index.d.ts            # Types for CJS
    └── module/
        └── index.d.ts            # Types for ESM
```

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

### Stack Management Methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Imperative static methods for managing a stack of system bar configurations.

```APIDOC
## SystemBars.pushStackEntry(props)
Adds a new configuration to the top of the stack.

## SystemBars.popStackEntry(entry)
Removes a specific configuration entry from the stack.

## SystemBars.replaceStackEntry(entry, props)
Replaces an existing configuration entry with new props.
```

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

### Manage system bar stack with imperative methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Use pushStackEntry to add a configuration and popStackEntry to remove it, returning an entry reference for later cleanup.

```typescript
const entry = SystemBars.pushStackEntry({ style: "light" });
// ... later
SystemBars.popStackEntry(entry);
```

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

### SystemBars.setHidden

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Directly shows or hides the system bars.

```APIDOC
## SystemBars.setHidden

### Description

Shows or hides the system bars directly. Note that the navigation bar cannot be hidden on iOS.

### Method

`SystemBars.setHidden(hidden: SystemBarsProps["hidden"]): void`

### Parameters

- **hidden** (SystemBarsProps["hidden"]) - Required - A boolean value or an object specifying whether to hide the `statusBar` and/or `navigationBar`.
```

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

### SystemBars.pushStackEntry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Adds configuration to the stack and returns an opaque entry object.

```typescript
const entry: SystemBarsEntry = SystemBars.pushStackEntry(props: SystemBarsProps);
```

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

### Build Development Application

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/configuration.md

Commands to rebuild the application after updating plugin options, as configuration changes are not supported in Expo Go.

```bash
eas build --platform android --profile preview
# or locally
expo prebuild --clean
npx react-native run-android
```

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

### Stack Management Methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/00-START-HERE.txt

Methods for managing system bar styles via a stack-based approach.

```javascript
const entry = SystemBars.pushStackEntry({ style: "light" })
SystemBars.popStackEntry(entry)
SystemBars.replaceStackEntry(entry, { style: "dark" })
```

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

### Import Main Module Exports

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Imports the SystemBars component and associated types from the main package.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import type {
  SystemBarsProps,
  SystemBarsEntry,
  SystemBarStyle,
} from "react-native-edge-to-edge";
```

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

### SystemBars Stack Management

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Use pushStackEntry, popStackEntry, and replaceStackEntry to manage multiple configuration layers where the most recent entry takes precedence.

```typescript
SystemBars.pushStackEntry(props: SystemBarsProps): SystemBarsEntry
```

```typescript
import { SystemBars } from "react-native-edge-to-edge";

const entry = SystemBars.pushStackEntry({
  style: "light",
  hidden: false,
});

// Later, when done:
SystemBars.popStackEntry(entry);
```

```typescript
SystemBars.popStackEntry(entry: SystemBarsEntry): void
```

```typescript
import { SystemBars } from "react-native-edge-to-edge";

const entry = SystemBars.pushStackEntry({ style: "dark" });

// Remove it:
SystemBars.popStackEntry(entry);
```

```typescript
SystemBars.replaceStackEntry(
  entry: SystemBarsEntry,
  props: SystemBarsProps
): SystemBarsEntry
```

```typescript
import { SystemBars } from "react-native-edge-to-edge";

let entry = SystemBars.pushStackEntry({ style: "light" });

// Later, update the entry:
entry = SystemBars.replaceStackEntry(entry, { style: "dark" });
```

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

### SystemBarsProps

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/types.md

Configuration object for defining system bar styles and visibility.

```APIDOC
## SystemBarsProps

### Description
Configuration object passed to the `SystemBars` component and stack methods to manage system bar appearance and visibility.

### Properties
- **style** (SystemBarsProp<SystemBarStyle>) - Optional - Sets the color/appearance of system bar content. Can be a single value or an object with separate `statusBar` and `navigationBar` values. Values: "auto", "inverted", "light", "dark".
- **hidden** (SystemBarsProp<boolean>) - Optional - Controls visibility of system bars. Can be a single boolean or an object with separate `statusBar` and `navigationBar` values. Note: navigation bar cannot be hidden on iOS.

### Usage Example
```typescript
import { SystemBars } from "react-native-edge-to-edge";

<SystemBars
  style={{ statusBar: "dark", navigationBar: "light" }}
  hidden={{ statusBar: false, navigationBar: true }}
/>
```
```

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

### Manage SystemBarsEntry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/types.md

Demonstrates pushing, accessing, and modifying a SystemBarsEntry within the stack.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

// Get an entry from the stack
const entry: SystemBarsEntry = SystemBars.pushStackEntry({
  style: "light",
  hidden: false,
});

// The entry contains the resolved configuration
console.log(entry.statusBarStyle); // "light"
console.log(entry.navigationBarStyle); // "light"
console.log(entry.statusBarHidden); // false
console.log(entry.navigationBarHidden); // false

// Use the entry with other stack methods
SystemBars.replaceStackEntry(entry, { style: "dark" });
SystemBars.popStackEntry(entry);
```

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

### Configure Edge-to-Edge in app.json

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Apply the plugin via the plugins array in the static app.json configuration file.

```json
{
  "expo": {
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Material3"
          }
        }
      ]
    ]
  }
}
```

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

### Direct Style Control Methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Imperative static methods for setting styles and visibility directly without using the stack.

```APIDOC
## SystemBars.setStyle(style)
Sets the style of one or both system bars.

## SystemBars.setHidden(hidden)
Shows or hides one or both system bars.
```

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

### Direct System Bar Methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/00-START-HERE.txt

Imperative methods to set system bar style and visibility directly.

```javascript
SystemBars.setStyle("light")
SystemBars.setHidden(false)
```

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

### Configure SystemBars Style

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Use the style prop to control how system bars respond to system color scheme changes.

```typescript
<SystemBars style="auto" />
```

```typescript
<SystemBars style="inverted" />
```

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

### Implement manual color scheme tracking

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Integrates with useColorScheme to manually toggle system bar styles based on the current theme.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { useColorScheme } from "react-native";

export function ManualScreen() {
  const colorScheme = useColorScheme();

  return (
    <>
      <SystemBars
        style={colorScheme === "dark" ? "light" : "dark"}
      />
    </>
  );
}
```

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

### SystemBars Stack Consistency Best Practices

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Avoid stack inconsistency by ensuring at least one entry is always present in the stack rather than conditionally mounting/unmounting the component.

```typescript
// ❌ DON'T: This causes stack inconsistency
return isDarkMode ? <SystemBars style="dark" /> : null;

// ✅ DO: Always have at least one entry in the stack
return <SystemBars style={isDarkMode ? "dark" : "light"} />;
```

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

### Bare React Native Theme Configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Configures the theme in styles.xml for bare React Native projects.

```xml
<style name="AppTheme" parent="Theme.EdgeToEdge.Material3">
  <!-- Your items -->
  <item name="enforceNavigationBarContrast">false</item>
</style>
```

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

### SystemBars Component Usage

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Demonstrates the usage of the SystemBars component with style and hidden props.

```typescript
<SystemBars
  style="light" | "auto" | { statusBar?: ..., navigationBar?: ... }
  hidden={false} | true | { statusBar?: ..., navigationBar?: ... }
/>
```

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

### Apply uniform system bar configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/types.md

Applies the same style and visibility settings to both the status bar and navigation bar.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

<SystemBars style="light" hidden={false} />
```

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

### SystemBars Component

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

A declarative React component for managing system bar configurations via the component lifecycle.

```APIDOC
## <SystemBars />

### Description
A React functional component that manages system bars by maintaining an internal stack. It pushes configuration on mount, updates on prop changes, and removes on unmount.

### Props
- **SystemBarsProps** (Object) - Configuration for system bars.
```

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

### Responsive SystemBars Style

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Use the 'auto' style to allow the system to automatically adjust based on the current color scheme.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { useColorScheme } from "react-native";

export function DynamicBarsScreen() {
  const colorScheme = useColorScheme();
  
  return (
    <SystemBars
      style="auto"
      hidden={false}
    />
  );
}
```

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

### Manual Configuration for Bare React Native

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

Apply the edge-to-edge theme manually by modifying the styles.xml file in a bare React Native project.

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppTheme" parent="Theme.EdgeToEdge.Material3">
    <!-- Your custom theme items -->
    <item name="android:windowBackground">@color/white</item>
    
    <!-- Optional: remove contrasting navigation bar background -->
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>
```

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

### Apply conditional style changes

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Shows the recommended approach for smooth transitions by updating the style prop rather than mounting/unmounting components.

```typescript
// ✅ Smooth transition
<SystemBars style={isDarkScreen ? "dark" : "light"} />

// ❌ Abrupt (push/pop on each change)
{isDarkScreen && <SystemBars style="dark" />}
{!isDarkScreen && <SystemBars style="light" />}
```

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

### SystemBars.pushStackEntry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Pushes a new SystemBars configuration onto a stack. The returned entry object must be used with `popStackEntry` to remove it.

```APIDOC
## SystemBars.pushStackEntry

### Description

Pushes a `SystemBars` entry onto the stack with the provided properties. The return value is an entry object that should be passed to `popStackEntry` when the configuration is no longer needed.

### Method

`SystemBars.pushStackEntry(props: SystemBarsProps): SystemBarsEntry`

### Parameters

- **props** (SystemBarsProps) - Required - The properties to apply to the new system bars entry.
```

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

### Control system bars directly with imperative methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Directly update bar styles or visibility without affecting the internal stack. Requires importing SystemBars from the library.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

SystemBars.setStyle("dark");
SystemBars.setHidden({ statusBar: false, navigationBar: true });
```

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

### Optimize SystemBars props

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Avoid dynamic object creation in props to improve performance.

```typescript
// ✗ Avoid
<SystemBars style={{ statusBar: "light" }} />

// ✓ Prefer
<SystemBars style="light" />
```

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

### Apply distinct system bar configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/types.md

Configures the status bar and navigation bar independently using an object structure.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

<SystemBars
  style={{ statusBar: "dark", navigationBar: "light" }}
  hidden={{ statusBar: false, navigationBar: true }}
/>
```

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

### Direct Method One-Off Changes

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Imperatively sets system bar styles and visibility.

```typescript
SystemBars.setStyle("light");
SystemBars.setHidden(false);
```

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

### SystemBars.popStackEntry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Removes an existing configuration entry from the stack and updates the native system bars to the next available configuration.

```APIDOC
## SystemBars.popStackEntry

### Description
Remove an existing SystemBars stack entry. After removal, the native system bars are updated with the configuration from the next entry in the stack (if any).

### Signature
`SystemBars.popStackEntry(entry: SystemBarsEntry): void`

### Parameters
- **entry** (SystemBarsEntry) - Required - Entry returned from pushStackEntry
```

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

### Integrate SystemBars with React Navigation Modals

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Utilize the stack mechanism to automatically manage system bar styles during modal transitions.

```typescript
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SystemBars } from "react-native-edge-to-edge";

const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
    <>
      <SystemBars style="light" />
      {/* Home content */}
    </>
  );
}

function ModalScreen() {
  return (
    <>
      <SystemBars style="dark" />
      {/* Modal content */}
    </>
  );
}

export function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Group screenOptions={{ presentation: "modal" }}>
        <Stack.Screen name="Details" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}
```

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

### Import core module components and types

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/README.md

Import the SystemBars component and associated type definitions for use in React components.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import type { SystemBarsProps, SystemBarsEntry, SystemBarStyle } from "react-native-edge-to-edge";
```

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

### Configure Expo Plugin Options

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Define the Android parent theme and navigation bar contrast settings within the Expo plugin configuration.

```typescript
interface PluginConfig {
  android?: {
    parentTheme?: 
      | "Default"
      | "Material2"
      | "Material3"
      | "Material3.Dynamic"
      | "Material3Expressive"
      | "Material3Expressive.Dynamic"
      | "Light"
      | "Material2.Light"
      | "Material3.Light"
      | "Material3.Dynamic.Light"
      | "Material3Expressive.Light"
      | "Material3Expressive.Dynamic.Light";
    enforceNavigationBarContrast?: boolean;
  };
}
```

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

### Configure Android Theme for Bare React Native

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/configuration.md

Manually update the AppTheme in styles.xml to inherit from an edge-to-edge parent theme.

```xml
<resources>
  <style name="AppTheme" parent="Theme.EdgeToEdge">
    <!-- Your custom theme items -->
    <item name="android:windowBackground">@color/white</item>
    
    <!-- Optional: enforce full navigation bar transparency -->
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>
```

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

### Programmatic Stack Control

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Manage system bar states dynamically using pushStackEntry and popStackEntry for complex navigation scenarios.

```typescript
import { useEffect, useState } from "react";
import { SystemBars } from "react-native-edge-to-edge";

export function DynamicScreen() {
  const [showHeader, setShowHeader] = useState(true);
  const [entry, setEntry] = useState(null);

  useEffect(() => {
    const newEntry = SystemBars.pushStackEntry({
      style: showHeader ? "light" : undefined,
      hidden: !showHeader,
    });
    setEntry(newEntry);

    return () => {
      if (newEntry) {
        SystemBars.popStackEntry(newEntry);
      }
    };
  }, [showHeader]);

  return (
    <View>
      {/* Screen content */}
    </View>
  );
}
```

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

### SystemBars.setStyle

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Directly sets the style for the system bars.

```APIDOC
## SystemBars.setStyle

### Description

Sets the style of the system bars directly. This method applies the specified style to both the status bar and navigation bar if applicable.

### Method

`SystemBars.setStyle(style: SystemBarsProps["style"]): void`

### Parameters

- **style** (SystemBarsProps["style"]) - Required - The desired style for the system bars. Can be 'auto', 'inverted', 'light', or 'dark', or an object specifying styles for `statusBar` and `navigationBar` individually.
```

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

### Ensuring Prop Stability with useMemo

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Use static or memoized props to prevent unnecessary re-renders of the SystemBars component.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

// ✅ Good: Static props
<SystemBars style="light" hidden={false} />

// ✅ Also good: Memoized props
const props = useMemo(() => ({ style: "light" }), []);
<SystemBars {...props} />

// ⚠️ Avoid: Dynamic object creation
<SystemBars style={{ statusBar: "light" }} />
// This causes unnecessary re-renders; instead:
<SystemBars style={condition ? "light" : undefined} />
```

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

### Implement Safe Area Insets

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Use the useSafeAreaInsets hook to adjust component padding for content behind the status bar.

```typescript
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { View } from "react-native";

export function Screen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      {/* Content is now below the status bar */}
    </View>
  );
}
```

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

### Manual SystemBars Handling for Built-in Modals

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Requires manual placement of SystemBars inside the Modal component and setting translucency props to true.

```typescript
import { Modal, View } from "react-native";
import { SystemBars } from "react-native-edge-to-edge";
import { useState } from "react";

export function Screen() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <SystemBars style="light" />
      <View>
        <Modal
          visible={modalVisible}
          transparent
          statusBarTranslucent={true}
          navigationBarTranslucent={true}
        >
          <SystemBars style="dark" />
          {/* Modal content */}
        </Modal>
      </View>
    </>
  );
}
```

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

### Apply Direct System Bar Changes

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Use direct methods for one-off changes. Note that these do not interact with the stack and may cause conflicts if mixed with component-based methods.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

// Set both bars at once
SystemBars.setStyle("light");

// Set individual bars
SystemBars.setStyle({ statusBar: "light", navigationBar: "dark" });

// Hide only navigation bar
SystemBars.setHidden({ navigationBar: true });

// Show both bars
SystemBars.setHidden(false);
```

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

### Unit Testing SystemBars Stack Methods

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Use these tests to verify stack entry lifecycle management including pushing, popping, and replacing entries.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

describe("SystemBars stack", () => {
  test("pushStackEntry adds entry to stack", () => {
    const entry = SystemBars.pushStackEntry({ style: "light" });
    expect(entry).toBeDefined();
    expect(entry.statusBarStyle).toBe("light");
  });

  test("popStackEntry removes entry", () => {
    const entry = SystemBars.pushStackEntry({ style: "light" });
    SystemBars.popStackEntry(entry);
    // Stack is now empty (or has remaining entries)
  });

  test("replaceStackEntry updates entry", () => {
    const entry1 = SystemBars.pushStackEntry({ style: "light" });
    const entry2 = SystemBars.replaceStackEntry(entry1, { style: "dark" });
    expect(entry2).toBeDefined();
    expect(entry2.statusBarStyle).toBe("dark");
  });
});
```

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

### SystemBarsEntry Type

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Opaque entry object returned by stack methods. Do not construct manually.

```typescript
type SystemBarsEntry = {
  statusBarStyle: SystemBarStyle | undefined;
  navigationBarStyle: SystemBarStyle | undefined;
  statusBarHidden: boolean | undefined;
  navigationBarHidden: boolean | undefined;
};
```

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

### Automatic Stack Handling with SystemBars

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

The SystemBars component automatically manages stack entries by pushing on mount, replacing on prop changes, and popping on unmount.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { useEffect } from "react";

export function MyScreen() {
  return (
    <>
      <SystemBars style="light" hidden={false} />
      {/* Component automatically:
          1. Pushes on mount
          2. Replaces on prop change
          3. Pops on unmount */}
    </>
  );
}
```

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

### Imperative SystemBars Control

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Use setStyle and setHidden to bypass the stack mechanism and apply changes immediately.

```typescript
SystemBars.setStyle(
  style: SystemBarStyle | { statusBar?: SystemBarStyle; navigationBar?: SystemBarStyle } | undefined
): void
```

```typescript
import { SystemBars } from "react-native-edge-to-edge";

// Set both bars to light style
SystemBars.setStyle("light");

// Set different styles for each bar
SystemBars.setStyle({
  statusBar: "dark",
  navigationBar: "light",
});
```

```typescript
SystemBars.setHidden(
  hidden: boolean | { statusBar?: boolean; navigationBar?: boolean } | undefined
): void
```

```typescript
import { SystemBars } from "react-native-edge-to-edge";

// Hide both bars
SystemBars.setHidden(true);

// Hide only the status bar
SystemBars.setHidden({ statusBar: true, navigationBar: false });

// Show both bars
SystemBars.setHidden(false);
```

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

### Enforce Navigation Bar Transparency

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Add the navigation bar contrast item to the AppTheme to enable full transparency.

```xml
<resources>
  <style name="AppTheme" parent="Theme.EdgeToEdge">
    <!-- Your theme items -->
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>
```

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

### Expo Plugin

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Configuration plugin for Expo projects to enable edge-to-edge functionality.

```APIDOC
## Expo Plugin

### Description
Provides configuration functions for app.config to enable edge-to-edge support in Expo projects.

### Exports
- **default** (Function) - Returns a tuple (name, config) for app.config.
- **withEdgeToEdge** (ConfigPlugin) - A wrapped plugin function for Expo configuration.
```

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

### Implement basic edge-to-edge styling

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/README.md

Use the SystemBars component to apply light or dark styling to the system bars. Requires React Native 0.60+ and React 16.8+.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { View } from "react-native";

export default function App() {
  return (
    <>
      <SystemBars style="light" />
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </>
  );
}
```

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

### SystemBars.replaceStackEntry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Replaces an existing SystemBars stack entry with new properties. Returns the updated entry object.

```APIDOC
## SystemBars.replaceStackEntry

### Description

Replaces an existing `SystemBars` stack entry with new properties. This is useful for updating the configuration of an active entry. The function returns the updated entry object.

### Method

`SystemBars.replaceStackEntry(entry: SystemBarsEntry, props: SystemBarsProps): SystemBarsEntry`

### Parameters

- **entry** (SystemBarsEntry) - Required - The entry object representing the stack entry to replace.
- **props** (SystemBarsProps) - Required - The new properties to apply to the system bars entry.
```

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

### SystemBars.setHidden

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Performs a direct visibility change that bypasses the stack.

```typescript
SystemBars.setHidden(
  hidden: boolean | { statusBar?, navigationBar? } | undefined
): void;
```

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

### Push SystemBars Stack Entry

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Push a SystemBars entry onto the stack to manage system bar properties. The returned entry must be passed to popStackEntry when complete.

```typescript
const entry: SystemBarsEntry = SystemBars.pushStackEntry(
  props /*: SystemBarsProps */,
);
```

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

### SystemBarStyle Type

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Defines the available styles for system bars.

```typescript
type SystemBarStyle = "auto" | "inverted" | "light" | "dark";
```

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

### Define SystemBarsProps types

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/types.md

Core type definitions for SystemBars configuration.

```typescript
type SystemBarsProps = {
  style?: SystemBarsProp<SystemBarStyle>;
  hidden?: SystemBarsProp<boolean>;
};
```

```typescript
type SystemBarsProp<T> = T | { statusBar?: T; navigationBar?: T };
```

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

### Import Expo plugin

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/README.md

Import the default export from the expo module to configure the Android theme at build time.

```typescript
import edgeToEdge from "react-native-edge-to-edge/expo";
```

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

### Managing Nested SystemBars

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Multiple SystemBars components cooperate via a stack, allowing inner components to override styles temporarily while outer styles restore automatically upon unmounting.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { Modal, View } from "react-native";
import { useState } from "react";

export function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <SystemBars style="light" />
      <View>
        <Modal visible={modalVisible}>
          <SystemBars style="dark" />
          {/* Dark style active while modal is open */}
          {/* Light style auto-restores when modal closes */}
        </Modal>
      </View>
    </>
  );
}
```

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

### Managing SystemBars precedence with nested components

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Demonstrates how a modal's SystemBars component overrides the parent component's style while the modal is active.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { View } from "react-native";

function DeepScreen() {
  return (
    <>
      <SystemBars style="light" />
      <View>
        <Modal>
          <SystemBars style="dark" />
          {/* This modal's SystemBars takes precedence */}
        </Modal>
      </View>
    </>
  );
}
```

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

### Screen-Specific Styles

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Applies different system bar styles per screen component.

```typescript
function HomeScreen() {
  return (
    <>
      <SystemBars style="light" />
      {/* Home content */}
    </>
  );
}

function DarkScreen() {
  return (
    <>
      <SystemBars style="dark" />
      {/* Dark content */}
    </>
  );
}
```

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

### Configure Expo Plugin

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Add the edge-to-edge plugin to your Expo configuration file.

```typescript
import edgeToEdge from "react-native-edge-to-edge/expo";
import type { ConfigContext, ExpoConfig } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  name: "MyApp",
  slug: "myapp",
  version: "1.0.0",
  // ... other config
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Default",
        enforceNavigationBarContrast: true,
      },
    }),
  ],
});
```

```javascript
const edgeToEdge = require("react-native-edge-to-edge/expo");

module.exports = {
  name: "MyApp",
  slug: "myapp",
  plugins: [
    edgeToEdge({
      android: {
        parentTheme: "Default",
      },
    }),
  ],
};
```

```json
{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Default"
          }
        }
      ]
    ]
  }
}
```

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

### Immersive Mode Configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/index.md

Hide both the status bar and navigation bar to enable full-screen experiences.

```typescript
import { SystemBars } from "react-native-edge-to-edge";

export function FullScreenVideo() {
  return (
    <>
      <SystemBars hidden={{ statusBar: true, navigationBar: true }} />
      {/* Video player */}
    </>
  );
}
```

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

### Check and Control Edge-to-Edge Settings in a Library

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/react-native-is-edge-to-edge/README.md

Use `isEdgeToEdge()` to determine if the library is active. Conditionally apply `statusBarTranslucent` and `navigationBarTranslucent` props. The `controlEdgeToEdgeValues` function can be used in development to warn about redundant settings.

```tsx
import {
  controlEdgeToEdgeValues,
  isEdgeToEdge,
  isEdgeToEdgeFromLibrary,
  isEdgeToEdgeFromProperty,
} from "react-native-is-edge-to-edge";

const EDGE_TO_EDGE = isEdgeToEdge();

function MyAwesomeLibraryComponent({
  statusBarTranslucent,
  navigationBarTranslucent,
}) {
  if (__DEV__) {
    // warn the user once about unnecessary defined values
    controlEdgeToEdgeValues({
      statusBarTranslucent,
      navigationBarTranslucent,
    });
  }

  return (
    <MyAwesomeLibraryNativeComponent
      statusBarTranslucent={EDGE_TO_EDGE || statusBarTranslucent}
      navigationBarTranslucent={EDGE_TO_EDGE || navigationBarTranslucent}
      // …
    />
  );
}
```

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

### Identify Current Android Theme

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/setup-guide.md

Locate the existing parent theme in the Android styles configuration file.

```xml
<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Your theme items -->
  </style>
</resources>
```

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

### Batching System Bar Updates

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Updates to the native module are batched within a single frame using setImmediate.

```typescript
// These three calls batch into a single native update
SystemBars.setStyle("light");
SystemBars.setHidden(false);
SystemBars.pushStackEntry({ ... });
```

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

### Basic SystemBars Component Usage

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Use the SystemBars component to set a global style for system bars within your application layout.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { View } from "react-native";

export function App() {
  return (
    <>
      <SystemBars style="light" />
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </>
  );
}
```

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

### Expo Plugin Configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/00-START-HERE.txt

Configuration for the Expo plugin within app.config.ts.

```typescript
edgeToEdge({ android: { parentTheme: "Material3" } })
```

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

### Integrate SystemBars with Expo Router Modals

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Apply SystemBars within individual route files to control styling per screen.

```typescript
// app/(home)/index.tsx
import { SystemBars } from "react-native-edge-to-edge";

export default function HomeScreen() {
  return (
    <>
      <SystemBars style="light" />
      {/* Home content */}
    </>
  );
}

// app/(home)/modal.tsx
import { SystemBars } from "react-native-edge-to-edge";

export default function ModalScreen() {
  return (
    <>
      <SystemBars style="dark" />
      {/* Modal content */}
    </>
  );
}
```

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

### Set SystemBars Style

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Directly set the system bars style globally. This method is useful for immediate style changes.

```typescript
SystemBars.setStyle(style /*: SystemBarsProps["style"] */);
```

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

### withEdgeToEdge

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/expo-plugin.md

A ConfigPlugin that enables edge-to-edge support in an Expo project. It should be added to the plugins array in your app.json or app.config.js.

```APIDOC
## withEdgeToEdge

### Description
A wrapped version of the plugin created with `createRunOncePlugin`, ensuring it runs only once per build. This function is used to configure edge-to-edge settings for Android within an Expo project.

### Signature
`const withEdgeToEdge: ConfigPlugin<EdgeToEdgePluginConfig | undefined>`

### Configuration Object (EdgeToEdgePluginConfig)
- **android** (object) - Optional - Android-specific configuration.
  - **parentTheme** (string) - Optional - Specifies the base theme to inherit from. Defaults to "Default".
  - **enforceNavigationBarContrast** (boolean) - Optional - Controls whether the navigation bar has a contrasting background. Defaults to true.

### Usage Example
```typescript
import { withEdgeToEdge } from "react-native-edge-to-edge/expo";
import type { ExpoConfig } from "expo/config";

export default (): ExpoConfig => ({
  name: "MyApp",
  slug: "myapp",
  plugins: [withEdgeToEdge({ android: { parentTheme: "Material3" } })],
});
```
```

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

### Bare React Native Android Styles Configuration

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Update your `styles.xml` file in a bare React Native project to inherit from an edge-to-edge theme and optionally disable navigation bar contrast.

```xml
<resources>
  <!-- update your AppTheme parent (see the "Pick a parent theme" section) -->
  <style name="AppTheme" parent="Theme.EdgeToEdge">
    <!-- … -->
    <!-- disable the contrasting background of the navigation bar (optional) -->
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>
```

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

### Expo Static Configuration (app.json)

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/README.md

Configure the react-native-edge-to-edge plugin in your Expo app's static configuration file. Requires a development build.

```json
{
  "expo": {
    // …
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Default",
            "enforceNavigationBarContrast": false,
          },
        },
      ],
    ],
  },
}
```

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

### Dynamic System Bar Styling

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Various methods for controlling system bar appearance based on color schemes or specific bar requirements.

```typescript
<SystemBars style="auto" />
```

```typescript
<SystemBars style={{ statusBar: "dark", navigationBar: "light" }} />
```

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

### Stack-Based System Bar Control

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/quick-reference.md

Manages system bar styles using a stack entry system for complex navigation flows.

```typescript
const entry = SystemBars.pushStackEntry({ style: "light" });

// Later:
SystemBars.replaceStackEntry(entry, { style: "dark" });

// Finally:
SystemBars.popStackEntry(entry);
```

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

### Define SystemBarsProp Utility Type

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/api-reference/system-bars.md

Defines the generic utility type used to support both single-value and split-bar configurations.

```typescript
type SystemBarsProp<T> = T | { statusBar?: T; navigationBar?: T };
```

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

### Conditional Rendering of SystemBars

Source: https://github.com/zoontek/react-native-edge-to-edge/blob/main/_autodocs/advanced-patterns.md

Conditionally render SystemBars to apply different styles based on application state, ensuring the stack remains consistent.

```typescript
import { SystemBars } from "react-native-edge-to-edge";
import { useRoute } from "@react-navigation/native";

export function Screen() {
  const route = useRoute();
  const isDarkMode = route.params?.darkMode ?? false;

  return (
    <>
      {isDarkMode ? (
        <SystemBars style="dark" />
      ) : (
        <SystemBars style="light" />
      )}
      {/* The appropriate SystemBars is pushed/popped automatically */}
    </>
  );
}
```
Tokens:
Raw