Jest

Create a new directory for your component (e.g., `MyComponent/`) with the main JS file. Define the component using `React.forwardRef` and call `codegenNativeComponent` to register it.

Pattern: Follow the pattern in packages/react-native/Libraries/Components/Switch/Switch.js which uses codegenNativeComponent for Fabric registration and defines props with Flow types.

Create a NativeComponent spec file (e.g., `MyComponentNativeComponent.js`) that defines the native props interface using codegen-compatible Flow types and exports via `codegenNativeComponent<NativeProps>('MyComponentName')`.

Pattern: Follow the pattern in packages/react-native/Libraries/Components/Switch/SwitchNativeComponent.js which exports typed native commands and component registration.

Add a lazy getter export for the new component using `get MyComponent()` inside the module.exports block, requiring the component file lazily.

Pattern: Follow the pattern used for `Switch` in packages/react-native/index.js: `get Switch(): Switch { return require('./Libraries/Components/Switch/Switch').default; }`

Create the Android native ViewManager class that extends `SimpleViewManager<T>` or `BaseViewManager<T>`, implementing `createViewInstance`, `getName`, and `@ReactProp` setters.

Pattern: Follow the pattern in packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java which registers props and creates the native view.

Create a Jest test file (e.g., `MyComponent-test.js`) that tests rendering, prop handling, and event callbacks.

Pattern: Follow the pattern in packages/react-native/Libraries/Components/Switch/__tests__/Switch-test.js which uses `@testing-library/react-native` or `ReactTestRenderer` to verify component behavior.

Create a new directory for your module (e.g., `MyModule/`). Create a `NativeMyModule.js` spec file that defines the module interface using `TurboModuleRegistry.getEnforcing<Spec>('MyModule')` with a Flow interface extending `TurboModule`.

Pattern: Follow the pattern in packages/react-native/Libraries/Vibration/NativeVibration.js which defines a `Spec` interface extending `TurboModule` with typed method signatures and exports via `TurboModuleRegistry.getEnforcing<Spec>('Vibration')`.

Create the JS-facing module file (e.g., `MyModule.js`) that imports the native spec and wraps it with any JS-side logic.

Pattern: Follow the pattern in packages/react-native/Libraries/Vibration/Vibration.js which imports NativeVibration and provides a higher-level JS API.

Add a lazy getter export for the new module in the module.exports block.

Pattern: Follow the pattern used for `Vibration` in packages/react-native/index.js: `get Vibration(): Vibration { return require('./Libraries/Vibration/Vibration'); }`

Create the Android native module class extending `NativeMyModuleSpec` (codegen-generated base class) or `ReactContextBaseJavaModule`, annotating methods with `@ReactMethod`.

Pattern: Follow the pattern in packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/vibration/VibrationModule.java which extends the codegen spec and implements the native methods.

Create a Jest test file that mocks the native module and tests the JS API.

Pattern: Follow the pattern in packages/react-native/Libraries/Vibration/__tests__/Vibration-test.js which uses `jest.mock` to mock the NativeModule and verifies method calls.

Register a new route handler in the middleware stack. Add a new `app.use()` or `app.get()`/`app.post()` call in the `createDevMiddleware` function, pointing to your new middleware handler.

Pattern: Follow the pattern of the `/open-debugger` endpoint registration in packages/dev-middleware/src/createDevMiddleware.js which delegates to a separate middleware module.

Create a new middleware file (e.g., `myEndpointMiddleware.js`) that exports a connect-compatible middleware function `(req, res, next) => { ... }`.

Pattern: Follow the pattern in packages/dev-middleware/src/middleware/openDebuggerMiddleware.js which parses request parameters, performs logic, and sends JSON responses.

Create a test file for the new endpoint that starts a test server, makes HTTP requests, and asserts responses.

Pattern: Follow the pattern in packages/dev-middleware/src/__tests__/InspectorProxyHttpApi-test.js which uses `http.createServer`, connects the middleware, and uses `fetch` to test endpoints.

Add the new style property to the appropriate Flow type definition (e.g., `ViewStyleProp`, `TextStyleProp`, `ImageStyleProp`, or the base `____LayoutStyle_Internal`).

Pattern: Follow how existing properties like `opacity` or `borderRadius` are defined in packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js with their Flow type annotations.

If the new property requires special processing (e.g., color normalization, transform parsing), add processing logic here.

Pattern: Follow how color properties are processed in packages/react-native/Libraries/StyleSheet/processColor.js which normalizes color values before sending to native.

If the property is view-specific, ensure it's included in the view prop types.

Pattern: Follow how existing style-related props are typed in packages/react-native/Libraries/Components/View/ViewPropTypes.js.

Add tests verifying the new property is accepted and processed correctly.

Pattern: Follow the test patterns in packages/react-native/Libraries/StyleSheet/__tests__/processStyles-test.js.

Create a new AnimatedNode subclass file (e.g., `AnimatedMyNode.js`) that extends `AnimatedNode` or `AnimatedWithChildren` and implements `__getValue()`, `__attach()`, `__detach()`, and `__getNativeConfig()`.

Pattern: Follow the pattern in packages/react-native/Libraries/Animated/nodes/AnimatedAddition.js which extends AnimatedWithChildren, implements value computation, and provides native config for offloading to the native animated driver.

Export the new node type or a factory function from the main Animated module.

Pattern: Follow how `Animated.add()` is exported in packages/react-native/Libraries/Animated/Animated.js as a static method that creates an AnimatedAddition instance.

If the node supports native animated driver, add the native node type constant and any required native API calls.

Pattern: Follow how existing native node types are registered in packages/react-native/Libraries/Animated/NativeAnimatedHelper.js.

Create tests for the new node type verifying value computation, attachment lifecycle, and native config generation.

Pattern: Follow the test patterns in packages/react-native/Libraries/Animated/__tests__/Animated-test.js which tests node creation, value updates, and listener callbacks.

Add or modify the type definition in the codegen schema. This is the central schema that all generators consume.

Pattern: Follow how existing types like `StringTypeAnnotation` or `ObjectTypeAnnotation` are defined as Flow type unions in packages/react-native-codegen/src/CodegenSchema.js.

Update the Flow parser to recognize and parse the new type from Flow source files into the codegen schema representation.

Pattern: Follow the parsing logic in packages/react-native-codegen/src/parsers/flow/modules/index.js which maps Flow AST nodes to codegen schema types.

Update the TypeScript parser to handle the same new type from TS source files.

Pattern: Follow the parsing logic in packages/react-native-codegen/src/parsers/typescript/modules/index.js which mirrors the Flow parser but for TS AST.

Update the native code generators (C++, ObjC, Java) to emit correct native code for the new type.

Pattern: Follow how existing types are handled in packages/react-native-codegen/src/generators/modules/GenerateModuleObjCpp/serializeMethod.js which maps schema types to ObjC++ type strings.

Add test fixtures and snapshot tests for the new type across all parsers and generators.

Pattern: Follow the test fixture pattern in packages/react-native-codegen/src/parsers/flow/modules/__test_fixtures__/fixtures.js which defines module specs as string fixtures and verifies parsed output.

Add a new flag definition with a default value and a descriptive name. Export a getter function for the flag.

Pattern: Follow how existing flags are defined in packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js with a boolean default and a named export function.

Import and use the feature flag in the relevant library code, gating the new behavior behind the flag check.

Pattern: Search for existing usages of `ReactNativeFeatureFlags` imports across packages/react-native/Libraries/ to see how flags gate behavior with simple if-checks.