### Clone and Install React Native

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/README.md

Clone the React Native repository and install its dependencies to get started.

```sh
git clone https://github.com/facebook/react-native.git
cd react-native
yarn install
```

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

### Install @react-native/babel-preset with npm

Source: https://github.com/react/react-native/blob/main/packages/react-native-babel-preset/README.md

Install the preset as a development dependency using npm.

```sh
npm i @react-native/babel-preset --save-dev
```

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

### Install @react-native/babel-preset with yarn

Source: https://github.com/react/react-native/blob/main/packages/react-native-babel-preset/README.md

Install the preset as a development dependency using yarn.

```sh
yarn add -D @react-native/babel-preset
```

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

### start

Source: https://github.com/react/react-native/blob/main/packages/community-cli-plugin/README.md

Starts the React Native development server. This command is used to initiate the development environment for building React Native applications.

```APIDOC
## start

### Description
Starts the React Native development server.

### Usage
```sh
npx @react-native-community/cli start [options]
```

### Options
#### Query Parameters
- `--port` (number) - Optional - Set the server port.
- `--host` (string) - Optional - Set the server host.
- `--projectRoot` (path) - Optional - Set the path to the project root.
- `--watchFolders` (list) - Optional - Specify additional folders to be added to the watch list.
- `--assetPlugins` (list) - Optional - Specify additional asset plugins.
- `--sourceExts` (list) - Optional - Specify additional source extensions to bundle.
- `--max-workers` (number) - Optional - Set the maximum number of workers the worker-pool will spawn for transforming files. Defaults to the number of the cores available on your machine.
- `--transformer` (string) - Optional - Specify a custom transformer.
- `--reset-cache` - Optional - Remove cached files.
- `--custom-log-reporter-path` (string) - Optional - Specify a module path exporting a replacement for `TerminalReporter`.
- `--https` - Optional - Enable HTTPS connections.
- `--key` (path) - Optional - Specify path to a custom SSL key.
- `--cert` (path) - Optional - Specify path to a custom SSL cert.
- `--config` (string) - Optional - Path to the CLI configuration file.
- `--no-interactive` - Optional - Disable interactive mode.
- `--client-logs` - Optional - [Deprecated] Enable plain text JavaScript log streaming for all connected apps.
```

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

### Package Build Configuration Example

Source: https://github.com/react/react-native/blob/main/scripts/build/README.md

An example of how to configure a package for the build system, including options like emitting TypeScript definitions and specifying the target environment.

```js
const buildConfig /*: BuildConfig */ = {
  'packages': {
    'dev-middleware': {
      emitTypeScriptDefs: true,
      target: 'node',
    },
    ...

```

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

### Install @react-native/js-polyfills

Source: https://github.com/react/react-native/blob/main/packages/polyfills/README.md

Install the package using Yarn. Alternatively, npm commands can be used.

```bash
yarn add @react-native/js-polyfills
```

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

### Install @react-native/gradle-plugin

Source: https://github.com/react/react-native/blob/main/packages/gradle-plugin/README.md

Install the plugin using yarn. npm commands can be used as an alternative.

```bash
yarn add @react-native/gradle-plugin
```

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

### Install @react-native/eslint-plugin-specs

Source: https://github.com/react/react-native/blob/main/packages/eslint-plugin-specs/README.md

Install the package as a development dependency using yarn.

```bash
yarn add --dev @react-native/eslint-plugin-specs
```

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

### Start React Native Development Server

Source: https://github.com/react/react-native/blob/main/packages/community-cli-plugin/README.md

Use this command to start the React Native development server. Various options are available to configure the port, host, watch folders, and more.

```bash
npx @react-native-community/cli start [options]
```

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

### Install Compatibility Check Package

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Install the @react-native/compatibility-check package using Yarn.

```bash
yarn add @react-native/compatibility-check
```

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

### Install @react-native/jest-preset with npm

Source: https://github.com/react/react-native/blob/main/packages/jest-preset/README.md

Install the preset as a development dependency using npm.

```sh
npm i @react-native/jest-preset --save-dev
```

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

### Install @react-native/normalize-colors

Source: https://github.com/react/react-native/blob/main/packages/normalize-color/README.md

Install the package as a development dependency using Yarn.

```bash
yarn add --dev @react-native/normalize-colors
```

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

### Install @react-native/jest-preset with yarn

Source: https://github.com/react/react-native/blob/main/packages/jest-preset/README.md

Install the preset as a development dependency using yarn.

```sh
yarn add -D @react-native/jest-preset
```

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

### Install CocoaPods with Rosetta (Apple Silicon iOS)

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/README.md

Run 'pod install' using Rosetta on Apple Silicon Macs to ensure correct architecture compatibility.

```sh
arch -x86_64 pod install
```

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

### Install FFI for Apple Silicon (iOS)

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/README.md

Install the 'ffi' package using Rosetta for Apple Silicon Macs to load dynamic libraries.

```sh
sudo arch -x86_64 gem install ffi
```

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

### Install ESLint and React Native ESLint Plugin

Source: https://github.com/react/react-native/blob/main/packages/eslint-plugin-react-native/README.md

Install the necessary ESLint packages as development dependencies using Yarn.

```bash
yarn add --dev eslint @react-native/eslint-plugin
```

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

### Basic Fantom Test Setup

Source: https://github.com/react/react-native/blob/main/private/react-native-fantom/__docs__/README.md

Import necessary modules and set up the React Native environment for a Fantom test. Use `Fantom.createRoot()` to create a test root and `Fantom.runTask()` to render components.

```javascript
import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
import * as Fantom from '@react-native/fantom';

describe('My feature', () => {
  it('should do something interesting', () => {
    const root = Fantom.createRoot();

    Fantom.runTask(() => {
      root.render(/* ... */);
    });

    /* some checks */
  });
});
```

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

### Install @react-native/metro-config and Dependencies

Source: https://github.com/react/react-native/blob/main/packages/metro-config/README.md

Installs the necessary development dependencies for @react-native/metro-config using Yarn.

```bash
yarn add --dev @react-native/js-polyfills metro-config @react-native/metro-babel-transformer metro-runtime @react-native/metro-config
```

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

### Run Tests for @react-native/js-polyfills

Source: https://github.com/react/react-native/blob/main/packages/polyfills/README.md

Instructions to run tests for the polyfills package from the React Native root folder. Requires initial dependency installation.

```bash
yarn
yarn jest packages/polyfills
```

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

### Example Dist Directory Output

Source: https://github.com/react/react-native/blob/main/scripts/build/README.md

Shows the typical output structure within the 'dist/' directory after a package has been built. This includes compiled source files and type definition files.

```sh
packages/
  example-pkg/
    dist/
      index.js       # Compiled source file (from index.flow.js)
      index.js.flow  # Flow definition file
      index.d.ts     # TypeScript definition file
      [other transformed files]
    package.json     # "publishConfig" will override exports to "dist/" on publish

```

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

### VFS Overlay YAML Structure Example

Source: https://github.com/react/react-native/blob/main/packages/react-native/scripts/ios-prebuild/__docs__/README.md

Illustrates the hierarchical YAML format used by Clang's VFS overlay to map virtual import paths to physical file locations within an XCFramework.

```yaml
version: 0
case-sensitive: false
roots:
  - name: "${ROOT_PATH}/Headers"
    type: "directory"
    contents:
      - name: "react"
        type: "directory"
        contents:
          - name: "renderer"
            type: "directory"
            contents:
              - name: "Size.h"
                type: "file"
                external-contents: "${ROOT_PATH}/Headers/React/react/renderer/Size.h"
```

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

### Install @react-native/codegen

Source: https://github.com/react/react-native/blob/main/packages/react-native-codegen/README.md

Install the @react-native/codegen package as a development dependency using yarn.

```bash
yarn add --dev @react-native/codegen
```

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

### Run iOS Prebuild Script

Source: https://github.com/react/react-native/blob/main/packages/react-native/scripts/ios-prebuild/__docs__/README.md

Execute the main prebuild script for iOS. This command initiates the entire build process, including setup, building, and composing XCFrameworks.

```bash
cd packages/react-native
node scripts/ios-prebuild
```

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

### Configure ESLint 9+ (Flat Config)

Source: https://github.com/react/react-native/blob/main/packages/eslint-config-react-native/README.md

Integrate the React Native flat configuration into your ESLint setup by spreading the imported config. This example shows how to use CommonJS modules.

```javascript
const reactNativeConfig = require('@react-native/eslint-config/flat');

module.exports = [
  ...reactNativeConfig,
  // Your custom config here
];
```

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

### Install JSI Headers

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/jsi/jsi/CMakeLists.txt

Installs the JSI header files from the API directory to the include destination. Excludes files in 'test' subdirectories.

```cmake
install(DIRECTORY "${PROJECT_SOURCE_DIR}/API/jsi/" DESTINATION include
  FILES_MATCHING PATTERN "*.h"
  PATTERN "test" EXCLUDE)
```

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

### Getting Current Timestamp and Creating Durations

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/timing/__docs__/README.md

Demonstrates how to get the current high-resolution timestamp and create durations using nanoseconds or milliseconds.

```cpp
// Getting the current high-resolution timestamp
auto start = HighResTimeStamp::now();

// Creating durations
auto duration = HighResDuration::fromNanoseconds(100);
auto durationMs = HighResDuration::fromMilliseconds(100);
```

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

### Install @react-native/babel-plugin-codegen

Source: https://github.com/react/react-native/blob/main/packages/babel-plugin-codegen/README.md

Install the plugin and its peer dependency @babel/core as development dependencies using yarn.

```bash
yarn add --dev @babel/core @react-native/babel-plugin-codegen
```

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

### Install Bundler and CocoaPods Dependencies (iOS)

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/README.md

Install Bundler and CocoaPods dependencies locally for iOS development.

```sh
bundle install && bundle exec pod install
```

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

### Correct Signature-Input Header Format

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/dist/third-party/front_end/models/issues_manager/descriptions/sriInvalidSignatureInputHeader.md

This example shows the correct format for a `Signature-Input` header, which includes metadata for a signature labeled 'label'.

```http
Signature-Input: signature=("unencoded-digest";sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
```

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

### Run Tests for Gradle Plugin

Source: https://github.com/react/react-native/blob/main/packages/gradle-plugin/README.md

To run tests, first install dependencies using 'yarn', then execute the Gradle test task.

```bash
yarn
./gradlew -p packages/gradle-plugin test
```

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

### Install Assets Registry Package

Source: https://github.com/react/react-native/blob/main/packages/assets-registry/README.md

Install the @react-native/assets-registry package as a development dependency using Yarn.

```bash
yarn add --dev @react-native/assets-registry
```

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

### Install ESLint Dependencies

Source: https://github.com/react/react-native/blob/main/packages/eslint-config-react-native/README.md

Install the necessary ESLint and Prettier dependencies along with the React Native ESLint config. This command uses yarn.

```bash
yarn add --dev eslint prettier @react-native/eslint-config
```

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

### Example of a Valid Signature Header

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/dist/third-party/front_end/models/issues_manager/descriptions/sriInvalidSignatureHeader.md

This example demonstrates the correct format for a 'Signature' header containing a single Ed25519 signature labeled 'label'.

```http
Signature: label=:gHim9e5Pk2H7c9BStOmxSmkyc8+ioZgoxynu3d4INAT4dwfj5LhvaV9DFnEQ9p7C0hzW4o4Qpkm5aApd6WLLCw==:
```

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

### Basic CMakeLists.txt Configuration

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/CMakeLists.txt

A minimal CMakeLists.txt file setup for a React Native project, defining the minimum required CMake version and the project name.

```cmake
cmake_minimum_required(VERSION 3.13)

# Define the library name here.
project(appmodules)

# This file includes all the necessary to let you build your application with the New Architecture.
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
```

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

### Run Package Tests

Source: https://github.com/react/react-native/blob/main/packages/assets-registry/README.md

Execute tests for the @react-native/assets-registry package from the React Native root directory after installing dependencies.

```bash
yarn jest packages/assets-registry
```

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

### Run Tests for @react-native/eslint-plugin-specs

Source: https://github.com/react/react-native/blob/main/packages/eslint-plugin-specs/README.md

Commands to run tests for the package from the React Native root folder. Ensure dependencies are installed first.

```bash
yarn
yarn jest packages/eslint-plugin-specs
```

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

### Define Analytics Native Module Spec (Before)

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an initial interface for an Analytics Native Module using Flow.

```javascript
export interface Spec extends TurboModule {
  log: (eventName: string, content: string) => void;
}
```

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

### Asynchronous Test with PointerMove Event

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/js/examples/Experimental/PlatformTest/README.md

An example of an asynchronous test case using harness.useAsyncTest to verify that pointermove events are emitted on a View.

```javascript
function BasicPointerMoveTestCase({harness}) {
  const testPointerMove = harness.useAsyncTest('pointermove event received');

  return (
    <View
      style={{width: 100, height: 100, backgroundColor: 'black'}}
      onPointerMove={() => testPointerMove.done()}
    />
  );
}
```

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

### Install Virtualized Lists Package

Source: https://github.com/react/react-native/blob/main/packages/virtualized-lists/README.md

Use this command to add the @react-native/virtualized-lists package to your project dependencies. It's recommended to use yarn, but npm is also supported.

```bash
yarn add @react-native/virtualized-lists
```

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

### Library Creation

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/yoga/yoga/CMakeLists.txt

Creates a static library named 'yogacore' using the discovered source files.

```cmake
add_library(yogacore STATIC ${SOURCES})
```

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

### Run Full Test Suite Locally in CI Mode

Source: https://github.com/react/react-native/blob/main/private/react-native-fantom/__docs__/README.md

Run the entire test suite locally in CI mode by setting FANTOM_FORCE_CI_MODE=1. This pre-builds the binary matrix and skips per-test buck2 invocations to avoid daemon contention.

```shell
FANTOM_FORCE_CI_MODE=1 yarn fantom
```

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

### Build All Packages

Source: https://github.com/react/react-native/blob/main/scripts/build/README.md

Run this command to build all packages included in the monorepo's build configuration.

```sh
yarn build
```

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

### console.timeStamp with Start and End Times

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/jsinspector-modern/__docs__/consoleTimeStamp.md

Shows how to use console.timeStamp to mark a duration by providing both start and end time values.

```javascript
console.timeStamp('Animation', performance.now(), performance.now() + 500);
```

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

### Glob Source Files and Add Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCxxPlatform/react/io/CMakeLists.txt

Finds all .cpp files in the current directory and platform/cxx subdirectory, then creates an OBJECT library from them.

```cmake
file(GLOB react_cxx_platform_react_io_SRC CONFIGURE_DEPENDS *.cpp platform/cxx/*.cpp)
add_library(react_cxx_platform_react_io OBJECT ${react_cxx_platform_react_io_SRC})
```

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

### Set Include Directories

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/first-party/fbgloginit/CMakeLists.txt

Configures the include directories for the 'glog_init' target. The '.' indicates that the current directory should be added to the include path.

```cmake
target_include_directories(glog_init PUBLIC .)
```

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

### Running Tests in React Native Compatibility Check

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/AGENTS.md

Provides commands to navigate to the package directory and execute tests. Supports running all tests, specific files, or tests matching a pattern.

```bash
cd packages/react-native-compatibility-check

# Run all tests
yarn test

# Run a specific test file
yarn test src/__tests__/TypeDiffing-test.js

# Run tests matching a pattern
yarn test --testNamePattern="compareTypes on unions"
```

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

### Basic CMake Configuration

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/yoga/yoga/CMakeLists.txt

Sets the minimum required CMake version and the project name. It also enables verbose build output.

```cmake
cmake_minimum_required(VERSION 3.13...3.26)
project(yogacore)
set(CMAKE_VERBOSE_MAKEFILE on)
```

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

### Get Debugger Frontend Path

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/README.md

Use this snippet to get the absolute path to the debugger frontend assets directory. This path can then be passed to a static server.

```javascript
const frontendPath = require('@react-native/debugger-frontend');

// Pass frontendPath to a static server, etc
```

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

### GET /debugger-frontend

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/README.md

Serves the JavaScript debugger frontend. Subpaths of this endpoint are reserved for this purpose.

```APIDOC
## GET /debugger-frontend

### Description
Subpaths of this endpoint are reserved to serve the JavaScript debugger frontend.

### Method
GET

### Endpoint
/debugger-frontend

### Parameters
#### Query Parameters
None

### Response
#### Success Response (200)
- **debuggerFrontend** (file) - The JavaScript debugger frontend files.
```

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

### Setting Include Directories and Linking Libraries

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCxxPlatform/react/threading/CMakeLists.txt

Configures public include directories for the library and links it against 'folly_runtime' and 'react_cxxreact'.

```cmake
target_include_directories(react_cxx_platform_react_threading PUBLIC ${REACT_CXX_PLATFORM_DIR})

target_link_libraries(react_cxx_platform_react_threading
      folly_runtime
      react_cxxreact
)
target_compile_reactnative_options(react_cxx_platform_react_threading PRIVATE)
target_compile_options(react_cxx_platform_react_threading PRIVATE -Wpedantic)
```

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

### Call New Native Method

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of calling the newly added logError method on the NativeAnalytics module.

```javascript
NativeAnalytics.logError('Oh No! We hit a crash')
```

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

### bundle

Source: https://github.com/react/react-native/blob/main/packages/community-cli-plugin/README.md

Builds the JavaScript bundle for the provided entry file. This command is useful for creating production builds or for analyzing the bundled code.

```APIDOC
## bundle

### Description
Build the bundle for the provided JavaScript entry file.

### Usage
```sh
npx @react-native-community/cli bundle --entry-file <path> [options]
```

### Parameters
#### Query Parameters
- `--entry-file` (path) - Required - Set the path to the root JavaScript entry file.
- `--platform` (string) - Optional - Set the target platform (either "android" or "ios"). Defaults to "ios".
- `--transformer` (string) - Optional - Specify a custom transformer.
- `--dev` (boolean) - Optional - If `false`, warnings are disabled and the bundle is minified. Defaults to `true`.
- `--minify` (boolean) - Optional - Allows overriding whether bundle is minified. Defaults to `false` if `--dev` is set. Disabling minification can be useful for speeding up production builds for testing purposes.
- `--bundle-output` (string) - Optional - Specify the path to store the resulting bundle.
- `--bundle-encoding` (string) - Optional - Specify the encoding for writing the bundle (<https://nodejs.org/api/buffer.html#buffer_buffer>).
- `--resolver-option` (string...) - Optional - Custom resolver options of the form key=value. URL-encoded. May be specified multiple times.
- `--sourcemap-output` (string) - Optional - Specify the path to store the source map file for the resulting bundle.
- `--sourcemap-sources-root` (string) - Optional - Set the root path for source map entries.
- `--sourcemap-use-absolute-path` - Optional - Report `SourceMapURL` using its full path.
- `--max-workers` (number) - Optional - Set the maximum number of workers the worker-pool will spawn for transforming files. Defaults to the number of the cores available on your machine.
- `--assets-dest` (string) - Optional - Specify the directory path for storing assets referenced in the bundle.
- `--reset-cache` - Optional - Remove cached files.
- `--read-global-cache` - Optional - Attempt to fetch transformed JS code from the global cache, if configured. Defaults to `false`.
- `--config` (string) - Optional - Path to the CLI configuration file.
```

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

### GET /json/version

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/README.md

Retrieves version metadata utilized by Chrome DevTools for connecting to the React Native development environment.

```APIDOC
## GET /json/version

### Description
Returns version metadata used by Chrome DevTools.

### Method
GET

### Endpoint
/json/version

### Parameters
#### Query Parameters
None

### Response
#### Success Response (200)
- **versionInfo** (object) - Version metadata for DevTools compatibility.
```

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

### Glob and Add Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/consistency/CMakeLists.txt

Finds all .cpp files in the current directory and adds them to a new library target named 'react_renderer_consistency'.

```cmake
file(GLOB react_renderer_consistency_SRC CONFIGURE_DEPENDS *.cpp)
add_library(react_renderer_consistency OBJECT ${react_renderer_consistency_SRC})
```

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

### Define Enum Return Type (Before)

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of a Native Module interface returning an enum with a specific numeric mapping.

```javascript
enum TestEnum {
  LIGHT = 1,
  DARK = 2,
  SYSTEM = 3,
}

export interface Spec extends TurboModule {
  getColorScheme: () => TestEnum;
}
```

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

### Run Tests for normalize-color

Source: https://github.com/react/react-native/blob/main/packages/normalize-color/README.md

Instructions to run tests for the normalize-color package from the React Native root folder.

```bash
yarn jest packages/normalize-color
```

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

### Clean iOS Build Files for RNTester

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/README.md

Clean generated files and folders to ensure a fresh installation of RNTester on iOS.

```sh
# Clean the generated files and folders to clean install RNTester
cd packages/rn-tester
yarn clean-ios
```

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

### Define Enum Return Type (After)

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an updated Native Module interface where the numeric value for an enum member has changed.

```javascript
enum TestEnum {
  LIGHT = 1,
  DARK = 2,
  SYSTEM = -1,
}
```

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

### Define Color Scheme Method with Union Type

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of a Native Module interface where a union type parameter is extended.

```javascript
export interface Spec extends TurboModule {
  // You add 'system' to this union
  +setColorScheme: (color: 'light' | 'dark') => void;
}
```

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

### Basic CMakeLists.txt for Hermes JNI

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/react/runtime/hermes/jni/CMakeLists.txt

This snippet shows the core CMake configuration for the hermesinstancejni library. It sets the minimum CMake version, enables verbose makefiles, includes utility and flag scripts, and recursively finds all C++ source files.

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

include(${REACT_ANDROID_DIR}/src/main/jni/first-party/jni-lib-merge/SoMerging-utils.cmake)
include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)

file(GLOB_RECURSE hermes_instance_jni_SRC CONFIGURE_DEPENDS *.cpp)
```

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

### Device Registration Lifecycle

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/src/inspector-proxy/__docs__/README.md

Illustrates the WebSocket connection and initial page discovery process between a device and the Inspector Proxy.

```text
Device                              Proxy
   │                                  │
   │──── WS Connect ─────────────────▶│
   │     /inspector/device?...        │
   │                                  │
   │◀──── getPages ───────────────────│  (periodically)
   │                                  │
   │───── getPages response ─────────▶│
   │      (page list)                 │
```

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

### Define Analytics Native Module Spec (After)

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an updated interface for an Analytics Native Module with a new method added.

```javascript
export interface Spec extends TurboModule {
  log: (eventName: string, content: string) => void;
  logError: (message: string) => void;
}
```

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

### Set Minimum CMake Version

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/first-party/hermes/CMakeLists.txt

Specifies the minimum required version of CMake for this project. Ensure your CMake installation meets this requirement.

```cmake
cmake_minimum_required(VERSION 3.13)
```

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

### Basic CMake Configuration for React Native DevSupport JNI

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/react/devsupport/CMakeLists.txt

Sets up the minimum CMake version and enables verbose makefile output. Includes necessary utility and flag CMake scripts.

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

include(${REACT_ANDROID_DIR}/src/main/jni/first-party/jni-lib-merge/SoMerging-utils.cmake)
include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)
```

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

### Glob Source Files and Create Object Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCxxPlatform/react/utils/CMakeLists.txt

Discovers all .cpp files in the current directory and creates an object library named 'react_cxx_platform_react_utils'. The CONFIGURE_DEPENDS flag ensures that the glob is re-evaluated during configuration if files change.

```cmake
file(GLOB react_cxx_platform_react_utils_SRC CONFIGURE_DEPENDS *.cpp)
add_library(react_cxx_platform_react_utils OBJECT ${react_cxx_platform_react_utils_SRC})
```

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

### Folly Runtime Include Directories and Libraries

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/third-party/folly/CMakeLists.txt

Configures include directories and links necessary libraries for the folly_runtime library.

```cmake
target_include_directories(folly_runtime PUBLIC .)
target_link_libraries(folly_runtime glog double-conversion boost fmt fast_float)
```

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

### Run Tests for @react-native/metro-config

Source: https://github.com/react/react-native/blob/main/packages/metro-config/README.md

Installs project dependencies and runs Jest tests for the metro-config package from the React Native root folder.

```bash
yarn jest packages/metro-config
```

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

### Detect Added Method Incompatibility

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an error message generated by the compatibility-check tool when a new method is added to a Native Module.

```text
NativeAnalytics: Object added required properties, which native will not provide
  -- logError
```

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

### CMakeLists.txt Configuration

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCxxPlatform/react/threading/CMakeLists.txt

Sets up the build environment for the React Native CxxPlatform React Threading library, including minimum CMake version, verbose build, and sourcing common flags.

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

include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)
```

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

### Open Debugger via POST Request

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/README.md

Initiates a debugging session for a specified target. Requires either a 'target' ID or 'device' ID. The 'target' ID is obtained from the /json/list endpoint.

```bash
curl -X POST 'http://localhost:8081/open-debugger?target=<targetId>'
```

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

### Example of an Ignored @property Rule

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/dist/third-party/front_end/models/issues_manager/descriptions/propertyRuleIssue.md

This snippet represents an invalid @property rule that would be ignored. It serves as a placeholder for a malformed rule.

```css
{
  PLACEHOLDER_property
}
```

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

### Discover and Add Library Sources

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/nativemodule/microtasks/CMakeLists.txt

Finds all .cpp files in the current directory and adds them to a new library target.

```cmake
file(GLOB react_nativemodule_microtasks_SRC CONFIGURE_DEPENDS *.cpp)
add_library(react_nativemodule_microtasks OBJECT ${react_nativemodule_microtasks_SRC})
```

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

### Run Tests for @react-native/babel-plugin-codegen

Source: https://github.com/react/react-native/blob/main/packages/babel-plugin-codegen/README.md

Install project dependencies with yarn, then run Jest tests for the codegen package from the React Native root folder.

```bash
yarn
yarn jest packages/babel-plugin-codegen
```

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

### Detect Union Type Incompatibility

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an error message from the compatibility-check tool when a union type parameter is expanded without native support.

```text
ColorManager.setColorScheme parameter 0: Union added items, but native will not expect/support them
  -- position 3 system
```

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

### Create Dev Middleware

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/README.md

Integrates dev middleware into a custom dev server implementation. Ensure projectRoot, serverBaseUrl, and logger are correctly provided.

```javascript
import { createDevMiddleware } from '@react-native/dev-middleware';

function myDevServerImpl(args) {
  ...

  const {middleware, websocketEndpoints} = createDevMiddleware({
    projectRoot: metroConfig.projectRoot,
    serverBaseUrl: new URL(`http://${args.host}:${args.port}`),
    logger,
  });

  await Metro.runServer(metroConfig, {
    host: args.host,
    ...,
    unstable_extraMiddleware: [
      middleware,
      // Optionally extend with additional HTTP middleware
    ],
    websocketEndpoints: {
      ...websocketEndpoints,
      // Optionally extend with additional WebSocket endpoints
    },
  });
}
```

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

### Imperative Test with Assertions

Source: https://github.com/react/react-native/blob/main/packages/rn-tester/js/examples/Experimental/PlatformTest/README.md

An example of an imperative test case that measures a View's dimensions and asserts their correctness using harness.test and assert_equals.

```javascript
const EXPECTED_WIDTH = 100;
const EXPECTED_HEIGHT = 200;

function BasicLayoutTestCase({harness}) {
  const viewRef = useRef(null);

  const runTest = useCallback(() => {
    const view = viewRef.current;
    if (view != null) {
      view.measureInWindow(({width, height}) => {
        harness.test(({assert_equals}) => {
          assert_equals(
            width,
            EXPECTED_WIDTH,
            `view's computed width should be ${EXPECTED_WIDTH}`,
          );
          assert_equals(
            height,
            EXPECTED_HEIGHT,
            `view's computed width should be ${EXPECTED_HEIGHT}`,
          );
        }, "view's width and height are correct");
      });
    }
  }, [harness]);

  return (
    <>
      <View
        ref={viewRef}
        style={{width: EXPECTED_WIDTH, height: EXPECTED_HEIGHT}}
      />
      <Button title="Start Test" onPress={runTest} />
    </>
  );
}
```

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

### Glob and Add Boost Assembly Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/third-party/boost/CMakeLists.txt

Finds all assembly files (.S) in the specified directory for the current Android ABI and creates a static library named 'boost' from them. CONFIGURE_DEPENDS ensures this is re-evaluated during configuration.

```cmake
file(GLOB_RECURSE
        boostasm_SRC
        CONFIGURE_DEPENDS
        ${CMAKE_CURRENT_SOURCE_DIR}/asm/${ANDROID_ABI}/*.S)
add_library(boost STATIC ${boostasm_SRC})
```

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

### Run Tests for @react-native/codegen

Source: https://github.com/react/react-native/blob/main/packages/react-native-codegen/README.md

Commands to run tests for the @react-native/codegen package from the React Native root folder. This includes installing dependencies and executing jest.

```bash
yarn
yarn jest packages/react-native-codegen
```

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

### Detect Enum Type Mismatch Incompatibility

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of a detailed error message from the compatibility-check tool when an enum value changes, causing a type mismatch.

```javascript
ColorManager: Object contained a property with a type mismatch
   -- getColorScheme: has conflicting type changes
       --new: ()=>Enum<number>
       --old: ()=>Enum<number>
       Function return types do not match
           --new: ()=>Enum<number>
           --old: ()=>Enum<number>
           Enum types do not match
               --new: Enum<number> {LIGHT = 1, DARK = 2, SYSTEM = -1}
               --old: Enum<number> {LIGHT = 1, DARK = 2, SYSTEM = 3}
               Enum contained a member with a type mismatch
                   -- Member SYSTEM: has conflicting changes
                       --new: -1
                       --old: 3
                       Numeric literals are not equal
                           --new: -1
                           --old: 3
```

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

### SO Merging for the Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/CMakeLists.txt

Applies SO merging to the 'rninstance' target.

```cmake
target_merge_so(rninstance)
```

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

### List Feature Flags

Source: https://github.com/react/react-native/blob/main/packages/react-native/src/private/featureflags/__docs__/README.md

Use this command to list all available feature flags and their descriptions in a human-readable table format. This is useful for quick review.

```shell
yarn featureflags --print
```

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

### SRI Signature Base Example

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/dist/third-party/front_end/models/issues_manager/descriptions/sriValidationFailedSignatureMismatch.md

This snippet shows the signature base string over which SRI verification is attempted when a signature mismatch occurs. It is used for debugging.

```text
{PLACEHOLDER_signatureBase}
```

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

### Run Virtualized Lists Tests

Source: https://github.com/react/react-native/blob/main/packages/virtualized-lists/README.md

Execute tests for the virtualized-lists package by first installing all project dependencies with 'yarn' and then running Jest specifically for the virtualized-lists package.

```bash
yarn jest packages/virtualized-lists
```

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

### React Timing CMakeLists.txt Configuration

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/timing/CMakeLists.txt

Sets up the CMake build for the React Timing library. Includes common React Native flags and links against react_debug.

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

include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)

add_library(react_timing INTERFACE)

target_include_directories(react_timing INTERFACE ${REACT_COMMON_DIR})
target_link_libraries(react_timing INTERFACE
        react_debug)
target_compile_reactnative_options(react_timing INTERFACE)
target_compile_options(react_timing INTERFACE -Wpedantic)
```

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

### Configure Target Include Directories and Libraries

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/debug/CMakeLists.txt

Sets public include directories and links necessary libraries for the 'react_renderer_debug' target.

```cmake
target_include_directories(react_renderer_debug PUBLIC ${REACT_COMMON_DIR})
target_link_libraries(react_renderer_debug folly_runtime react_debug)
```

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

### Discovering and Defining Library Sources

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCxxPlatform/react/threading/CMakeLists.txt

Discovers all .cpp files in the current directory and defines an object library named 'react_cxx_platform_react_threading'.

```cmake
file(GLOB react_cxx_platform_react_threading_SRC CONFIGURE_DEPENDS *.cpp)
add_library(react_cxx_platform_react_threading OBJECT ${react_cxx_platform_react_threading_SRC})
```

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

### Type-Safe Instance Access with ensureInstance

Source: https://github.com/react/react-native/blob/main/private/react-native-fantom/__docs__/README.md

Use the `ensureInstance` helper to get a type-safe reference to the underlying instance of a React Native element. This is preferred over generic `HostInstance`.

```javascript
import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';

const element = ensureInstance(elementRef.current, ReactNativeElement);
```

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

### Required Package Structure

Source: https://github.com/react/react-native/blob/main/scripts/build/README.md

Illustrates the mandatory file layout for a package to be compatible with the monorepo's build setup. This structure simplifies configuration and enforces consistency.

```sh
packages/
  example-pkg/
    src/             # All source files
      index.js       # Entry point wrapper file (calls babel-register.js) (compiled away)
      index.flow.js  # Entry point implementation in Flow
      [other files]
    package.json     # Includes "exports" field, ideally only src/index.js

```

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

### Bundle React Native Application

Source: https://github.com/react/react-native/blob/main/packages/community-cli-plugin/README.md

This command builds the JavaScript bundle for the provided entry file. Options include specifying the platform, transformer, output paths, and cache reset.

```bash
npx @react-native-community/cli bundle --entry-file <path> [options]
```

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

### Integrate Prebuilt Dependencies with Cocoapods

Source: https://github.com/react/react-native/blob/main/scripts/releases/ios-prebuild/__docs__/README.md

Use prebuilt React Native Dependencies XCFrameworks in your iOS project by setting the RCT_USE_RN_DEP environment variable to 1 when running pod install.

```bash
RCT_USE_RN_DEP=1 bundle exec pod install
```

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

### GET /json/list, /json

Source: https://github.com/react/react-native/blob/main/packages/dev-middleware/README.md

Returns a list of available WebSocket targets for all connected React Native app sessions. This endpoint is part of the Chrome DevTools Protocol (CDP) integration.

```APIDOC
## GET /json/list, /json

### Description
Returns the list of available WebSocket targets for all connected React Native app sessions.

### Method
GET

### Endpoint
/json/list, /json

### Parameters
#### Query Parameters
None

### Response
#### Success Response (200)
- **targets** (array) - A list of available WebSocket targets.
```

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

### Basic console.timeStamp Usage

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/jsinspector-modern/__docs__/consoleTimeStamp.md

Demonstrates the simplest way to use console.timeStamp by providing only a label.

```javascript
console.timeStamp('Click');
```

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

### Incorrect SRI Signature Input Header Format

Source: https://github.com/react/react-native/blob/main/packages/debugger-frontend/dist/third-party/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidComponentType.md

This example demonstrates the incorrect format where the signature component is not enclosed in double quotes, leading to an invalid component type error.

```http
Signature-Input: signature=(unencoded-digest;sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
```

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

### Create Root and Render View with Fantom

Source: https://github.com/react/react-native/blob/main/private/react-native-fantom/__docs__/README.md

This snippet demonstrates how to create a Fantom root, render a React Native View component, and assert its bounding rectangle properties. It highlights how Fantom allows direct inspection of layout calculations without mocking.

```javascript
const root = Fantom.createRoot({viewportWidth: 200, viewportHeight: 600});
let viewElement;

Fantom.runTask(() => {
  root.render(
    <View
      ref={node => {
        viewElement = node;
      }}
      style={{width: '50%', height: '10%'}}
    />,
  );
});

// Without Fantom, getBoundingClientRect would have to be mocked.
const boundingClientRect = viewElement.getBoundingClientRect();
expect(boundingClientRect.height).toBe(60);
expect(boundingClientRect.width).toBe(100);
```

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

### Element-Level Assertions

Source: https://github.com/react/react-native/blob/main/private/react-native-fantom/__docs__/README.md

Perform element-level assertions by getting a typed reference using `ensureInstance` and inspecting properties like `tagName`, `getBoundingClientRect`, or children. This is used in conjunction with `Fantom.runTask` to render the component.

```javascript
const elementRef = createRef<HostInstance>();

Fantom.runTask(() => {
  root.render(
    <View ref={elementRef}>
      <Text>the quick brown fox</Text>
    </View>,
  );
});

const element = ensureInstance(elementRef.current, ReactNativeElement);
expect(element.tagName).toBe('RN:View');

const bounds = element.getBoundingClientRect();
expect(bounds.width).toBe(100);
expect(bounds.height).toBe(50);

expect(root.getRenderedOutput().toJSX()).toEqual(
  <rn-view>
    <rn-paragraph>the quick brown fox</rn-paragraph>
  </rn-view>,
);
```

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

### Build Specific Package

Source: https://github.com/react/react-native/blob/main/scripts/build/README.md

Use this command to build a single, specific package within the monorepo.

```sh
yarn build dev-middleware
```

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

### Configure ESLint 9+ (Flat Config) with ES Modules

Source: https://github.com/react/react-native/blob/main/packages/eslint-config-react-native/README.md

Integrate the React Native flat configuration into your ESLint setup using ES module syntax. This is an alternative to the CommonJS approach.

```javascript
import reactNativeConfig from '@react-native/eslint-config/flat';

export default [
  ...reactNativeConfig,
  // Your custom config here
];
```

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

### Include Directory Configuration

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/yoga/yoga/CMakeLists.txt

Configures public include directories for the 'yogacore' target. It specifies build-time and install-time include paths.

```cmake
target_include_directories(yogacore
    PUBLIC
    $<BUILD_INTERFACE:${YOGA_ROOT}>
    $<INSTALL_INTERFACE:${CMAKE_INSTALL_PREFIX}/include/yoga>)
```

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

### Set Include Directories for Mounting Library

Source: https://github.com/react/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/mounting/CMakeLists.txt

Configures private and public include directories for the react_renderer_mounting library.

```cmake
target_include_directories(react_renderer_mounting PRIVATE .)
target_include_directories(react_renderer_mounting PUBLIC ${REACT_COMMON_DIR})
```

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

### Enum Definition with Special Value

Source: https://github.com/react/react-native/blob/main/packages/react-native-compatibility-check/README.md

Example of an enum definition that includes standard values and a special value (-1) which might require careful handling or a new method in native module interfaces.

```typescript
enum TestEnum {
  LIGHT = 1,
  DARK = 2,
  SYSTEM = 3,
  SYSTEM_ALSO = -1,
}
```