### Start the Example App Packager

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Starts the Metro bundler for the example application. This is a prerequisite for running the example app on devices or simulators.

```sh
yarn example start
```

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

### Build Example App for Web

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Creates a production build of the example application for web deployment.

```sh
yarn example build:web
```

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

### Run Example App on iOS

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device.

```sh
yarn example ios
```

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

### Run Example App on Android

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator.

```sh
yarn example android
```

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

### Run Example App on Web

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Builds and runs the example application in a web browser. This command is available if the project uses Vite or Expo.

```sh
yarn example web
```

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

### Install Project Dependencies

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

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

```sh
yarn
```

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

### Dual Package Setup with Exports Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Demonstrates a dual package setup using `exports` conditions for both `import` and `require`.

```json
"exports": {
  ".": {
    "import": {
      "types": "./lib/typescript/module/src/index.d.ts",
      "react-native": "./lib/module/index.native.js",
      "default": "./lib/module/index.js"
    },
    "require": {
      "types": "./lib/typescript/commonjs/src/index.d.ts",
      "react-native": "./lib/commonjs/index.native.js",
      "default": "./lib/commonjs/index.js"
    }
  },
  "./package.json": "./package.json"
}
```

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

### Install react-native-builder-bob

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Install the package as a development dependency using Yarn.

```sh
yarn add --dev react-native-builder-bob
```

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

### Complete Dual Package Setup in package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

This JSON object shows the complete configuration for a dual package setup in `package.json`, including `main`, `module`, `types`, and the `exports` field with both `import` and `require` conditions.

```json
{
  "main": "./lib/commonjs/index.js",
  "module": "./lib/module/index.js",
  "types": "./lib/typescript/commonjs/src/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "require": {
        "types": "./lib/typescript/commonjs/src/index.d.ts",
        "default": "./lib/commonjs/index.js"
      }
    },
    "./package.json": "./package.json"
  }
}
```

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

### Package Exports Configuration (Specific to React Native)

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Example of configuring package `exports` to prioritize the `react-native` condition for dual package setups.

```json
"exports": {
  ".": {
    "types": "./lib/typescript/src/index.d.ts",
    "react-native": "./lib/modules/index.native.js",
    "default": "./lib/module/index.js"
  }
}
```

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

### Install with Nitro Modules

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/README.md

Install the library and react-native-nitro-modules if your project uses Nitro Modules.

```sh
npm install <%- project.slug %> react-native-nitro-modules

> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
```

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

### Install without Nitro Modules

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/README.md

Install the library if your project does not use Nitro Modules.

```sh
npm install <%- project.slug %>
```

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

### Install Local Tarball with npm

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

Installs a locally generated tarball of a library into your application using npm.

```bash
npm install ../path/to/your-library-name-0.0.0-local.0.tgz
```

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

### Install Local Tarball with Yarn

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

Installs a locally generated tarball of a library into your application using Yarn.

```bash
yarn add ../path/to/your-library-name-0.0.0-local.0.tgz
```

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

### Add Pre-Install Hook for Codegen in iOS Podfile

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Include a 'pre_install' hook in your 'example/ios/Podfile' to automatically execute the codegen script when installing pods. This ensures generated code is available before the build proceeds.

```ruby
pre_install do |installer|
  system("cd ../../ && npx bob build --target codegen")
end

```

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

### Create a local React Native library

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/create.md

Use this command with the `--local` flag to create a React Native library intended for local use within an existing project. This approach avoids including an example app and extra dependencies.

```bash
npx create-react-native-library@latest awesome-library --local
```

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

### Package Library Locally with npm Pack

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

Generates a tarball of your library for local installation. Ensure the version in package.json is unique for each pack to avoid stale content.

```bash
npm pack
```

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

### Generate Boilerplate Code with Nitrogen

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Invoke Nitrogen to generate necessary boilerplate code, especially when working with Nitro Modules or for the first-time setup. This is required for the example app to build.

```sh
yarn nitrogen
```

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

### Add Gradle Task for Codegen in Android Example

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Integrate a Gradle task named 'invokeLibraryCodegen' into your 'example/android/app/build.gradle' file. This task runs the 'npx bob build --target codegen' command, and it's set to execute before the 'preBuild' task.

```groovy
tasks.register('invokeLibraryCodegen', Exec) {
  workingDir "$rootDir/../../"

  def isWindows = System.getProperty('os.name').toLowerCase().contains('windows')

  if (isWindows) {
    commandLine 'cmd', '/c', 'npx bob build --target codegen'
  } else {
    commandLine 'sh', '-c', 'npx bob build --target codegen'
  }
}

preBuild.dependsOn invokeLibraryCodegen

```

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

### Swift Implementation for a Fabric View

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/swift-new-architecture.md

Create a Swift UIView subclass to encapsulate the view's logic. This example shows how to define a `setColor` method that can be called from Objective-C++.

```swift
import UIKit

@objc(<YourProjectName>ViewImpl)
final class <YourProjectName>ViewImpl: UIView {
  @objc
  func setColor(_ color: UIColor?) {
    backgroundColor = color
  }
}
```

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

### Swift Implementation for Turbo Module

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/swift-new-architecture.md

Example Swift class for a Turbo Module implementation. Ensure the class and methods are marked with `@objc` and inherit from `NSObject` for Objective-C compatibility.

```swift
import Foundation
@objc(<YourProjectName>Impl)
final class <YourProjectName>Impl: NSObject {
  @objc
  func multiply(_ a: Double, b: Double) -> NSNumber {
    NSNumber(value: a * b)
  }
}
```

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

### Add @react-native-community/cli DevDependency

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Ensure '@react-native-community/cli' is listed as a devDependency in your package.json. The version should match the one used in the example app.

```diff
"devDependencies": {
    // …
   + "@react-native-community/cli": "^x.x.x"
   }
```

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

### Module Target Configuration

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Configure the 'module' build target, enabling ES modules output for Node.js 12+ and modern browsers. This example shows enabling the 'esm' option.

```json
["module", { "esm": true }]
```

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

### Yarn 1 Workspace Warning

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

Users with Yarn 1 might see a workspace warning during installation. This warning is benign and can be ignored.

```sh
warning Workspaces can only be enabled in private projects.

```

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

### Compile Project with Babel and TypeScript

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

This command compiles source files using Babel, ignoring tests, copying files, generating source maps, deleting the output directory before starting, and then uses TypeScript to emit declaration files. It's a comprehensive build command that can be lengthy and complex to manage manually.

```sh
babel --extensions '.js,.ts,.tsx' --no-babelrc --config-file=./babel.config.publish.js src --ignore '**/__tests__/**' --copy-files --source-maps --delete-dir-on-start --out-dir dist && del-cli 'dist/**/__tests__' && yarn tsc --emitDeclarationOnly
```

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

### Generate Native Scaffolding with Codegen

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Run React Native Codegen to generate native scaffolding for C++ Turbo Modules. This is necessary when changes are made to `src/Native<%- project.name -%>.ts` or during the initial project setup.

```sh
yarn bob build --target codegen
```

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

### Conditional and Subpath Exports in package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Example of how to define conditional exports for different environments and explicitly expose files like Expo Config plugins using subpath exports.

```json
"exports": {
  ".": {
    "my-library-source": "./src/index.tsx",
    "types": "./lib/typescript/src/index.d.ts",
    "default": "./lib/module/index.js"
  },
  "./package.json": "./package.json",
+ "./app.plugin.js": "./app.plugin.js"
}
```

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

### Configure Metro for Custom Export Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

When using `react-native-monorepo-config`, pass your custom condition (e.g., `['my-library-source']`) to `withMetroConfig` to allow the example app to resolve the library source.

```javascript
const config = withMetroConfig(getDefaultConfig(__dirname), {
  root,
  dirname: __dirname,
  conditions: ['my-library-source'],
});
```

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

### Update Fabric View Imports for Codegen

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Adjust your iOS Fabric View import paths for generated code. Update paths starting with 'react/renderer/components/YourProjectNameViewSpec/' to '<YourProjectName>/'.

```diff
- #import <react/renderer/components/YourProjectNameViewSpec/ComponentDescriptors.h>
- #import <react/renderer/components/YourProjectNameViewSpec/EventEmitters.h>
- #import <react/renderer/components/YourProjectNameViewSpec/Props.h>
- #import <react/renderer/components/YourProjectNameViewSpec/RCTComponentViewHelpe
rs.h>
+ #import <YourProjectName/ComponentDescriptors.h>
+ #import <YourProjectName/EventEmitters.h>
+ #import <YourProjectName/Props.h>
+ #import <YourProjectName/RCTComponentViewHelpers.h>
```

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

### Run Documentation Locally

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Navigate to the 'docs' directory and run this command to serve the project documentation locally.

```sh
yarn docs dev
```

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

### Configure Entry Points in package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Define the main, types, and exports fields for package entry points, along with files to include.

```json
"main": "./lib/module/index.js",
"types": "./lib/typescript/src/index.d.ts",
"exports": {
  ".": {
    "types": "./lib/typescript/src/index.d.ts",
    "default": "./lib/module/index.js"
  },
  "./package.json": "./package.json"
},
"files": [
  "lib",
  "src"
]
```

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

### Add Build Script to package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Integrate the 'bob build' command into your package.json's 'prepare' or 'prepack' script.

```json
"scripts": {
  "prepare": "bob build"
}
```

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

### Initialize react-native-builder-bob

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/react-native-builder-bob/README.md

Use this command to initialize react-native-builder-bob in your project. Navigate to your project directory first.

```sh
cd your-project
npx react-native-builder-bob@latest init
```

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

### Create a new React Native library

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/create.md

Use this command to scaffold a new React Native library project. It will prompt you for project details and set up necessary configurations.

```bash
npx create-react-native-library@latest awesome-library
```

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

### Publish New Versions with release-it

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Run this command to publish new versions of the project. It automates version bumping, tagging, and release creation.

```sh
yarn release
```

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

### Using require for Platform-Specific Extensions in Library

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Shows how to use `require` within a library to handle platform-specific extensions, ensuring Node.js compatibility.

```javascript
// will import `foo.native.js`, `foo.ios.js`, `foo.js` etc.
const { foo } = require('./foo');
```

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

### Scaffold a new React Native library

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/README.md

Use this command to initiate the creation of a new React Native library project. The CLI will prompt for project details and generate the necessary files.

```sh
npx create-react-native-library@latest react-native-awesome-library
```

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

### Run Watch Mode for Development

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Execute this command to automatically rebuild changes while developing.

```sh
yarn watch
```

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

### Import Swift Compatibility Header

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/swift-new-architecture.md

Import the generated Swift compatibility header. The `#if __has_include` check is necessary for compatibility with `use_frameworks!` in the Podfile.

```objc
#if __has_include("<YourProjectName>/<YourProjectName>-Swift.h")
#import "<YourProjectName>/<YourProjectName>-Swift.h"
#else
#import "<YourProjectName>-Swift.h"
#endif
```

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

### Configure Build Targets in package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Specify the source directory, output directory, and build targets in your package.json file.

```json
{
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      ["module", { "esm": true }],
      "typescript"
    ]
  }
}
```

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

### Create a React Native library with a specific version

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/create.md

If you need to create a library using legacy native modules and view APIs, use a specific older version of `create-react-native-library`.

```bash
npx create-react-native-library@0.49.8 awesome-library
```

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

### Test CLI Locally

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Use this command to test the CLI locally by pointing to the appropriate executable.

```sh
../bob/packages/create-react-native-library/bin/create-react-native-library
```

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

### Define Custom Build Target with Script and Clean

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Configure a custom build target by specifying a script name and an optional cleanup path. The script must be defined in your package.json's 'scripts' property, and the clean path is relative to the build execution directory.

```json
["custom", { "script": "my-custom-build", "clean": "my-output-folder/" }]

```

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

### Run Unit Tests

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/CONTRIBUTING.md

Executes the project's unit tests. It is recommended to add tests for any new changes made to the codebase.

```sh
yarn test
```

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

### Publish New Versions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Ensure GH_TOKEN is set and run this command to automatically bump the version and publish packages. This also publishes changelogs on GitHub.

```sh
yarn lerna publish
```

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

### Using CommonJS require for Platform-Specific Extensions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Demonstrates how to use CommonJS `require` to import code with platform-specific extensions when targeting Node.js with ESM.

```javascript
const { foo } = require('my-library');
```

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

### Configure Native Library Build with CMake

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/cpp-library/android/CMakeLists.txt

This CMakeLists.txt file configures the build for a native C++ library. It sets the C++ standard to 20, specifies include directories, and links against JSI, React Native, and React Codegen libraries. Ensure these dependencies are available in your build environment.

```cmake
cmake_minimum_required(VERSION 3.4.1)
project(<%- project.name -%>)

set (CMAKE_VERBOSE_MAKEFILE ON)

add_library(
    <%- project.identifier -%>
    STATIC
    ../cpp/<%- project.name -%>Impl.cpp
)

set_target_properties(
    <%- project.identifier -%> PROPERTIES
    CXX_STANDARD 20
    CXX_STANDARD_REQUIRED ON
    CXX_EXTENSIONS OFF
)

target_include_directories(
    <%- project.identifier -%> 
    PUBLIC
    ../cpp
)

target_link_libraries(
    <%- project.identifier -%> 
    jsi
    reactnative
    react_codegen_<%- project.name -%>Spec
)
```

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

### Publish Pre-release Version

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Use this command to release a pre-release version after updating lerna.json with preId and preDistTag.

```sh
yarn lerna publish --conventional-commits --conventional-prerelease --preid next
```

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

### Package.json Exports with Tool Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

This JSON configuration demonstrates how to use the 'exports' field in package.json to specify different entry points based on the environment or tool (e.g., React Native, module bundlers, Node.js). It includes conditions for 'react-native', 'module', 'module-sync', and a 'default' fallback.

```json
{
  "main": "./lib/commonjs/index.js",
  "module": "./lib/module/index.js",
  "types": "./lib/typescript/commonjs/src/index.d.ts",
  "exports": {
    ".": {
      "react-native": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "module": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "module-sync": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "default": {
        "types": "./lib/typescript/commonjs/src/index.d.ts",
        "default": "./lib/commonjs/index.js"
      }
    },
    "./package.json": "./package.json"
  }
}
```

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

### Publish Stable Version

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Run this command to release a stable version after removing preId and preDistTag fields from lerna.json.

```sh
yarn lerna publish --conventional-commits --conventional-graduate
```

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

### Using Platform.select for Platform-Specific Code

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Illustrates using `Platform.select` to conditionally import platform-specific code within an ESM environment.

```javascript
import { Platform } from 'react-native';

const foo = Platform.select({
  android: require('./fooAndroid.js'),
  ios: require('./fooIOS.js'),
  default: require('./fooFallback.js'),
});
```

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

### Configure TypeScript moduleResolution for ESM

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Set `"moduleResolution": "bundler"` in your `tsconfig.json` to align with Metro's behavior and avoid needing file extensions in import statements. Bob automatically adds them during the build.

```json
{
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}
```

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

### Objective-C Wrapper for Swift Turbo Module

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/swift-new-architecture.md

Objective-C wrapper to call a Swift Turbo Module implementation. It initializes the Swift class and forwards method calls.

```objc
#import "<YourProjectName>.h"

// Add the import for the generated Swift header
// [!code highlight:5]
#if __has_include("<YourProjectName>/<YourProjectName>-Swift.h")
#import "<YourProjectName>/<YourProjectName>-Swift.h"
#else
#import "<YourProjectName>-Swift.h"
#endif

// Declare a private property for the Swift implementation
// [!code highlight:3]
@implementation <YourProjectName> {
  <YourProjectName>Impl *_impl;
}

// Initialize the Swift class on module creation
// [!code highlight:8]
- (instancetype)init
{
  if (self = [super init]) {
    _impl = [<YourProjectName>Impl new];
  }
  return self;
}

// Call the Swift implementation for the actual implementation
// [!code highlight:4]
- (NSNumber *)multiply:(double)a b:(double)b
{
  return [_impl multiply:a b:b];
}

// Keep rest of the boilerplate for module registration
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
  return std::make_shared<facebook::react::Native<YourProjectName>SpecJSI>(params);
}

+ (NSString *)moduleName
{
  return @"<YourProjectName>";
}

@end
```

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

### Local library dependency using npm

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/create.md

When using npm, a local library is typically linked using the `file:` protocol, creating a symlink in `node_modules` for autolinking.

```json
"dependencies": {
  "react-native-awesome-library": "file:./modules/awesome-library"
}
```

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

### Configure Codegen Output and Includes

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Specify the output directory for generated code and enable 'includesGeneratedCode' within the 'codegenConfig' section of your package.json. This ensures generated files are properly handled.

```diff
"codegenConfig": {
    // …
   + "outputDir": {
   +   "ios": "ios/generated",
   +   "android": "android/generated"
   + },
   + "includesGeneratedCode": true
   }
```

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

### Lint Project Code

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Execute this command to verify that your code passes ESLint checks before submitting a pull request.

```sh
yarn lint
```

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

### Objective-C++ Wrapper for Swift Fabric View

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/swift-new-architecture.md

Update the generated Objective-C++ wrapper to import the Swift header and instantiate/use the Swift view implementation. Ensure the Swift header import is correctly configured.

```objective-c++
#import "<YourProjectName>View.h"

// Add the import for the generated Swift header
#if __has_include("<YourProjectName>/<YourProjectName>-Swift.h")
#import "<YourProjectName>/<YourProjectName>-Swift.h"
#else
#import "<YourProjectName>-Swift.h"
#endif

#import <React/RCTConversions.h>

#import <react/renderer/components/<YourProjectName>ViewSpec/ComponentDescriptors.h>
#import <react/renderer/components/<YourProjectName>ViewSpec/Props.h>
#import <react/renderer/components/<YourProjectName>ViewSpec/RCTComponentViewHelpers.h>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

// Declare a private property for the Swift view
@implementation <YourProjectName>View {
  <YourProjectName>ViewImpl *_view;
}

// Keep the boilerplate for Fabric registration
+ (ComponentDescriptorProvider)componentDescriptorProvider
{
  return concreteComponentDescriptorProvider<<YourProjectName>ViewComponentDescriptor>();
}

- (instancetype)initWithFrame:(CGRect)frame
{
  if (self = [super initWithFrame:frame]) {
    static const auto defaultProps =
        std::make_shared<const <YourProjectName>ViewProps>();
    _props = defaultProps;

    // Initialize the Swift view when the Fabric view is created
    _view = [<YourProjectName>ViewImpl new];

    self.contentView = _view;
  }

  return self;
}

- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
{
  const auto &oldViewProps =
      *std::static_pointer_cast<<YourProjectName>ViewProps const>(_props);
  const auto &newViewProps =
      *std::static_pointer_cast<<YourProjectName>ViewProps const>(props);

  if (oldViewProps.color != newViewProps.color) {
    // Call methods on the Swift view when props are updated
    // It may be necessary to convert some types before passing them to Swift
    [_view setColor:RCTUIColorFromSharedColor(newViewProps.color)];
  }

  [super updateProps:props oldProps:oldProps];
}

@end
```

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

### Custom Babel Configuration

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Extend the default Babel configuration by providing a custom config file. It's recommended to extend the default preset for correct target output.

```javascript
module.exports = {
  presets: ['react-native-builder-bob/babel-preset'],
};
```

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

### Configure C++ Library with CMake

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/nitro-common/android/CMakeLists.txt

This CMakeLists.txt file configures a C++ shared library for an Android project using React Native Builder Bob. It specifies the C++ standard, adds source files, includes local directories, and links against the Android log library and core Android functionalities.

```cmake
project(<%- project.package_cpp -%>)
cmake_minimum_required(VERSION 3.9.0)

set(PACKAGE_NAME <%- project.package_cpp -%>)
set(CMAKE_VERBOSE_MAKEFILE ON)
set(CMAKE_CXX_STANDARD 20)

# Define C++ library and add all sources
add_library(${PACKAGE_NAME} SHARED src/main/cpp/cpp-adapter.cpp)

# Add Nitrogen specs :)
include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/<%- project.package_cpp -%>+autolinking.cmake)

# Set up local includes
include_directories("src/main/cpp" "../cpp")

find_library(LOG_LIB log)

# Link all libraries together
target_link_libraries(
        ${PACKAGE_NAME}
        ${LOG_LIB}
        android # <-- Android core
)
```

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

### Add module field for ESM build

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Optionally, add the `module` field to specify the entry point for the ES Modules build, which some tools use as a non-standard indicator.

```diff
"module": "./lib/module/index.js"
```

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

### CommonJS Build Configuration

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Use this configuration to compile source files with Babel and output CommonJS modules. It transforms import/export statements to require/module.exports, useful for tools not yet supporting ES modules. The 'sourceMaps' option is set to false and 'copyFlow' is enabled.

```json
["commonjs", { "sourceMaps": false, "copyFlow": true }]
```

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

### Configure package.json for ESM and Exports

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Define `main`, `types`, and `exports` fields in `package.json` to ensure proper resolution of your library's entry points across different tools and environments. The `exports` field allows for conditional imports.

```json
"main": "./lib/module/index.js",
"types": "./lib/typescript/src/index.d.ts",
"exports": {
  ".": {
    "my-library-source": "./src/index.tsx",
    "types": "./lib/typescript/src/index.d.ts",
    "default": "./lib/module/index.js"
  },
  "./package.json": "./package.json"
}
```

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

### TypeScript Configuration for Custom Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

This JSON configuration shows how to set up TypeScript's 'compilerOptions' to resolve modules using custom conditions, such as 'module'. This is useful when TypeScript needs to be aware of the specific conditions defined in package.json exports.

```json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "customConditions": ["module"]
  }
}
```

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

### Fix Formatting Errors

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Run this command to automatically fix formatting errors identified by ESLint.

```sh
yarn lint --fix
```

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

### Type Check Project Code

Source: https://github.com/callstack/react-native-builder-bob/blob/main/README.md

Run this command to verify that your code passes TypeScript checks before submitting a pull request.

```sh
yarn typecheck
```

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

### Separate Exports Conditions for React Native, Import, and Require

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Shows how to define separate `react-native`, `import`, and `require` conditions within the package `exports`.

```json
"exports": {
  ".": {
    "react-native": {
      "types": "./lib/typescript/module/src/index.native.d.ts",
      "default": "./lib/module/index.native.js"
    },
    "import": {
      "types": "./lib/typescript/module/src/index.d.ts",
      "default": "./lib/module/index.js"
    },
    "require": {
      "types": "./lib/typescript/commonjs/src/index.d.ts",
      "default": "./lib/commonjs/index.js"
    }
  },
}
```

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

### Configure Jest Module Path Ignore

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Add the output directory to Jest's modulePathIgnorePatterns to avoid testing generated files.

```json
"modulePathIgnorePatterns": ["<rootDir>/lib/"]
```

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

### Local library dependency using Yarn

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/create.md

When using Yarn, a local library is typically linked using the `link:` protocol, creating a symlink in `node_modules` for autolinking.

```json
"dependencies": {
  "react-native-awesome-library": "link:./modules/awesome-library"
}
```

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

### Configure react-native.config.js for Android Codegen

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Set up the 'react-native.config.js' file at the project root to specify the 'cmakeListsPath' for Android. This ensures Gradle correctly locates the CMakeLists.txt file generated by the codegen script.

```javascript
/**
 * @type {import('@react-native-community/cli-types').UserDependencyConfig}
 */
module.exports = {
  dependency: {
    platforms: {
      android: {
        cmakeListsPath: 'generated/jni/CMakeLists.txt',
      },
    },
  },
};

```

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

### Update package.json main field for CommonJS

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Optionally, set the `main` field to point to the CommonJS build to support older tools that do not use the `exports` field.

```diff
"main": "./lib/commonjs/index.js"
```

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

### Usage with Utility Function

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/README.md

Import and use a utility function (e.g., multiply) from the library in your React Native application.

```js
import { multiply } from '<%- project.slug -%>'

// ...

const result = multiply(3, 7);
```

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

### Configure TypeScript customConditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Add your custom condition (e.g., `"my-library-source"`) to `compilerOptions.customConditions` in `tsconfig.json` to enable TypeScript to resolve the source condition defined in `package.json`.

```json
{
  "compilerOptions": {
    "customConditions": ["my-library-source"]
  }
}
```

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

### Configure package.json Exports for Dual Modules

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Update the `exports` field in `package.json` to specify separate entry points for ESM (`import`) and CommonJS (`require`) modules, including type definitions for each.

```diff
"exports": {
  ".": {
    "import": {
      "types": "./lib/typescript/module/src/index.d.ts",
      "default": "./lib/module/index.js"
    },
    "require": {
      "types": "./lib/typescript/commonjs/src/index.d.ts",
      "default": "./lib/commonjs/index.js"
    }
  }
},

```

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

### Configure Jest for Custom Export Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Add your custom condition (e.g., `"my-library-source"`) to `testEnvironmentOptions.customExportConditions` in your Jest configuration. Include React Native's default conditions as well.

```json
{
  "jest": {
    "preset": "@react-native/jest-preset",
    "testEnvironmentOptions": {
      "customExportConditions": ["require", "react-native", "my-library-source"]
    }
  }
}
```

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

### Update Turbo Module Imports for Codegen

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Modify your iOS Turbo Module import statements to reflect the new path for generated code. Replace 'YourProjectNameSpec.h' with '<YourProjectName>/YourProjectNameSpec.h'.

```diff
- #import <YourProjectNameSpec/YourProjectNameSpec.h>
+ #import <YourProjectName/YourProjectNameSpec.h>
```

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

### Usage with View Component

Source: https://github.com/callstack/react-native-builder-bob/blob/main/packages/create-react-native-library/templates/common/README.md

Import and use the View component from the library in your React Native application.

```js
import { <%- project.name -%>View } from "<%- project.slug -%>"

// ...

<<%- project.name -%>View color="tomato" />
```

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

### Exclude Files Pattern

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Specify a glob pattern to exclude files during the build process. This option is applicable for 'commonjs' and 'module' targets.

```json
{
  "exclude": "ignore_me/**"
}
```

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

### Configure Vite for Custom Export Conditions

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Add your custom condition (e.g., `['my-library-source']`) to the `resolve.conditions` array in your Vite configuration file (`vite.config.ts`).

```typescript
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    conditions: ['my-library-source'],
  },
});
```

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

### Add Output Directory to .gitignore

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Prevent generated files in the output directory from being committed to git.

```sh
# generated files by bob
lib/
```

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

### Configure Yarn Modern with Node Modules Linker

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

To ensure compatibility with Yarn Modern and React Native projects, configure the node-modules linker by adding this to your .yarnrc.yml file.

```yml
nodeLinker: node-modules

```

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

### Add CommonJS Target to react-native-builder-bob

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Include the `commonjs` target in your `package.json` or `bob.config.js` to enable building for the CommonJS module system alongside ESM.

```diff
"react-native-builder-bob": {
  "source": "src",
  "output": "lib",
  "targets": [
    ["module", { "esm": true }],
    ["commonjs", { "esm": true }]
    "typescript"
  ]
}
```

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

### Add Codegen Target to package.json

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Include the 'codegen' target in your package.json to enable scaffold code generation during the build process. This is typically done within the 'targets' array.

```diff
"source": "src",
    "output": "lib",
    "targets": [
      // …
   +  "codegen"
    ]
```

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

### TypeScript Type Definitions Configuration

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Configure TypeScript to generate type definitions. This snippet specifies a custom tsconfig.json file named 'tsconfig.build.json' for generating type definitions. It's useful for projects requiring specific configurations for type generation.

```json
["typescript", { "project": "tsconfig.build.json" }]
```

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

### Disable Yarn Workspaces

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/faq.md

To suppress the Yarn 1 workspace warning, consumers can disable workspaces by adding this configuration to their .yarnrc file.

```sh
workspaces-experimental false

```

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

### Update package.json types field for CommonJS

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/esm.md

Optionally, update the `types` field to point to the CommonJS type definitions to support legacy TypeScript configurations.

```diff
"types": "./lib/typescript/commonjs/src/index.d.ts"
```

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

### Conditional CommonJS Transform

Source: https://github.com/callstack/react-native-builder-bob/blob/main/docs/pages/build.md

Conditionally enable or disable the CommonJS transform based on the Babel API caller. This ensures correct output for ES modules or CommonJS.

```javascript
module.exports = (api) => {
  const isCommonJSTransformDisabled = api.caller(
    // If `supportsStaticESM` is `true`, output ES modules, otherwise output CommonJS
    (caller) => caller && caller.supportsStaticESM
  );

  return {
    // Your config here
  };
};
```

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