### Install Dependencies for Android Development

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/CONTRIBUTING.md

Installs project dependencies and submodules, then sets up the Fabric example app for Android development.

```bash
yarn
yarn submodules
cd FabricExample
yarn
yarn start
```

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

### Install Project Dependencies

Source: https://github.com/software-mansion/react-native-screens/blob/main/FabricExample/README.md

Run this command in the project's root directory to install all project dependencies.

```bash
yarn install
```

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

### Install Dependencies for iOS Development

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/CONTRIBUTING.md

Installs project dependencies, submodules, and Ruby gems, then sets up the Fabric example app for iOS development.

```bash
yarn
yarn submodules
cd FabricExample
yarn
rbenv exec bundle install
(cd ios && rbenv exec bundle exec pod install && cd ../)
yarn start
```

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

### Install iOS CocoaPods Dependencies

Source: https://github.com/software-mansion/react-native-screens/blob/main/FabricExample/README.md

Navigate to the FabricExample/ios subdirectory and run this command to install CocoaPods dependencies.

```bash
rbenv exec bundle exec pod install
```

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

### Configure Header Items

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Example configuration for headerRightItems including buttons, menus, badges, and styling variants.

```typescript
  <Stack.Screen
    options={{
      headerRightItems: [
        {
          type: 'button',
          label: 'Text button',
          onPress: () => Alert.alert('Text pressed'),
        },
        {
          type: 'button',
          image: require('../../assets/search_black.png'),
          onPress: () => Alert.alert('Icon pressed'),
        },
        {
          type: 'button',
          sfSymbolName: "square.and.arrow.up",
          onPress: () => Alert.alert('SF symbol pressed'),
        },
        {
          type: 'menu',
          label: 'Menu',
          menu: {
            items: [
              {
                label: 'Option 1',
                type: "action",
                onPress: () => Alert.alert('Option 1 pressed'),
              },
              {
                label: 'Option 2',
                type: "action",
                onPress: () => Alert.alert('Option 2 pressed'),
              },
            ],
          },
        },
        {
          type: 'button',
          label: 'Badge',
          badge: {
            value: '3',
            color: 'white',
            backgroundColor: 'red',
          },
          onPress: () => Alert.alert('Badge pressed'),
        },
        {
          type: 'button',
          label: 'Prominent',
          variant: 'prominent',
          tintColor: 'green',
          onPress: () => Alert.alert('Prominent pressed'),
        },
      ],
    }}
  />
```

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

### Install react-native-screens with npm

Source: https://github.com/software-mansion/react-native-screens/blob/main/windows/README.md

Use this command to install the react-native-screens package. It is recommended for React Native for Windows versions 0.63 and later when using autolinking.

```bash
npm i react-native-screens --save
```

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

### Install react-native-screens for Bare React Native Project

Source: https://github.com/software-mansion/react-native-screens/blob/main/README.md

Use this command to add react-native-screens to a bare React Native project.

```bash
yarn add react-native-screens
```

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

### Install react-native-windows for module development

Source: https://github.com/software-mansion/react-native-screens/blob/main/windows/README.md

Temporarily install the react-native-windows package to match the version used by the module. Ensure versions of react-native-windows and react-native are compatible, e.g., react-native@0.62 requires react-native-windows@^0.62.

```bash
npm i react-native-windows@^0.62 --dev
```

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

### Install react-native-screens for Expo Managed Workflow

Source: https://github.com/software-mansion/react-native-screens/blob/main/README.md

Use this command to add react-native-screens when using the Expo managed workflow.

```bash
npx expo install react-native-screens
```

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

### Implement ScreenContainer and Screen components

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Example of nesting Screen components within a ScreenContainer to manage view attachment states.

```js
<ScreenContainer>
  <Screen>{tab1}</Screen>
  <Screen activityState={2}>{tab2}</Screen>
  <Screen>{tab3}</Screen>
</ScreenContainer>
```

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

### Setup ReanimatedScreenProvider for Reanimated Transitions

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Wrap your app with ReanimatedScreenProvider to enable the use of react-native-reanimated version 2.x with screen transitions.

```jsx
import { ReanimatedScreenProvider } from 'react-native-screens/reanimated';

export default function App() {
  return (
    <ReanimatedScreenProvider>
      <YourApp />
    </ReanimatedScreenProvider>
  );
}
```

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

### Run iOS Application

Source: https://github.com/software-mansion/react-native-screens/blob/main/FabricExample/README.md

Execute this command in the FabricExample directory to build and run the iOS application.

```bash
yarn ios
```

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

### Run Android Application

Source: https://github.com/software-mansion/react-native-screens/blob/main/FabricExample/README.md

Execute this command to build and run the Android application.

```bash
yarn android
```

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

### Generate Codegen Artifacts for Android

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/CONTRIBUTING.md

Manually triggers the generation of codegen artifacts from the schema for the Android Fabric example.

```bash
./gradlew generateCodegenArtifactsFromSchema
```

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

### Screen Animation and Orientation

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Configuration for screen replacement animations and orientation settings.

```APIDOC
## `replaceAnimation`

### Description
Allows for the customization of the type of animation to use when this screen replaces another screen at the top of the stack.

### Method
Not applicable (this is a prop)

### Endpoint
Not applicable (this is a prop)

### Parameters
#### Query Parameters
- **replaceAnimation** (string) - Required - The type of animation to use. Supported values: `push`, `pop`.

### Request Example
```json
{
  "replaceAnimation": "push"
}
```

## `screenOrientation`

### Description
Sets the current screen's available orientations and forces rotation if current orientation is not included.

### Method
Not applicable (this is a prop)

### Endpoint
Not applicable (this is a prop)

### Parameters
#### Query Parameters
- **screenOrientation** (string) - Required - Possible values: `default`, `all`, `portrait`, `portrait_up`, `portrait_down`, `landscape`, `landscape_left`, `landscape_right`.

### Request Example
```json
{
  "screenOrientation": "portrait"
}
```

### Response
#### Success Response (200)
- **None** (N/A) - This prop does not return a value.

```

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

### Register RNScreens Package Provider in App.cpp

Source: https://github.com/software-mansion/react-native-screens/blob/main/windows/README.md

Register the RNScreens ReactPackageProvider in your App.cpp file. This step is crucial for the manual installation of react-native-screens on older React Native for Windows versions.

```c++
PackageProviders().Append(winrt::RNScreens::ReactPackageProvider());
```

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

### Include RNScreens header in pch.h

Source: https://github.com/software-mansion/react-native-screens/blob/main/windows/README.md

Include the RNScreens header file in your project's pch.h file for manual linking. This is part of the manual installation process for older React Native for Windows versions.

```c++
#include "winrt/RNScreens.h"
```

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

### Screen Configuration Props

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Configuration props for managing screen behavior, gestures, and navigation bar appearance.

```APIDOC
## Screen Configuration Props

### Description
Properties used to configure screen-specific behaviors such as swipe gestures, navigation bar visibility, and scroll edge effects.

### Parameters
- **fullScreenSwipeShadowEnabled** (boolean) - iOS only - Whether the full screen dismiss gesture has a shadow. Defaults to true.
- **gestureEnabled** (boolean) - iOS only - Whether the back swipe gesture is enabled. Defaults to true.
- **gestureResponseDistance** (object) - iOS only - Restricts the distance from screen edges for gesture recognition. Keys: start, end, top, bottom.
- **hideKeyboardOnSwipe** (boolean) - iOS only - Whether to hide the keyboard on swipe. Defaults to false.
- **homeIndicatorHidden** (boolean) - iOS only - Whether to hide the home indicator. Defaults to false.
- **nativeBackButtonDismissalEnabled** (boolean) - Android only - Whether back button pop action is handled natively or on JS side. Defaults to false.
- **scrollEdgeEffects** (object) - iOS >= 26 - Configures scroll edge effects (automatic, hard, soft, hidden) for the content ScrollView.
- **navigationBarHidden** (boolean) - Android only - Sets navigation bar visibility. Defaults to false.
- **preventNativeDismiss** (boolean) - iOS only - Whether to prevent screen dismissal. Defaults to false.
```

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

### Build the Library

Source: https://github.com/software-mansion/react-native-screens/blob/main/AGENTS.md

This command builds the react-native-screens library using 'react-native-builder-bob'. It generates CommonJS, ES module, and TypeScript declaration files.

```bash
yarn prepare
```

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

### Screen Configuration Props

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Configuration properties for controlling screen appearance, presentation, and status bar behavior.

```APIDOC
## Screen Configuration Props

### stackAnimation
Allows for the customization of how the given screen should appear/disappear when pushed or popped at the top of the stack.

- **Values**:
  - `default`: Platform default animation
  - `fade`: Fades screen in or out
  - `fade_from_bottom`: Fade from bottom animation
  - `flip`: Flips the screen (requires `stackPresentation: "modal"`, iOS only)
  - `simple_push`: Default animation without native header transition (iOS only)
  - `slide_from_bottom`: Slide in from bottom to top
  - `slide_from_right`: Slide in from right to left (Android only)
  - `slide_from_left`: Slide in from left to right
  - `ios_from_right`: iOS-like slide in from right to left (Android only)
  - `ios_from_left`: iOS-like slide in from left to right (Android only)
  - `none`: No animation

### stackPresentation
Defines the method used to present the given screen.

- **Values**:
  - `push`, `modal`, `transparentModal`, `containedModal`, `containedTransparentModal`, `fullScreenModal`, `formSheet`, `pageSheet`

### statusBarAnimation
Sets the status bar animation. Requires `View controller-based status bar appearance` enabled in Info.plist.

- **Values**:
  - `fade` (Default on iOS)
  - `none` (Default on Android)
  - `slide`
```

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

### Screen Configuration Props

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Configuration props for controlling status bar appearance, swipe directions, and transition durations.

```APIDOC
## Screen Configuration Props

### statusBarColor (Android only)
- **Type**: string (Deprecated)
- **Description**: Sets the status bar color. Deprecated due to edge-to-edge enforcement in Android SDK 35.

### statusBarHidden
- **Type**: boolean
- **Description**: When true, hides the status bar. Defaults to false.

### statusBarStyle
- **Type**: string
- **Description**: Sets the status bar color style. Values: 'auto', 'inverted', 'light', 'dark'. Defaults to 'auto'.

### statusBarTranslucent (Android only)
- **Type**: boolean (Deprecated)
- **Description**: Sets translucency of the status bar. Deprecated due to edge-to-edge enforcement in Android SDK 35.

### swipeDirection (iOS only)
- **Type**: string
- **Description**: Sets swipe direction to dismiss screen. Values: 'vertical', 'horizontal' (default).

### transitionDuration (iOS only)
- **Type**: number
- **Description**: Changes duration of transitions in milliseconds. Defaults to 500.
```

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

### Screen Configuration Props

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Configuration props for ScreenStackItem including unstable features, content styling, and header configuration.

```APIDOC
## Screen Configuration Props

### Description
Configuration options available for screen components within a stack.

### Parameters
- **unstable_sheetFooter** (Component) - Optional - Footer component for form sheet stack presentation (Android only).
- **contentStyle** (Object) - Optional - Style object applied to the view wrapping the screen content.
- **headerConfig** (Object) - Optional - Configuration object for the native navigation header, replacing the ScreenStackHeaderConfig component.
```

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

### Add Library with Source Files

Source: https://github.com/software-mansion/react-native-screens/blob/main/android/src/main/jni/CMakeLists.txt

Defines a shared library named 'react_codegen_rnscreens' using custom C++ source files and generated code files. The source files are discovered using file globbing.

```cmake
file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_COMPONENTS_DIR}/*.cpp ${LIB_COMMON_COMPONENTS_DIR}/utils/*.cpp)
file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)

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

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

### Add RNScreens.vcxproj to Visual Studio Solution

Source: https://github.com/software-mansion/react-native-screens/blob/main/windows/README.md

Manually link the RNScreens module by adding its .vcxproj file to your Visual Studio solution. This is for React Native for Windows versions 0.62 and earlier.

```bash
node_modules\react-native-screens\windows\RNScreens\RNScreens.vcxproj
```

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

### Header Menu Configuration

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Defines the structure for adding a menu to a header button, supporting nested submenus and various action states.

```APIDOC
## Header Menu Configuration

### Description
Defines the structure for a menu item within the header, supporting actions and nested submenus.

### Request Body
- **type** (string) - Required - Must be 'menu'.
- **label** (string) - Optional - The display label for the menu.
- **changesSelectionAsPrimaryAction** (boolean) - Optional - Whether selection changes as a primary action (iOS 15+).
- **items** (Array) - Required - List of menu items, which can be 'action' or 'submenu' types.
```

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

### Component: <ScreenStack />

Source: https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md

Renders children in a platform-native stack container (UINavigationController on iOS, Fragment on Android).

```APIDOC
## <ScreenStack />

### Description
Manages a stack of screens. The last child is rendered as active, and activityState is ignored for children.
```