diff --git a/404.html b/404.html index 26c0f598f..930571be5 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file +404: This page could not be found

404

This page could not be found.

\ No newline at end of file diff --git a/_next/static/U1zPaQCI02maTxoJrPxcb/_buildManifest.js b/_next/static/U1zPaQCI02maTxoJrPxcb/_buildManifest.js deleted file mode 100644 index d18694d2a..000000000 --- a/_next/static/U1zPaQCI02maTxoJrPxcb/_buildManifest.js +++ /dev/null @@ -1 +0,0 @@ -self.__BUILD_MANIFEST=function(s,e){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,e,"static/chunks/pages/index-f3079f6cc42897d7.js"],"/_error":["static/chunks/pages/_error-c26e849581894657.js"],"/build":[s,e,"static/chunks/pages/build-414024c6cf0fd901.js"],"/create":[s,e,"static/chunks/pages/create-831179bbc074cd27.js"],"/faq":[s,e,"static/chunks/pages/faq-030d45325c4ab8c5.js"],sortedPages:["/","/_app","/_error","/build","/create","/faq"]}}("static/css/445c4173ffc2bf04.css","static/chunks/571-1ed7697133334290.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/Uf0TsjB68vBlb_oydV0Bw/_buildManifest.js b/_next/static/Uf0TsjB68vBlb_oydV0Bw/_buildManifest.js new file mode 100644 index 000000000..4c485ec15 --- /dev/null +++ b/_next/static/Uf0TsjB68vBlb_oydV0Bw/_buildManifest.js @@ -0,0 +1 @@ +self.__BUILD_MANIFEST=function(e,s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[e,s,"static/chunks/pages/index-0502346c6ec49844.js"],"/_error":["static/chunks/pages/_error-c26e849581894657.js"],"/build":[e,s,"static/chunks/pages/build-233edb7eb31e2744.js"],"/create":[e,s,"static/chunks/pages/create-da5ac0d63eedd0dd.js"],"/faq":[e,s,"static/chunks/pages/faq-f9a27697f2b61b13.js"],sortedPages:["/","/_app","/_error","/build","/create","/faq"]}}("static/css/445c4173ffc2bf04.css","static/chunks/571-1ed7697133334290.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/U1zPaQCI02maTxoJrPxcb/_ssgManifest.js b/_next/static/Uf0TsjB68vBlb_oydV0Bw/_ssgManifest.js similarity index 100% rename from _next/static/U1zPaQCI02maTxoJrPxcb/_ssgManifest.js rename to _next/static/Uf0TsjB68vBlb_oydV0Bw/_ssgManifest.js diff --git a/_next/static/chunks/nextra-data-en-US.json b/_next/static/chunks/nextra-data-en-US.json index 4ea779898..6ee0c1162 100644 --- a/_next/static/chunks/nextra-data-en-US.json +++ b/_next/static/chunks/nextra-data-en-US.json @@ -1 +1 @@ -{"/build":{"title":"Build a React Native library","data":{"":"react-native-builder-bob can compile JavaScript and TypeScript code in your React Native library for following targets:\nGeneric CommonJS build\nES modules build for bundlers such as webpack\nFlow definitions (copies .js files to .flow files)\nTypeScript definitions (uses tsc to generate declaration files)\nIf you created a project with create-react-native-library, react-native-builder-bob is already pre-configured to build your project. You don't need to configure it again.The following configuration steps are for projects not created with create-react-native-library.","automatic-configuration#Automatic configuration":"To automatically configure your project to use react-native-builder-bob, open a Terminal and run:\nnpx react-native-builder-bob@latest init","manual-configuration#Manual configuration":"To configure your project manually, follow these steps:\nFirst, install react-native-builder-bob in your project. Open a Terminal in your project, and run:\nyarn add --dev react-native-builder-bob\nIn your package.json, specify the targets to build for:\n\"react-native-builder-bob\": {\n \"source\": \"src\",\n \"output\": \"lib\",\n \"targets\": [\n \"commonjs\",\n \"module\",\n \"typescript\",\n ]\n}\nSee options below for more details.\nAdd bob to your prepare or prepack step:\n\"scripts\": {\n \"prepare\": \"bob build\"\n}\nConfigure the appropriate entry points:\n\"main\": \"lib/commonjs/index.js\",\n\"module\": \"lib/module/index.js\",\n\"react-native\": \"src/index.ts\",\n\"types\": \"lib/typescript/src/index.d.ts\",\n\"source\": \"src/index.ts\",\n\"files\": [\n \"lib\",\n \"src\"\n]\nHere is what each of these fields mean:\nmain: The entry point for the commonjs build. This is used by Node - such as tests, SSR etc.\nmodule: The entry point for the ES module build. This is used by bundlers such as webpack.\nreact-native: The entry point for the React Native apps. This is used by Metro. It's common to point to the source code here as it can make debugging easier.\ntypes: The entry point for the TypeScript definitions. This is used by TypeScript to type check the code using your library.\nsource: The path to the source code. It is used by react-native-builder-bob to detect the correct output files and provide better error messages.\nfiles: The files to include in the package when publishing with npm.\nMake sure to change specify correct files according to the targets you have enabled.NOTE: If you're building TypeScript definition files, also make sure that the types field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. lib/typescript/index.d.ts if you have only the src directory and rootDir is not set).\nAdd the output directory to .gitignore and .eslintignore\n# generated files by bob\nlib/\nAdd the output directory to jest.modulePathIgnorePatterns if you use Jest\n\"modulePathIgnorePatterns\": [\"/lib/\"]\nAnd we're done 🎉","options#Options":"The options can be specified in the package.json file under the react-native-builder-bob property, or in a bob.config.js file in your project directory.","source#source":"The name of the folder with the source code which should be compiled. The folder should include an index file.","output#output":"The name of the folder where the compiled files should be output to. It will contain separate folder for each target.","exclude#exclude":"Glob pattern to be used while filtering the unnecessary files. Defaults to '**/{__tests__,__fixtures__,__mocks__}/**' if you don't specify it.\nThis option only works with commonjs and module targets. To exclude files while building typescript, please see the tsconfig exclude field.\nExample:\n{\n \"exclude\": \"ignore_me/**\"\n}","targets#targets":"Various targets to build for. The available targets are:","commonjs#commonjs":"Enable compiling source files with Babel and use commonjs module system.This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the main field of package.json.By default, the code is compiled to support last 2 versions of modern browsers. It also strips TypeScript and Flow annotations, and compiles JSX. You can customize the environments to compile for by using a browserslist config.In addition, the following options are supported:\nconfigFile & babelrc (boolean): To customize the babel config used, you can pass the configFile option as true if you have a babel.config.js or babelrc option if you have a .babelrc. This may break the default configuration, so use these options only if you know what you're doing.\ncopyFlow (boolean): If your source code is written in Flow, You can specify the copyFlow option to copy the source files as .js.flow to the output folder. If the main entry in package.json points to the index file in the output folder, the flow type checker will pick these files up to use for type definitions.\nsourceMaps (boolean): Sourcemaps are generated by default alongside the compiled files. You can disable them by setting the sourceMaps option to false.\nExample:\n[\"commonjs\", { \"configFile\": true, \"copyFlow\": true }]","module#module":"Enable compiling source files with Babel and use ES module system. This is essentially same as the commonjs target and accepts the same options, but leaves the import/export statements in your code.This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the module field of package.json.Example:\n[\"module\", { \"configFile\": true }]","typescript#typescript":"Enable generating type definitions with tsc if your source code is written in TypeScript.The following options are supported:\nproject (string): By default, the tsconfig.json file in the root of your project is used to generate the type definitions. You can specify a path to a different config by using the project option. This can be useful if you need to use different configs for development and production.\ntsc (string): The path to the tsc binary is automatically detected and defaults to the one installed in your project. You can use the tsc option to specify a different path.\nExample:\n[\"typescript\", { \"project\": \"tsconfig.build.json\" }]","commands#Commands":"The bob CLI exposes the following commands:","init#init":"This configures an existing project to use bob by adding the required configuration and dependencies. This is usually run with npx:\nnpx react-native-builder-bob@latest init","build#build":"This builds the project according to the configuration. This is usually run as part of the package's publishing flow, i.e. in the prepare or prepack scripts.\n\"scripts\": {\n \"prepare\": \"bob build\"\n}"}},"/create":{"title":"Scaffold a React Native library","data":{"features#Features":"If you want to create your own React Native library, scaffolding the project can be a daunting task. create-react-native-library can scaffold a new project for you with the following things:\nMinimal boilerplate modules on which you can build upon\nExample React Native app to test your modules\nTypeScript to ensure type-safe code and better DX\nSupport for Turbo Modules & Fabric\nSupport for Kotlin on Android & Swift on iOS\nSupport for C++ to write cross-platform native code\nExpo for libraries without native code and web support\nESLint, Prettier, TypeScript, Lefthook and Release It pre-configured\nreact-native-builder-bob pre-configured to compile your files\nGitHub Actions pre-configured to run tests and lint on the CI","usage#Usage":"To create new project, run the following:\nnpx create-react-native-library@latest awesome-library\nThis will ask you few questions about your project and generate a new project in a folder named awesome-library.After the project is created, you can find the development workflow in the generated CONTRIBUTING.md file."}},"/faq":{"title":"Frequently Asked Questions","data":{"why-should-i-compile-my-project-with-react-native-builder-bob#Why should I compile my project with react-native-builder-bob?":"We write our library code in non-standard syntaxes such as JSX, TypeScript etc. as well as proposed syntaxes which aren't part of the standard yet. This means that our code needs to be compiled to be able to run on JavaScript engines.When using the library in a React Native app, Metro handles compiling the source code. However, it's also possible to use them in other targets such as web, run in Node for tests or SSR etc. So we need to compile the source code for them as well.Currently, to handle such multiple targets, we need to have multiple babel configs and write a long babel-cli command in our package.json. We also need to keep the configs in sync between our projects.Just as an example, this is a command we have in one of the packages: 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. This isn't all, there's even a separate babel.config.publish.js file. And this only works for webpack and Metro, and will fail on Node due to ESM usage.react-native-builder-bob wraps tools such as babel and typescript to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required.","how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library#How do I add a react-native library containing native code as a dependency in my library?":"If your library depends on another react-native library containing native code, you should do the following:\nAdd the native library to peerDependenciesThis means that the consumer of the library will need to install the native library and add it to the dependencies section of their package.json. It makes sure that:\nThere are no version conflicts if another package also happens to use the same library, or if the user wants to use the library in their app. While there can be multiple versions of a JavaScript-only library, there can only be one version of a native library - so avoiding version conflicts is important.\nThe package manager installs it in correct location so that autolinking can work properly.\nDon't add the native library to dependencies of your library, otherwise it may cause issues for the user even if it seems to work.\nAdd the native library to devDependenciesThis makes sure that you can use it for tests, and there are no other errors such as type errors due to the missing module.\nAdd the native library to dependencies in the package.json under exampleThis is equivalent to the consumer of the library installing the dependency, and is needed so that this module is also available to the example app.","how-to-upgrade-the-react-native-version-in-the-generated-project#How to upgrade the react-native version in the generated project?":"Since this is a library, the react-native version specified in the package.json is not relevant for the consumers. It's only used for developing and testing the library. If you'd like to upgrade the react-native version to test with it, you'd need to:\nBump versions of the following packages under devDependencies in the package.json:\nreact-native\nreact\n@types/react\n@types/react-native\nIf you have any other related packages such as react-test-renderer, make sure to bump them as well.\nUpgrade react-native in the example app.The example app is a React Native app that can be updated following the same process as a regular React Native app. The process will vary depending on if it's using Expo or React Native CLI. See the official upgrade guide for more details.\nTo avoid issues, make sure that the versions of react and react-native are the same in example/package.json and the package.json at the root.","how-does-the-library-get-linked-to-the-example-app-in-the-generated-project#How does the library get linked to the example app in the generated project?":"If you generate a project with create-react-native-library, you get an example app to test your library. It's good to understand how the library gets linked to the example app in case you want to tweak how it works or if you run into issues.There are 2 parts to this process.\nAliasing the JavaScript codeThe JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from 'your-library-name', it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:\nBabel is configured to use the alias in example/babel.config.js using babel-plugin-module-resolver. This transforms the imports to point to the source code instead.\nMetro is configured to allow importing from outside of the example directory by configuring watchFolders, and to use the appropriate peer dependencies. This configuration exists in the example/metro.config.js file.\nWebpack is configured to compile the library source code when running on the Web. This configuration exists in the example/webpack.config.js file.\nTypeScript is configured to use the source code for type checking by using the paths property under compilerOptions. This configuration exists in the tsconfig.json file at the root.\nLinking the native codeBy default, React Native CLI only links the modules installed under node_module of the app. To be able to link the android and ios folders from the project root, the path is specified in the example/react-native.config.js file.","how-to-test-the-library-in-an-app-locally#How to test the library in an app locally?":"You may have come across the yarn link and npm link commands to test libraries locally. These commands work great for simple packages without build process, but they have different behavior from how a published package works.For more accurate testing, we recommend following approaches:\nLocal tarball with npmFirst, temporarily change the version in package.json to something like 0.0.0-local.0. This version number needs to be updated to something different every time you do this to avoid stale content.Run the following command inside your library's root:\nnpm pack\nThis will generate a file like your-library-name-0.0.0-local.0.tgz in the root of the project.Then, you can install the tarball in your app:\nyarn add ../path/to/your-library-name-0.0.0-local.0.tgz\nOr if you use npm:\nnpm install ../path/to/your-library-name-0.0.0-local.0.tgz\nVerdaccioVerdaccio is a lightweight private npm registry that can be used to test packages locally. The advantage of using Verdaccio is that it allows to test the complete workflow of publishing and installing a package without actually publishing it to a remote registry.You can find installation and usage instructions in the Verdaccio documentation.","users-get-a-warning-when-they-install-my-library#Users get a warning when they install my library":"If users are using Yarn 1, they may get a warning when installing your library:\nwarning Workspaces can only be enabled in private projects.\nThis is because the example app is configured as a Yarn workspace, and there is a bug in Yarn 1 which causes this warning to be shown for third-party packages. It has no impact for the consumers of the library and the warning can be ignored. If consumers would like to get rid of the warning, there are 2 options:\nDisable workspacesIf the consumer doesn't use Yarn workspaces, they can disable it by adding the following to the .yarnrc file in the root of their project:\nworkspaces-experimental false\nUpgrade to Yarn 3Yarn 1 is no longer maintained, so it's recommended to upgrade to Yarn 3. Yarn 3 works with React Native projects with the node-modules linker. To upgrade, consumers can follow the official upgrade guide.It's also necessary to use node-modules linker. To use it, consumers can add the following to the .yarnrc.yml file in the root of their project:\nnodeLinker: node-modules"}},"/":{"title":"Bob","data":{"":"This project is a collection of CLIs to make it easier to build React Native libraries. It contains the following CLIs:\ncreate-react-native-library - a CLI to scaffold a React Native library.\nreact-native-bundle-bob - a CLI to build React Native libraries for various targets."}}} \ No newline at end of file +{"/build":{"title":"Build a React Native library","data":{"":"react-native-builder-bob can compile JavaScript and TypeScript code in your React Native library for following targets:\nGeneric CommonJS build\nES modules build for bundlers such as webpack\nFlow definitions (copies .js files to .flow files)\nTypeScript definitions (uses tsc to generate declaration files)\nIf you created a project with create-react-native-library, react-native-builder-bob is already pre-configured to build your project. You don't need to configure it again.The following configuration steps are for projects not created with create-react-native-library.","automatic-configuration#Automatic configuration":"To automatically configure your project to use react-native-builder-bob, open a Terminal and run:\nnpx react-native-builder-bob@latest init","manual-configuration#Manual configuration":"To configure your project manually, follow these steps:\nFirst, install react-native-builder-bob in your project. Open a Terminal in your project, and run:\nyarn add --dev react-native-builder-bob\nIn your package.json, specify the targets to build for:\n\"react-native-builder-bob\": {\n \"source\": \"src\",\n \"output\": \"lib\",\n \"targets\": [\n \"commonjs\",\n \"module\",\n \"typescript\",\n ]\n}\nSee options below for more details.\nAdd bob to your prepare or prepack step:\n\"scripts\": {\n \"prepare\": \"bob build\"\n}\nConfigure the appropriate entry points:\n\"main\": \"lib/commonjs/index.js\",\n\"module\": \"lib/module/index.js\",\n\"react-native\": \"src/index.ts\",\n\"types\": \"lib/typescript/src/index.d.ts\",\n\"source\": \"src/index.ts\",\n\"files\": [\n \"lib\",\n \"src\"\n]\nHere is what each of these fields mean:\nmain: The entry point for the commonjs build. This is used by Node - such as tests, SSR etc.\nmodule: The entry point for the ES module build. This is used by bundlers such as webpack.\nreact-native: The entry point for the React Native apps. This is used by Metro. It's common to point to the source code here as it can make debugging easier.\ntypes: The entry point for the TypeScript definitions. This is used by TypeScript to type check the code using your library.\nsource: The path to the source code. It is used by react-native-builder-bob to detect the correct output files and provide better error messages.\nfiles: The files to include in the package when publishing with npm.\nMake sure to change specify correct files according to the targets you have enabled.NOTE: If you're building TypeScript definition files, also make sure that the types field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. lib/typescript/index.d.ts if you have only the src directory and rootDir is not set).\nAdd the output directory to .gitignore and .eslintignore\n# generated files by bob\nlib/\nAdd the output directory to jest.modulePathIgnorePatterns if you use Jest\n\"modulePathIgnorePatterns\": [\"/lib/\"]\nAnd we're done 🎉","options#Options":"The options can be specified in the package.json file under the react-native-builder-bob property, or in a bob.config.js file in your project directory.","source#source":"The name of the folder with the source code which should be compiled. The folder should include an index file.","output#output":"The name of the folder where the compiled files should be output to. It will contain separate folder for each target.","exclude#exclude":"Glob pattern to be used while filtering the unnecessary files. Defaults to '**/{__tests__,__fixtures__,__mocks__}/**' if you don't specify it.\nThis option only works with commonjs and module targets. To exclude files while building typescript, please see the tsconfig exclude field.\nExample:\n{\n \"exclude\": \"ignore_me/**\"\n}","targets#targets":"Various targets to build for. The available targets are:","commonjs#commonjs":"Enable compiling source files with Babel and use commonjs module system.This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the main field of package.json.By default, the code is compiled to support last 2 versions of modern browsers. It also strips TypeScript and Flow annotations, and compiles JSX. You can customize the environments to compile for by using a browserslist config.In addition, the following options are supported:\nconfigFile & babelrc (boolean): To customize the babel config used, you can pass the configFile option as true if you have a babel.config.js or babelrc option if you have a .babelrc. This may break the default configuration, so use these options only if you know what you're doing.\ncopyFlow (boolean): If your source code is written in Flow, You can specify the copyFlow option to copy the source files as .js.flow to the output folder. If the main entry in package.json points to the index file in the output folder, the flow type checker will pick these files up to use for type definitions.\nsourceMaps (boolean): Sourcemaps are generated by default alongside the compiled files. You can disable them by setting the sourceMaps option to false.\nExample:\n[\"commonjs\", { \"configFile\": true, \"copyFlow\": true }]","module#module":"Enable compiling source files with Babel and use ES module system. This is essentially same as the commonjs target and accepts the same options, but leaves the import/export statements in your code.This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the module field of package.json.Example:\n[\"module\", { \"configFile\": true }]","typescript#typescript":"Enable generating type definitions with tsc if your source code is written in TypeScript.The following options are supported:\nproject (string): By default, the tsconfig.json file in the root of your project is used to generate the type definitions. You can specify a path to a different config by using the project option. This can be useful if you need to use different configs for development and production.\ntsc (string): The path to the tsc binary is automatically detected and defaults to the one installed in your project. You can use the tsc option to specify a different path.\nExample:\n[\"typescript\", { \"project\": \"tsconfig.build.json\" }]","commands#Commands":"The bob CLI exposes the following commands:","init#init":"This configures an existing project to use bob by adding the required configuration and dependencies. This is usually run with npx:\nnpx react-native-builder-bob@latest init","build#build":"This builds the project according to the configuration. This is usually run as part of the package's publishing flow, i.e. in the prepare or prepack scripts.\n\"scripts\": {\n \"prepare\": \"bob build\"\n}"}},"/create":{"title":"Scaffold a React Native library","data":{"":"If you want to create your own React Native library, scaffolding the project can be a daunting task. create-react-native-library can scaffold a new project for you with all the necessary tools configured.","features#Features":"Minimal boilerplate modules on which you can build upon\nExample React Native app to test your modules\nTypeScript to ensure type-safe code and better DX\nSupport for Turbo Modules & Fabric\nSupport for Kotlin on Android & Swift on iOS\nSupport for C++ to write cross-platform native code\nExpo for libraries without native code and web support\nESLint, Prettier, TypeScript, Lefthook and Release It pre-configured\nreact-native-builder-bob pre-configured to compile your files\nGitHub Actions pre-configured to run tests and lint on the CI","usage#Usage":"To create new project, run the following:\nnpx create-react-native-library@latest awesome-library\nThis will ask you few questions about your project and generate a new project in a folder named awesome-library.After the project is created, you can find the development workflow in the generated CONTRIBUTING.md file."}},"/faq":{"title":"Frequently Asked Questions","data":{"why-should-i-compile-my-project-with-react-native-builder-bob#Why should I compile my project with react-native-builder-bob?":"We write our library code in non-standard syntaxes such as JSX, TypeScript etc. as well as proposed syntaxes which aren't part of the standard yet. This means that our code needs to be compiled to be able to run on JavaScript engines.When using the library in a React Native app, Metro handles compiling the source code. However, it's also possible to use them in other targets such as web, run in Node for tests or SSR etc. So we need to compile the source code for them as well.Currently, to handle such multiple targets, we need to have multiple babel configs and write a long babel-cli command in our package.json. We also need to keep the configs in sync between our projects.Just as an example, this is a command we have in one of the packages: 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. This isn't all, there's even a separate babel.config.publish.js file. And this only works for webpack and Metro, and will fail on Node due to ESM usage.react-native-builder-bob wraps tools such as babel and typescript to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required.","how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library#How do I add a react-native library containing native code as a dependency in my library?":"If your library depends on another react-native library containing native code, you should do the following:\nAdd the native library to peerDependenciesThis means that the consumer of the library will need to install the native library and add it to the dependencies section of their package.json. It makes sure that:\nThere are no version conflicts if another package also happens to use the same library, or if the user wants to use the library in their app. While there can be multiple versions of a JavaScript-only library, there can only be one version of a native library - so avoiding version conflicts is important.\nThe package manager installs it in correct location so that autolinking can work properly.\nDon't add the native library to dependencies of your library, otherwise it may cause issues for the user even if it seems to work.\nAdd the native library to devDependenciesThis makes sure that you can use it for tests, and there are no other errors such as type errors due to the missing module.\nAdd the native library to dependencies in the package.json under exampleThis is equivalent to the consumer of the library installing the dependency, and is needed so that this module is also available to the example app.","how-to-upgrade-the-react-native-version-in-the-generated-project#How to upgrade the react-native version in the generated project?":"Since this is a library, the react-native version specified in the package.json is not relevant for the consumers. It's only used for developing and testing the library. If you'd like to upgrade the react-native version to test with it, you'd need to:\nBump versions of the following packages under devDependencies in the package.json:\nreact-native\nreact\n@types/react\n@types/react-native\nIf you have any other related packages such as react-test-renderer, make sure to bump them as well.\nUpgrade react-native in the example app.The example app is a React Native app that can be updated following the same process as a regular React Native app. The process will vary depending on if it's using Expo or React Native CLI. See the official upgrade guide for more details.\nTo avoid issues, make sure that the versions of react and react-native are the same in example/package.json and the package.json at the root.","how-does-the-library-get-linked-to-the-example-app-in-the-generated-project#How does the library get linked to the example app in the generated project?":"If you generate a project with create-react-native-library, you get an example app to test your library. It's good to understand how the library gets linked to the example app in case you want to tweak how it works or if you run into issues.There are 2 parts to this process.\nAliasing the JavaScript codeThe JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from 'your-library-name', it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:\nBabel is configured to use the alias in example/babel.config.js using babel-plugin-module-resolver. This transforms the imports to point to the source code instead.\nMetro is configured to allow importing from outside of the example directory by configuring watchFolders, and to use the appropriate peer dependencies. This configuration exists in the example/metro.config.js file.\nWebpack is configured to compile the library source code when running on the Web. This configuration exists in the example/webpack.config.js file.\nTypeScript is configured to use the source code for type checking by using the paths property under compilerOptions. This configuration exists in the tsconfig.json file at the root.\nLinking the native codeBy default, React Native CLI only links the modules installed under node_module of the app. To be able to link the android and ios folders from the project root, the path is specified in the example/react-native.config.js file.","how-to-test-the-library-in-an-app-locally#How to test the library in an app locally?":"You may have come across the yarn link and npm link commands to test libraries locally. These commands work great for simple packages without build process, but they have different behavior from how a published package works.For more accurate testing, we recommend following approaches:\nLocal tarball with npmFirst, temporarily change the version in package.json to something like 0.0.0-local.0. This version number needs to be updated to something different every time you do this to avoid stale content.Run the following command inside your library's root:\nnpm pack\nThis will generate a file like your-library-name-0.0.0-local.0.tgz in the root of the project.Then, you can install the tarball in your app:\nyarn add ../path/to/your-library-name-0.0.0-local.0.tgz\nOr if you use npm:\nnpm install ../path/to/your-library-name-0.0.0-local.0.tgz\nVerdaccioVerdaccio is a lightweight private npm registry that can be used to test packages locally. The advantage of using Verdaccio is that it allows to test the complete workflow of publishing and installing a package without actually publishing it to a remote registry.You can find installation and usage instructions in the Verdaccio documentation.","users-get-a-warning-when-they-install-my-library#Users get a warning when they install my library":"If users are using Yarn 1, they may get a warning when installing your library:\nwarning Workspaces can only be enabled in private projects.\nThis is because the example app is configured as a Yarn workspace, and there is a bug in Yarn 1 which causes this warning to be shown for third-party packages. It has no impact for the consumers of the library and the warning can be ignored. If consumers would like to get rid of the warning, there are 2 options:\nDisable workspacesIf the consumer doesn't use Yarn workspaces, they can disable it by adding the following to the .yarnrc file in the root of their project:\nworkspaces-experimental false\nUpgrade to Yarn 3Yarn 1 is no longer maintained, so it's recommended to upgrade to Yarn 3. Yarn 3 works with React Native projects with the node-modules linker. To upgrade, consumers can follow the official upgrade guide.It's also necessary to use node-modules linker. To use it, consumers can add the following to the .yarnrc.yml file in the root of their project:\nnodeLinker: node-modules"}},"/":{"title":"Bob","data":{"":"This project is a collection of CLIs to make it easier to build React Native libraries. It contains the following CLIs:\ncreate-react-native-library - a CLI to scaffold a React Native library.\nreact-native-bundle-bob - a CLI to build React Native libraries for various targets."}}} \ No newline at end of file diff --git a/_next/static/chunks/pages/build-414024c6cf0fd901.js b/_next/static/chunks/pages/build-233edb7eb31e2744.js similarity index 98% rename from _next/static/chunks/pages/build-414024c6cf0fd901.js rename to _next/static/chunks/pages/build-233edb7eb31e2744.js index f8312359e..02d0ffb27 100644 --- a/_next/static/chunks/pages/build-414024c6cf0fd901.js +++ b/_next/static/chunks/pages/build-233edb7eb31e2744.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[881],{7272:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/build",function(){return n(4956)}])},4956:function(e,s,n){"use strict";n.r(s),n.d(s,{__toc:function(){return c}});var i=n(4246),o=n(9304),r=n(2917),l=n(6282);n(6288);var t=n(1441);let c=[{depth:2,value:"Automatic configuration",id:"automatic-configuration"},{depth:2,value:"Manual configuration",id:"manual-configuration"},{depth:2,value:"Options",id:"options"},{depth:3,value:"source",id:"source"},{depth:3,value:"output",id:"output"},{depth:3,value:"exclude",id:"exclude"},{depth:4,value:"targets",id:"targets"},{depth:4,value:"commonjs",id:"commonjs"},{depth:4,value:"module",id:"module"},{depth:4,value:"typescript",id:"typescript"},{depth:2,value:"Commands",id:"commands"},{depth:3,value:"init",id:"init"},{depth:3,value:"build",id:"build"}];function a(e){let s=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",h2:"h2",pre:"pre",span:"span",ol:"ol",a:"a",h3:"h3",blockquote:"blockquote",h4:"h4"},(0,t.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{children:"Build a React Native library"}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," can compile JavaScript and TypeScript code in your React Native library for following targets:"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Generic CommonJS build"}),"\n",(0,i.jsx)(s.li,{children:"ES modules build for bundlers such as webpack"}),"\n",(0,i.jsx)(s.li,{children:"Flow definitions (copies .js files to .flow files)"}),"\n",(0,i.jsxs)(s.li,{children:["TypeScript definitions (uses ",(0,i.jsx)(s.code,{children:"tsc"})," to generate declaration files)"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["If you created a project with ",(0,i.jsx)(s.code,{children:"create-react-native-library"}),", ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," is ",(0,i.jsx)(s.strong,{children:"already pre-configured to build your project"}),". You don't need to configure it again."]}),"\n",(0,i.jsxs)(s.p,{children:["The following configuration steps are for projects not created with ",(0,i.jsx)(s.code,{children:"create-react-native-library"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"automatic-configuration",children:"Automatic configuration"}),"\n",(0,i.jsxs)(s.p,{children:["To automatically configure your project to use ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"}),", open a Terminal and run:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"npx react"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"native"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"builder"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"bob@latest init"})]})})}),"\n",(0,i.jsx)(s.h2,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,i.jsx)(s.p,{children:"To configure your project manually, follow these steps:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["First, install ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," in your project. Open a Terminal in your project, and run:"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--dev"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-builder-bob"})]})})}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["In your ",(0,i.jsx)(s.code,{children:"package.json"}),", specify the targets to build for:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-native-builder-bob"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"source"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"output"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"targets"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"commonjs"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"typescript"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(s.p,{children:"See options below for more details."}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add ",(0,i.jsx)(s.code,{children:"bob"})," to your ",(0,i.jsx)(s.code,{children:"prepare"})," or ",(0,i.jsx)(s.code,{children:"prepack"})," step:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prepare"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bob build"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsx)(s.p,{children:"Configure the appropriate entry points:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"main"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/commonjs/index.js"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/module/index.js"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-native"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src/index.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"types"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/typescript/src/index.d.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"source"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src/index.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"files"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": ["})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,i.jsx)(s.p,{children:"Here is what each of these fields mean:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"main"}),": The entry point for the commonjs build. This is used by Node - such as tests, SSR etc."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"module"}),": The entry point for the ES module build. This is used by bundlers such as webpack."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"react-native"}),": The entry point for the React Native apps. This is used by Metro. It's common to point to the source code here as it can make debugging easier."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"types"}),": The entry point for the TypeScript definitions. This is used by TypeScript to type check the code using your library."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"source"}),": The path to the source code. It is used by ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," to detect the correct output files and provide better error messages."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"files"}),": The files to include in the package when publishing with ",(0,i.jsx)(s.code,{children:"npm"}),"."]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Make sure to change specify correct files according to the targets you have enabled."}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"NOTE"}),": If you're building TypeScript definition files, also make sure that the ",(0,i.jsx)(s.code,{children:"types"})," field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. ",(0,i.jsx)(s.code,{children:"lib/typescript/index.d.ts"})," if you have only the ",(0,i.jsx)(s.code,{children:"src"})," directory and ",(0,i.jsx)(s.code,{children:"rootDir"})," is not set)."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add the output directory to ",(0,i.jsx)(s.code,{children:".gitignore"})," and ",(0,i.jsx)(s.code,{children:".eslintignore"})]}),"\n",(0,i.jsx)(s.pre,{"data-language":"gitignore","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"gitignore","data-theme":"default",children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"# generated files by bob"})}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"lib/"})})]})}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add the output directory to ",(0,i.jsx)(s.code,{children:"jest.modulePathIgnorePatterns"})," if you use ",(0,i.jsx)(s.a,{href:"https://jestjs.io",children:"Jest"})]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"modulePathIgnorePatterns"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": ["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/lib/"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"})]})})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"And we're done \uD83C\uDF89"}),"\n",(0,i.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,i.jsxs)(s.p,{children:["The options can be specified in the ",(0,i.jsx)(s.code,{children:"package.json"})," file under the ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," property, or in a ",(0,i.jsx)(s.code,{children:"bob.config.js"})," file in your project directory."]}),"\n",(0,i.jsx)(s.h3,{id:"source",children:(0,i.jsx)(s.code,{children:"source"})}),"\n",(0,i.jsxs)(s.p,{children:["The name of the folder with the source code which should be compiled. The folder should include an ",(0,i.jsx)(s.code,{children:"index"})," file."]}),"\n",(0,i.jsx)(s.h3,{id:"output",children:(0,i.jsx)(s.code,{children:"output"})}),"\n",(0,i.jsx)(s.p,{children:"The name of the folder where the compiled files should be output to. It will contain separate folder for each target."}),"\n",(0,i.jsx)(s.h3,{id:"exclude",children:(0,i.jsx)(s.code,{children:"exclude"})}),"\n",(0,i.jsxs)(s.p,{children:["Glob pattern to be used while filtering the unnecessary files. Defaults to ",(0,i.jsx)(s.code,{children:"'**/{__tests__,__fixtures__,__mocks__}/**'"})," if you don't specify it."]}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsxs)(s.p,{children:["This option only works with ",(0,i.jsx)(s.code,{children:"commonjs"})," and ",(0,i.jsx)(s.code,{children:"module"})," targets. To exclude files while building ",(0,i.jsx)(s.code,{children:"typescript"}),", please see ",(0,i.jsx)(s.a,{href:"https://www.typescriptlang.org/tsconfig#exclude",children:"the tsconfig exclude field"}),"."]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"exclude"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ignore_me/**"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(s.h4,{id:"targets",children:(0,i.jsx)(s.code,{children:"targets"})}),"\n",(0,i.jsx)(s.p,{children:"Various targets to build for. The available targets are:"}),"\n",(0,i.jsx)(s.h4,{id:"commonjs",children:(0,i.jsx)(s.code,{children:"commonjs"})}),"\n",(0,i.jsx)(s.p,{children:"Enable compiling source files with Babel and use commonjs module system."}),"\n",(0,i.jsxs)(s.p,{children:["This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the ",(0,i.jsx)(s.code,{children:"main"})," field of ",(0,i.jsx)(s.code,{children:"package.json"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["By default, the code is compiled to support last 2 versions of modern browsers. It also strips TypeScript and Flow annotations, and compiles JSX. You can customize the environments to compile for by using a ",(0,i.jsx)(s.a,{href:"https://github.com/browserslist/browserslist#config-file",children:"browserslist config"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"In addition, the following options are supported:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"configFile"})," & ",(0,i.jsx)(s.code,{children:"babelrc"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): To customize the babel config used, you can pass the ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/options#configfile",children:(0,i.jsx)(s.code,{children:"configFile"})})," option as ",(0,i.jsx)(s.code,{children:"true"})," if you have a ",(0,i.jsx)(s.code,{children:"babel.config.js"})," or ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/options#babelrc",children:(0,i.jsx)(s.code,{children:"babelrc"})})," option if you have a ",(0,i.jsx)(s.code,{children:".babelrc"}),". This may break the default configuration, so use these options only if you know what you're doing."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"copyFlow"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): If your source code is written in ",(0,i.jsx)(s.a,{href:"http://www.typescriptlang.org/",children:"Flow"}),", You can specify the ",(0,i.jsx)(s.code,{children:"copyFlow"})," option to copy the source files as ",(0,i.jsx)(s.code,{children:".js.flow"})," to the output folder. If the ",(0,i.jsx)(s.code,{children:"main"})," entry in ",(0,i.jsx)(s.code,{children:"package.json"})," points to the ",(0,i.jsx)(s.code,{children:"index"})," file in the output folder, the flow type checker will pick these files up to use for type definitions."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"sourceMaps"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): Sourcemaps are generated by default alongside the compiled files. You can disable them by setting the ",(0,i.jsx)(s.code,{children:"sourceMaps"})," option to ",(0,i.jsx)(s.code,{children:"false"}),"."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"commonjs"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"configFile"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"copyFlow"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h4,{id:"module",children:(0,i.jsx)(s.code,{children:"module"})}),"\n",(0,i.jsxs)(s.p,{children:["Enable compiling source files with Babel and use ES module system. This is essentially same as the ",(0,i.jsx)(s.code,{children:"commonjs"})," target and accepts the same options, but leaves the ",(0,i.jsx)(s.code,{children:"import"}),"/",(0,i.jsx)(s.code,{children:"export"})," statements in your code."]}),"\n",(0,i.jsxs)(s.p,{children:["This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the ",(0,i.jsx)(s.code,{children:"module"})," field of ",(0,i.jsx)(s.code,{children:"package.json"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"configFile"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h4,{id:"typescript",children:(0,i.jsx)(s.code,{children:"typescript"})}),"\n",(0,i.jsxs)(s.p,{children:["Enable generating type definitions with ",(0,i.jsx)(s.code,{children:"tsc"})," if your source code is written in ",(0,i.jsx)(s.a,{href:"http://www.typescriptlang.org/",children:"TypeScript"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"The following options are supported:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"project"})," (",(0,i.jsx)(s.code,{children:"string"}),"): By default, the ",(0,i.jsx)(s.code,{children:"tsconfig.json"})," file in the root of your project is used to generate the type definitions. You can specify a path to a different config by using the ",(0,i.jsx)(s.code,{children:"project"})," option. This can be useful if you need to use different configs for development and production."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"tsc"})," (",(0,i.jsx)(s.code,{children:"string"}),"): The path to the ",(0,i.jsx)(s.code,{children:"tsc"})," binary is automatically detected and defaults to the one installed in your project. You can use the ",(0,i.jsx)(s.code,{children:"tsc"})," option to specify a different path."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"typescript"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"project"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"tsconfig.build.json"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h2,{id:"commands",children:"Commands"}),"\n",(0,i.jsxs)(s.p,{children:["The ",(0,i.jsx)(s.code,{children:"bob"})," CLI exposes the following commands:"]}),"\n",(0,i.jsx)(s.h3,{id:"init",children:(0,i.jsx)(s.code,{children:"init"})}),"\n",(0,i.jsxs)(s.p,{children:["This configures an existing project to use ",(0,i.jsx)(s.code,{children:"bob"})," by adding the required configuration and dependencies. This is usually run with ",(0,i.jsx)(s.code,{children:"npx"}),":"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-builder-bob@latest"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"init"})]})})}),"\n",(0,i.jsx)(s.h3,{id:"build",children:(0,i.jsx)(s.code,{children:"build"})}),"\n",(0,i.jsxs)(s.p,{children:["This builds the project according to the configuration. This is usually run as part of the package's publishing flow, i.e. in the ",(0,i.jsx)(s.code,{children:"prepare"})," or ",(0,i.jsx)(s.code,{children:"prepack"})," scripts."]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"prepare"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bob build"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,t.a)(),e.components);return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)},pageOpts:{filePath:"pages/build.md",route:"/build",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Build a React Native library",headings:c},pageNextRoute:"/build",nextraLayout:r.ZP,themeConfig:l.Z};s.default=(0,o.j)(d)},6282:function(e,s,n){"use strict";var i=n(4246);n(7378),s.Z={logo:(0,i.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=7272)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[881],{7272:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/build",function(){return n(4956)}])},4956:function(e,s,n){"use strict";n.r(s),n.d(s,{__toc:function(){return c}});var i=n(4246),o=n(9304),r=n(2917),l=n(6282);n(6288);var t=n(1441);let c=[{depth:2,value:"Automatic configuration",id:"automatic-configuration"},{depth:2,value:"Manual configuration",id:"manual-configuration"},{depth:2,value:"Options",id:"options"},{depth:3,value:"source",id:"source"},{depth:3,value:"output",id:"output"},{depth:3,value:"exclude",id:"exclude"},{depth:4,value:"targets",id:"targets"},{depth:4,value:"commonjs",id:"commonjs"},{depth:4,value:"module",id:"module"},{depth:4,value:"typescript",id:"typescript"},{depth:2,value:"Commands",id:"commands"},{depth:3,value:"init",id:"init"},{depth:3,value:"build",id:"build"}];function a(e){let s=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",h2:"h2",pre:"pre",span:"span",ol:"ol",a:"a",h3:"h3",blockquote:"blockquote",h4:"h4"},(0,t.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h1,{children:"Build a React Native library"}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," can compile JavaScript and TypeScript code in your React Native library for following targets:"]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Generic CommonJS build"}),"\n",(0,i.jsx)(s.li,{children:"ES modules build for bundlers such as webpack"}),"\n",(0,i.jsx)(s.li,{children:"Flow definitions (copies .js files to .flow files)"}),"\n",(0,i.jsxs)(s.li,{children:["TypeScript definitions (uses ",(0,i.jsx)(s.code,{children:"tsc"})," to generate declaration files)"]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["If you created a project with ",(0,i.jsx)(s.code,{children:"create-react-native-library"}),", ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," is ",(0,i.jsx)(s.strong,{children:"already pre-configured to build your project"}),". You don't need to configure it again."]}),"\n",(0,i.jsxs)(s.p,{children:["The following configuration steps are for projects not created with ",(0,i.jsx)(s.code,{children:"create-react-native-library"}),"."]}),"\n",(0,i.jsx)(s.h2,{id:"automatic-configuration",children:"Automatic configuration"}),"\n",(0,i.jsxs)(s.p,{children:["To automatically configure your project to use ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"}),", open a Terminal and run:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"npx react"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"native"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"builder"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"bob@latest init"})]})})}),"\n",(0,i.jsx)(s.h2,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,i.jsx)(s.p,{children:"To configure your project manually, follow these steps:"}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["First, install ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," in your project. Open a Terminal in your project, and run:"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--dev"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-builder-bob"})]})})}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["In your ",(0,i.jsx)(s.code,{children:"package.json"}),", specify the targets to build for:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-native-builder-bob"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"source"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"output"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"targets"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"commonjs"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"typescript"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ]"})}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(s.p,{children:"See options below for more details."}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add ",(0,i.jsx)(s.code,{children:"bob"})," to your ",(0,i.jsx)(s.code,{children:"prepare"})," or ",(0,i.jsx)(s.code,{children:"prepack"})," step:"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"js","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"js","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"prepare"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bob build"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsx)(s.p,{children:"Configure the appropriate entry points:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"main"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/commonjs/index.js"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/module/index.js"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"react-native"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src/index.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"types"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib/typescript/src/index.d.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"source"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src/index.ts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"files"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": ["})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"lib"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"src"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,i.jsx)(s.p,{children:"Here is what each of these fields mean:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"main"}),": The entry point for the commonjs build. This is used by Node - such as tests, SSR etc."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"module"}),": The entry point for the ES module build. This is used by bundlers such as webpack."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"react-native"}),": The entry point for the React Native apps. This is used by Metro. It's common to point to the source code here as it can make debugging easier."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"types"}),": The entry point for the TypeScript definitions. This is used by TypeScript to type check the code using your library."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"source"}),": The path to the source code. It is used by ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," to detect the correct output files and provide better error messages."]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"files"}),": The files to include in the package when publishing with ",(0,i.jsx)(s.code,{children:"npm"}),"."]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Make sure to change specify correct files according to the targets you have enabled."}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"NOTE"}),": If you're building TypeScript definition files, also make sure that the ",(0,i.jsx)(s.code,{children:"types"})," field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. ",(0,i.jsx)(s.code,{children:"lib/typescript/index.d.ts"})," if you have only the ",(0,i.jsx)(s.code,{children:"src"})," directory and ",(0,i.jsx)(s.code,{children:"rootDir"})," is not set)."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add the output directory to ",(0,i.jsx)(s.code,{children:".gitignore"})," and ",(0,i.jsx)(s.code,{children:".eslintignore"})]}),"\n",(0,i.jsx)(s.pre,{"data-language":"gitignore","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"gitignore","data-theme":"default",children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"# generated files by bob"})}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"lib/"})})]})}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Add the output directory to ",(0,i.jsx)(s.code,{children:"jest.modulePathIgnorePatterns"})," if you use ",(0,i.jsx)(s.a,{href:"https://jestjs.io",children:"Jest"})]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"modulePathIgnorePatterns"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": ["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/lib/"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"})]})})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"And we're done \uD83C\uDF89"}),"\n",(0,i.jsx)(s.h2,{id:"options",children:"Options"}),"\n",(0,i.jsxs)(s.p,{children:["The options can be specified in the ",(0,i.jsx)(s.code,{children:"package.json"})," file under the ",(0,i.jsx)(s.code,{children:"react-native-builder-bob"})," property, or in a ",(0,i.jsx)(s.code,{children:"bob.config.js"})," file in your project directory."]}),"\n",(0,i.jsx)(s.h3,{id:"source",children:(0,i.jsx)(s.code,{children:"source"})}),"\n",(0,i.jsxs)(s.p,{children:["The name of the folder with the source code which should be compiled. The folder should include an ",(0,i.jsx)(s.code,{children:"index"})," file."]}),"\n",(0,i.jsx)(s.h3,{id:"output",children:(0,i.jsx)(s.code,{children:"output"})}),"\n",(0,i.jsx)(s.p,{children:"The name of the folder where the compiled files should be output to. It will contain separate folder for each target."}),"\n",(0,i.jsx)(s.h3,{id:"exclude",children:(0,i.jsx)(s.code,{children:"exclude"})}),"\n",(0,i.jsxs)(s.p,{children:["Glob pattern to be used while filtering the unnecessary files. Defaults to ",(0,i.jsx)(s.code,{children:"'**/{__tests__,__fixtures__,__mocks__}/**'"})," if you don't specify it."]}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsxs)(s.p,{children:["This option only works with ",(0,i.jsx)(s.code,{children:"commonjs"})," and ",(0,i.jsx)(s.code,{children:"module"})," targets. To exclude files while building ",(0,i.jsx)(s.code,{children:"typescript"}),", please see ",(0,i.jsx)(s.a,{href:"https://www.typescriptlang.org/tsconfig#exclude",children:"the tsconfig exclude field"}),"."]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"exclude"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"ignore_me/**"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsx)(s.h4,{id:"targets",children:(0,i.jsx)(s.code,{children:"targets"})}),"\n",(0,i.jsx)(s.p,{children:"Various targets to build for. The available targets are:"}),"\n",(0,i.jsx)(s.h4,{id:"commonjs",children:(0,i.jsx)(s.code,{children:"commonjs"})}),"\n",(0,i.jsx)(s.p,{children:"Enable compiling source files with Babel and use commonjs module system."}),"\n",(0,i.jsxs)(s.p,{children:["This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the ",(0,i.jsx)(s.code,{children:"main"})," field of ",(0,i.jsx)(s.code,{children:"package.json"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["By default, the code is compiled to support last 2 versions of modern browsers. It also strips TypeScript and Flow annotations, and compiles JSX. You can customize the environments to compile for by using a ",(0,i.jsx)(s.a,{href:"https://github.com/browserslist/browserslist#config-file",children:"browserslist config"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"In addition, the following options are supported:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"configFile"})," & ",(0,i.jsx)(s.code,{children:"babelrc"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): To customize the babel config used, you can pass the ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/options#configfile",children:(0,i.jsx)(s.code,{children:"configFile"})})," option as ",(0,i.jsx)(s.code,{children:"true"})," if you have a ",(0,i.jsx)(s.code,{children:"babel.config.js"})," or ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/options#babelrc",children:(0,i.jsx)(s.code,{children:"babelrc"})})," option if you have a ",(0,i.jsx)(s.code,{children:".babelrc"}),". This may break the default configuration, so use these options only if you know what you're doing."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"copyFlow"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): If your source code is written in ",(0,i.jsx)(s.a,{href:"http://www.typescriptlang.org/",children:"Flow"}),", You can specify the ",(0,i.jsx)(s.code,{children:"copyFlow"})," option to copy the source files as ",(0,i.jsx)(s.code,{children:".js.flow"})," to the output folder. If the ",(0,i.jsx)(s.code,{children:"main"})," entry in ",(0,i.jsx)(s.code,{children:"package.json"})," points to the ",(0,i.jsx)(s.code,{children:"index"})," file in the output folder, the flow type checker will pick these files up to use for type definitions."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"sourceMaps"})," (",(0,i.jsx)(s.code,{children:"boolean"}),"): Sourcemaps are generated by default alongside the compiled files. You can disable them by setting the ",(0,i.jsx)(s.code,{children:"sourceMaps"})," option to ",(0,i.jsx)(s.code,{children:"false"}),"."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"commonjs"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"configFile"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"copyFlow"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h4,{id:"module",children:(0,i.jsx)(s.code,{children:"module"})}),"\n",(0,i.jsxs)(s.p,{children:["Enable compiling source files with Babel and use ES module system. This is essentially same as the ",(0,i.jsx)(s.code,{children:"commonjs"})," target and accepts the same options, but leaves the ",(0,i.jsx)(s.code,{children:"import"}),"/",(0,i.jsx)(s.code,{children:"export"})," statements in your code."]}),"\n",(0,i.jsxs)(s.p,{children:["This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the ",(0,i.jsx)(s.code,{children:"module"})," field of ",(0,i.jsx)(s.code,{children:"package.json"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"configFile"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h4,{id:"typescript",children:(0,i.jsx)(s.code,{children:"typescript"})}),"\n",(0,i.jsxs)(s.p,{children:["Enable generating type definitions with ",(0,i.jsx)(s.code,{children:"tsc"})," if your source code is written in ",(0,i.jsx)(s.a,{href:"http://www.typescriptlang.org/",children:"TypeScript"}),"."]}),"\n",(0,i.jsx)(s.p,{children:"The following options are supported:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"project"})," (",(0,i.jsx)(s.code,{children:"string"}),"): By default, the ",(0,i.jsx)(s.code,{children:"tsconfig.json"})," file in the root of your project is used to generate the type definitions. You can specify a path to a different config by using the ",(0,i.jsx)(s.code,{children:"project"})," option. This can be useful if you need to use different configs for development and production."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"tsc"})," (",(0,i.jsx)(s.code,{children:"string"}),"): The path to the ",(0,i.jsx)(s.code,{children:"tsc"})," binary is automatically detected and defaults to the one installed in your project. You can use the ",(0,i.jsx)(s.code,{children:"tsc"})," option to specify a different path."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.p,{children:"Example:"}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"["}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"typescript"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"project"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"tsconfig.build.json"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }]"})]})})}),"\n",(0,i.jsx)(s.h2,{id:"commands",children:"Commands"}),"\n",(0,i.jsxs)(s.p,{children:["The ",(0,i.jsx)(s.code,{children:"bob"})," CLI exposes the following commands:"]}),"\n",(0,i.jsx)(s.h3,{id:"init",children:(0,i.jsx)(s.code,{children:"init"})}),"\n",(0,i.jsxs)(s.p,{children:["This configures an existing project to use ",(0,i.jsx)(s.code,{children:"bob"})," by adding the required configuration and dependencies. This is usually run with ",(0,i.jsx)(s.code,{children:"npx"}),":"]}),"\n",(0,i.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"react-native-builder-bob@latest"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"init"})]})})}),"\n",(0,i.jsx)(s.h3,{id:"build",children:(0,i.jsx)(s.code,{children:"build"})}),"\n",(0,i.jsxs)(s.p,{children:["This builds the project according to the configuration. This is usually run as part of the package's publishing flow, i.e. in the ",(0,i.jsx)(s.code,{children:"prepare"})," or ",(0,i.jsx)(s.code,{children:"prepack"})," scripts."]}),"\n",(0,i.jsx)(s.pre,{"data-language":"json","data-theme":"default",children:(0,i.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scripts"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:": {"})]}),"\n",(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"prepare"'}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bob build"'})]}),"\n",(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,t.a)(),e.components);return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)},pageOpts:{filePath:"pages/build.md",route:"/build",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Build a React Native library",headings:c},pageNextRoute:"/build",nextraLayout:r.ZP,themeConfig:l.Z};s.default=(0,o.j)(d)},6282:function(e,s,n){"use strict";var i=n(4246);n(7378),s.Z={primaryHue:30,logo:(0,i.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=7272)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/create-831179bbc074cd27.js b/_next/static/chunks/pages/create-831179bbc074cd27.js deleted file mode 100644 index d8b12c48b..000000000 --- a/_next/static/chunks/pages/create-831179bbc074cd27.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[417],{2599:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/create",function(){return r(8774)}])},8774:function(e,t,r){"use strict";r.r(t),r.d(t,{__toc:function(){return o},default:function(){return u}});var i=r(4246),n=r(9304),a=r(2917),s=r(6282);r(6288);var l=r(1441),c={src:"/react-native-builder-bob//_next/static/media/create-react-native-library.91c6b751.gif",height:738,width:1e3,blurWidth:0,blurHeight:0};let o=[{depth:2,value:"Features",id:"features"},{depth:2,value:"Usage",id:"usage"}];function d(e){let t=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",ul:"ul",li:"li",a:"a",pre:"pre",span:"span",img:"img"},(0,l.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Scaffold a React Native library"}),"\n",(0,i.jsx)(t.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(t.p,{children:["If you want to create your own React Native library, scaffolding the project can be a daunting task. ",(0,i.jsx)(t.code,{children:"create-react-native-library"})," can scaffold a new project for you with the following things:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Minimal boilerplate modules on which you can build upon"}),"\n",(0,i.jsx)(t.li,{children:"Example React Native app to test your modules"}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})," to ensure type-safe code and better DX"]}),"\n",(0,i.jsxs)(t.li,{children:["Support for ",(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules",children:"Turbo Modules"})," & ",(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/next/the-new-architecture/pillars-fabric-components",children:"Fabric"})]}),"\n",(0,i.jsxs)(t.li,{children:["Support for ",(0,i.jsx)(t.a,{href:"https://kotlinlang.org/",children:"Kotlin"})," on Android & ",(0,i.jsx)(t.a,{href:"https://developer.apple.com/swift/",children:"Swift"})," on iOS"]}),"\n",(0,i.jsx)(t.li,{children:"Support for C++ to write cross-platform native code"}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://expo.io/",children:"Expo"})," for libraries without native code and web support"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://eslint.org/",children:"ESLint"}),", ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),", ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"}),", ",(0,i.jsx)(t.a,{href:"https://github.com/evilmartians/lefthook",children:"Lefthook"})," and ",(0,i.jsx)(t.a,{href:"https://github.com/release-it/release-it",children:"Release It"})," pre-configured"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"./build",children:(0,i.jsx)(t.code,{children:"react-native-builder-bob"})})," pre-configured to compile your files"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/features/actions",children:"GitHub Actions"})," pre-configured to run tests and lint on the CI"]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"To create new project, run the following:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(t.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string)"},children:"create-react-native-library@latest"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string)"},children:"awesome-library"})]})})}),"\n",(0,i.jsxs)(t.p,{children:["This will ask you few questions about your project and generate a new project in a folder named ",(0,i.jsx)(t.code,{children:"awesome-library"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"Demo",src:c})}),"\n",(0,i.jsxs)(t.p,{children:["After the project is created, you can find the development workflow in the generated ",(0,i.jsx)(t.code,{children:"CONTRIBUTING.md"})," file."]})]})}let h={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/create.md",route:"/create",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Scaffold a React Native library",headings:o},pageNextRoute:"/create",nextraLayout:a.ZP,themeConfig:s.Z};var u=(0,n.j)(h)},6282:function(e,t,r){"use strict";var i=r(4246);r(7378),t.Z={logo:(0,i.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=2599)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/create-da5ac0d63eedd0dd.js b/_next/static/chunks/pages/create-da5ac0d63eedd0dd.js new file mode 100644 index 000000000..535a2fde8 --- /dev/null +++ b/_next/static/chunks/pages/create-da5ac0d63eedd0dd.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[417],{2599:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/create",function(){return r(8774)}])},8774:function(e,t,r){"use strict";r.r(t),r.d(t,{__toc:function(){return o},default:function(){return u}});var i=r(4246),n=r(9304),a=r(2917),s=r(6282);r(6288);var l=r(1441),c={src:"/react-native-builder-bob//_next/static/media/create-react-native-library.91c6b751.gif",height:738,width:1e3,blurWidth:0,blurHeight:0};let o=[{depth:2,value:"Features",id:"features"},{depth:2,value:"Usage",id:"usage"}];function d(e){let t=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",ul:"ul",li:"li",a:"a",pre:"pre",span:"span",img:"img"},(0,l.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Scaffold a React Native library"}),"\n",(0,i.jsxs)(t.p,{children:["If you want to create your own React Native library, scaffolding the project can be a daunting task. ",(0,i.jsx)(t.code,{children:"create-react-native-library"})," can scaffold a new project for you with all the necessary tools configured."]}),"\n",(0,i.jsx)(t.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Minimal boilerplate modules on which you can build upon"}),"\n",(0,i.jsx)(t.li,{children:"Example React Native app to test your modules"}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})," to ensure type-safe code and better DX"]}),"\n",(0,i.jsxs)(t.li,{children:["Support for ",(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules",children:"Turbo Modules"})," & ",(0,i.jsx)(t.a,{href:"https://reactnative.dev/docs/next/the-new-architecture/pillars-fabric-components",children:"Fabric"})]}),"\n",(0,i.jsxs)(t.li,{children:["Support for ",(0,i.jsx)(t.a,{href:"https://kotlinlang.org/",children:"Kotlin"})," on Android & ",(0,i.jsx)(t.a,{href:"https://developer.apple.com/swift/",children:"Swift"})," on iOS"]}),"\n",(0,i.jsx)(t.li,{children:"Support for C++ to write cross-platform native code"}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://expo.io/",children:"Expo"})," for libraries without native code and web support"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://eslint.org/",children:"ESLint"}),", ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),", ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"}),", ",(0,i.jsx)(t.a,{href:"https://github.com/evilmartians/lefthook",children:"Lefthook"})," and ",(0,i.jsx)(t.a,{href:"https://github.com/release-it/release-it",children:"Release It"})," pre-configured"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"./build",children:(0,i.jsx)(t.code,{children:"react-native-builder-bob"})})," pre-configured to compile your files"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://github.com/features/actions",children:"GitHub Actions"})," pre-configured to run tests and lint on the CI"]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"To create new project, run the following:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"sh","data-theme":"default",children:(0,i.jsx)(t.code,{"data-language":"sh","data-theme":"default",children:(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string)"},children:"create-react-native-library@latest"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string)"},children:"awesome-library"})]})})}),"\n",(0,i.jsxs)(t.p,{children:["This will ask you few questions about your project and generate a new project in a folder named ",(0,i.jsx)(t.code,{children:"awesome-library"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"Demo",src:c})}),"\n",(0,i.jsxs)(t.p,{children:["After the project is created, you can find the development workflow in the generated ",(0,i.jsx)(t.code,{children:"CONTRIBUTING.md"})," file."]})]})}let h={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/create.md",route:"/create",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Scaffold a React Native library",headings:o},pageNextRoute:"/create",nextraLayout:a.ZP,themeConfig:s.Z};var u=(0,n.j)(h)},6282:function(e,t,r){"use strict";var i=r(4246);r(7378),t.Z={primaryHue:30,logo:(0,i.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=2599)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/faq-030d45325c4ab8c5.js b/_next/static/chunks/pages/faq-f9a27697f2b61b13.js similarity index 98% rename from _next/static/chunks/pages/faq-030d45325c4ab8c5.js rename to _next/static/chunks/pages/faq-f9a27697f2b61b13.js index 25fac538b..0fa95d4b3 100644 --- a/_next/static/chunks/pages/faq-030d45325c4ab8c5.js +++ b/_next/static/chunks/pages/faq-f9a27697f2b61b13.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[746],{7040:function(e,n,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/faq",function(){return i(5510)}])},5510:function(e,n,i){"use strict";i.r(n),i.d(n,{__toc:function(){return l}});var s=i(4246),t=i(9304),r=i(2917),a=i(6282);i(6288);var o=i(1441);let l=[{depth:2,value:"Why should I compile my project with react-native-builder-bob?",id:"why-should-i-compile-my-project-with-react-native-builder-bob"},{depth:2,value:"How do I add a react-native library containing native code as a dependency in my library?",id:"how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library"},{depth:2,value:"How to upgrade the react-native version in the generated project?",id:"how-to-upgrade-the-react-native-version-in-the-generated-project"},{depth:2,value:"How does the library get linked to the example app in the generated project?",id:"how-does-the-library-get-linked-to-the-example-app-in-the-generated-project"},{depth:2,value:"How to test the library in an app locally?",id:"how-to-test-the-library-in-an-app-locally"},{depth:2,value:"Users get a warning when they install my library",id:"users-get-a-warning-when-they-install-my-library"}];function c(e){let n=Object.assign({h1:"h1",h2:"h2",code:"code",p:"p",ul:"ul",li:"li",strong:"strong",ol:"ol",a:"a",pre:"pre",span:"span"},(0,o.a)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{children:"Frequently Asked Questions"}),"\n",(0,s.jsxs)(n.h2,{id:"why-should-i-compile-my-project-with-react-native-builder-bob",children:["Why should I compile my project with ",(0,s.jsx)(n.code,{children:"react-native-builder-bob"}),"?"]}),"\n",(0,s.jsx)(n.p,{children:"We write our library code in non-standard syntaxes such as JSX, TypeScript etc. as well as proposed syntaxes which aren't part of the standard yet. This means that our code needs to be compiled to be able to run on JavaScript engines."}),"\n",(0,s.jsx)(n.p,{children:"When using the library in a React Native app, Metro handles compiling the source code. However, it's also possible to use them in other targets such as web, run in Node for tests or SSR etc. So we need to compile the source code for them as well."}),"\n",(0,s.jsxs)(n.p,{children:["Currently, to handle such multiple targets, we need to have multiple babel configs and write a long ",(0,s.jsx)(n.code,{children:"babel-cli"})," command in our ",(0,s.jsx)(n.code,{children:"package.json"}),". We also need to keep the configs in sync between our projects."]}),"\n",(0,s.jsxs)(n.p,{children:["Just as an example, this is a command we have in one of the packages: ",(0,s.jsx)(n.code,{children:"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"}),". This isn't all, there's even a separate ",(0,s.jsx)(n.code,{children:"babel.config.publish.js"})," file. And this only works for webpack and Metro, and will fail on Node due to ESM usage."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"react-native-builder-bob"})," wraps tools such as ",(0,s.jsx)(n.code,{children:"babel"})," and ",(0,s.jsx)(n.code,{children:"typescript"})," to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required."]}),"\n",(0,s.jsx)(n.h2,{id:"how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library",children:"How do I add a react-native library containing native code as a dependency in my library?"}),"\n",(0,s.jsx)(n.p,{children:"If your library depends on another react-native library containing native code, you should do the following:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"peerDependencies"})]})}),"\n",(0,s.jsxs)(n.p,{children:["This means that the consumer of the library will need to install the native library and add it to the ",(0,s.jsx)(n.code,{children:"dependencies"})," section of their ",(0,s.jsx)(n.code,{children:"package.json"}),". It makes sure that:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"There are no version conflicts if another package also happens to use the same library, or if the user wants to use the library in their app. While there can be multiple versions of a JavaScript-only library, there can only be one version of a native library - so avoiding version conflicts is important."}),"\n",(0,s.jsx)(n.li,{children:"The package manager installs it in correct location so that autolinking can work properly."}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Don't add the native library to ",(0,s.jsx)(n.code,{children:"dependencies"})," of your library, otherwise it may cause issues for the user even if it seems to work."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"devDependencies"})]})}),"\n",(0,s.jsx)(n.p,{children:"This makes sure that you can use it for tests, and there are no other errors such as type errors due to the missing module."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"dependencies"})," in the ",(0,s.jsx)(n.code,{children:"package.json"})," under ",(0,s.jsx)(n.code,{children:"example"})]})}),"\n",(0,s.jsx)(n.p,{children:"This is equivalent to the consumer of the library installing the dependency, and is needed so that this module is also available to the example app."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"how-to-upgrade-the-react-native-version-in-the-generated-project",children:["How to upgrade the ",(0,s.jsx)(n.code,{children:"react-native"})," version in the generated project?"]}),"\n",(0,s.jsxs)(n.p,{children:["Since this is a library, the ",(0,s.jsx)(n.code,{children:"react-native"})," version specified in the ",(0,s.jsx)(n.code,{children:"package.json"})," is not relevant for the consumers. It's only used for developing and testing the library. If you'd like to upgrade the ",(0,s.jsx)(n.code,{children:"react-native"})," version to test with it, you'd need to:"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Bump versions of the following packages under ",(0,s.jsx)(n.code,{children:"devDependencies"})," in the ",(0,s.jsx)(n.code,{children:"package.json"}),":"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"react-native"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"react"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"@types/react"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"@types/react-native"})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If you have any other related packages such as ",(0,s.jsx)(n.code,{children:"react-test-renderer"}),", make sure to bump them as well."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Upgrade ",(0,s.jsx)(n.code,{children:"react-native"})," in the ",(0,s.jsx)(n.code,{children:"example"})," app."]}),"\n",(0,s.jsxs)(n.p,{children:["The example app is a React Native app that can be updated following the same process as a regular React Native app. The process will vary depending on if it's using ",(0,s.jsx)(n.a,{href:"https://expo.io",children:"Expo"})," or ",(0,s.jsx)(n.a,{href:"https://github.com/react-native-community/cli",children:"React Native CLI"}),". See the ",(0,s.jsx)(n.a,{href:"https://reactnative.dev/docs/upgrading",children:"official upgrade guide"})," for more details."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["To avoid issues, make sure that the versions of ",(0,s.jsx)(n.code,{children:"react"})," and ",(0,s.jsx)(n.code,{children:"react-native"})," are the same in ",(0,s.jsx)(n.code,{children:"example/package.json"})," and the ",(0,s.jsx)(n.code,{children:"package.json"})," at the root."]}),"\n",(0,s.jsx)(n.h2,{id:"how-does-the-library-get-linked-to-the-example-app-in-the-generated-project",children:"How does the library get linked to the example app in the generated project?"}),"\n",(0,s.jsxs)(n.p,{children:["If you generate a project with ",(0,s.jsx)(n.code,{children:"create-react-native-library"}),", you get an example app to test your library. It's good to understand how the library gets linked to the example app in case you want to tweak how it works or if you run into issues."]}),"\n",(0,s.jsx)(n.p,{children:"There are 2 parts to this process."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Aliasing the JavaScript code"})}),"\n",(0,s.jsxs)(n.p,{children:["The JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from ",(0,s.jsx)(n.code,{children:"'your-library-name'"}),", it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://babeljs.io",children:"Babel"})," is configured to use the alias in ",(0,s.jsx)(n.code,{children:"example/babel.config.js"})," using ",(0,s.jsx)(n.a,{href:"https://github.com/tleunen/babel-plugin-module-resolver",children:"babel-plugin-module-resolver"}),". This transforms the imports to point to the source code instead."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://facebook.github.io/metro/",children:"Metro"})," is configured to allow importing from outside of the ",(0,s.jsx)(n.code,{children:"example"})," directory by configuring ",(0,s.jsx)(n.code,{children:"watchFolders"}),", and to use the appropriate peer dependencies. This configuration exists in the ",(0,s.jsx)(n.code,{children:"example/metro.config.js"})," file."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://webpack.js.org/",children:"Webpack"})," is configured to compile the library source code when running on the Web. This configuration exists in the ",(0,s.jsx)(n.code,{children:"example/webpack.config.js"})," file."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})," is configured to use the source code for type checking by using the ",(0,s.jsx)(n.code,{children:"paths"})," property under ",(0,s.jsx)(n.code,{children:"compilerOptions"}),". This configuration exists in the ",(0,s.jsx)(n.code,{children:"tsconfig.json"})," file at the root."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Linking the native code"})}),"\n",(0,s.jsxs)(n.p,{children:["By default, React Native CLI only links the modules installed under ",(0,s.jsx)(n.code,{children:"node_module"})," of the app. To be able to link the ",(0,s.jsx)(n.code,{children:"android"})," and ",(0,s.jsx)(n.code,{children:"ios"})," folders from the project root, the path is specified in the ",(0,s.jsx)(n.code,{children:"example/react-native.config.js"})," file."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"how-to-test-the-library-in-an-app-locally",children:"How to test the library in an app locally?"}),"\n",(0,s.jsxs)(n.p,{children:["You may have come across the ",(0,s.jsx)(n.code,{children:"yarn link"})," and ",(0,s.jsx)(n.code,{children:"npm link"})," commands to test libraries locally. These commands work great for simple packages without build process, but they have different behavior from how a published package works."]}),"\n",(0,s.jsx)(n.p,{children:"For more accurate testing, we recommend following approaches:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Local tarball with ",(0,s.jsx)(n.code,{children:"npm"})]})}),"\n",(0,s.jsxs)(n.p,{children:["First, temporarily change the version in ",(0,s.jsx)(n.code,{children:"package.json"})," to something like ",(0,s.jsx)(n.code,{children:"0.0.0-local.0"}),". This version number needs to be updated to something different every time you do this to avoid ",(0,s.jsx)(n.a,{href:"https://github.com/yarnpkg/yarn/issues/6811",children:"stale content"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Run the following command inside your library's root:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"pack"})]})})}),"\n",(0,s.jsxs)(n.p,{children:["This will generate a file like ",(0,s.jsx)(n.code,{children:"your-library-name-0.0.0-local.0.tgz"})," in the root of the project."]}),"\n",(0,s.jsx)(n.p,{children:"Then, you can install the tarball in your app:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"../path/to/your-library-name-0.0.0-local.0.tgz"})]})})}),"\n",(0,s.jsxs)(n.p,{children:["Or if you use ",(0,s.jsx)(n.code,{children:"npm"}),":"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"../path/to/your-library-name-0.0.0-local.0.tgz"})]})})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Verdaccio"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://verdaccio.org/",children:"Verdaccio"})," is a lightweight private npm registry that can be used to test packages locally. The advantage of using Verdaccio is that it allows to test the complete workflow of publishing and installing a package without actually publishing it to a remote registry."]}),"\n",(0,s.jsxs)(n.p,{children:["You can find installation and usage instructions in the ",(0,s.jsx)(n.a,{href:"https://verdaccio.org/docs/en/installation",children:"Verdaccio documentation"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"users-get-a-warning-when-they-install-my-library",children:"Users get a warning when they install my library"}),"\n",(0,s.jsx)(n.p,{children:"If users are using Yarn 1, they may get a warning when installing your library:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"warning"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"Workspaces"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"can"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"only"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"be"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"enabled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"in"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"private"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"projects."})]})})}),"\n",(0,s.jsxs)(n.p,{children:["This is because the example app is configured as a Yarn workspace, and there is a ",(0,s.jsx)(n.a,{href:"https://github.com/yarnpkg/yarn/issues/8580",children:"bug in Yarn 1"})," which causes this warning to be shown for third-party packages. It has no impact for the consumers of the library and the warning can be ignored. If consumers would like to get rid of the warning, there are 2 options:"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Disable workspaces"})}),"\n",(0,s.jsxs)(n.p,{children:["If the consumer doesn't use Yarn workspaces, they can disable it by adding the following to the ",(0,s.jsx)(n.code,{children:".yarnrc"})," file in the root of their project:"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"rc","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"rc","data-theme":"default",children:(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"workspaces-experimental false"})})})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Upgrade to Yarn 3"})}),"\n",(0,s.jsxs)(n.p,{children:["Yarn 1 is no longer maintained, so it's recommended to upgrade to Yarn 3. Yarn 3 works with React Native projects with the ",(0,s.jsx)(n.code,{children:"node-modules"})," linker. To upgrade, consumers can follow the ",(0,s.jsx)(n.a,{href:"https://yarnpkg.com/migration/guide",children:"official upgrade guide"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["It's also necessary to use ",(0,s.jsx)(n.code,{children:"node-modules"})," linker. To use it, consumers can add the following to the ",(0,s.jsx)(n.code,{children:".yarnrc.yml"})," file in the root of their project:"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"yml","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"yml","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"nodeLinker"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"node-modules"})]})})}),"\n"]}),"\n"]})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,o.a)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/faq.md",route:"/faq",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Frequently Asked Questions",headings:l},pageNextRoute:"/faq",nextraLayout:r.ZP,themeConfig:a.Z};n.default=(0,t.j)(d)},6282:function(e,n,i){"use strict";var s=i(4246);i(7378),n.Z={logo:(0,s.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=7040)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[746],{7040:function(e,n,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/faq",function(){return i(5510)}])},5510:function(e,n,i){"use strict";i.r(n),i.d(n,{__toc:function(){return l}});var s=i(4246),t=i(9304),r=i(2917),a=i(6282);i(6288);var o=i(1441);let l=[{depth:2,value:"Why should I compile my project with react-native-builder-bob?",id:"why-should-i-compile-my-project-with-react-native-builder-bob"},{depth:2,value:"How do I add a react-native library containing native code as a dependency in my library?",id:"how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library"},{depth:2,value:"How to upgrade the react-native version in the generated project?",id:"how-to-upgrade-the-react-native-version-in-the-generated-project"},{depth:2,value:"How does the library get linked to the example app in the generated project?",id:"how-does-the-library-get-linked-to-the-example-app-in-the-generated-project"},{depth:2,value:"How to test the library in an app locally?",id:"how-to-test-the-library-in-an-app-locally"},{depth:2,value:"Users get a warning when they install my library",id:"users-get-a-warning-when-they-install-my-library"}];function c(e){let n=Object.assign({h1:"h1",h2:"h2",code:"code",p:"p",ul:"ul",li:"li",strong:"strong",ol:"ol",a:"a",pre:"pre",span:"span"},(0,o.a)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{children:"Frequently Asked Questions"}),"\n",(0,s.jsxs)(n.h2,{id:"why-should-i-compile-my-project-with-react-native-builder-bob",children:["Why should I compile my project with ",(0,s.jsx)(n.code,{children:"react-native-builder-bob"}),"?"]}),"\n",(0,s.jsx)(n.p,{children:"We write our library code in non-standard syntaxes such as JSX, TypeScript etc. as well as proposed syntaxes which aren't part of the standard yet. This means that our code needs to be compiled to be able to run on JavaScript engines."}),"\n",(0,s.jsx)(n.p,{children:"When using the library in a React Native app, Metro handles compiling the source code. However, it's also possible to use them in other targets such as web, run in Node for tests or SSR etc. So we need to compile the source code for them as well."}),"\n",(0,s.jsxs)(n.p,{children:["Currently, to handle such multiple targets, we need to have multiple babel configs and write a long ",(0,s.jsx)(n.code,{children:"babel-cli"})," command in our ",(0,s.jsx)(n.code,{children:"package.json"}),". We also need to keep the configs in sync between our projects."]}),"\n",(0,s.jsxs)(n.p,{children:["Just as an example, this is a command we have in one of the packages: ",(0,s.jsx)(n.code,{children:"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"}),". This isn't all, there's even a separate ",(0,s.jsx)(n.code,{children:"babel.config.publish.js"})," file. And this only works for webpack and Metro, and will fail on Node due to ESM usage."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"react-native-builder-bob"})," wraps tools such as ",(0,s.jsx)(n.code,{children:"babel"})," and ",(0,s.jsx)(n.code,{children:"typescript"})," to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required."]}),"\n",(0,s.jsx)(n.h2,{id:"how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library",children:"How do I add a react-native library containing native code as a dependency in my library?"}),"\n",(0,s.jsx)(n.p,{children:"If your library depends on another react-native library containing native code, you should do the following:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"peerDependencies"})]})}),"\n",(0,s.jsxs)(n.p,{children:["This means that the consumer of the library will need to install the native library and add it to the ",(0,s.jsx)(n.code,{children:"dependencies"})," section of their ",(0,s.jsx)(n.code,{children:"package.json"}),". It makes sure that:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"There are no version conflicts if another package also happens to use the same library, or if the user wants to use the library in their app. While there can be multiple versions of a JavaScript-only library, there can only be one version of a native library - so avoiding version conflicts is important."}),"\n",(0,s.jsx)(n.li,{children:"The package manager installs it in correct location so that autolinking can work properly."}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Don't add the native library to ",(0,s.jsx)(n.code,{children:"dependencies"})," of your library, otherwise it may cause issues for the user even if it seems to work."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"devDependencies"})]})}),"\n",(0,s.jsx)(n.p,{children:"This makes sure that you can use it for tests, and there are no other errors such as type errors due to the missing module."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Add the native library to ",(0,s.jsx)(n.code,{children:"dependencies"})," in the ",(0,s.jsx)(n.code,{children:"package.json"})," under ",(0,s.jsx)(n.code,{children:"example"})]})}),"\n",(0,s.jsx)(n.p,{children:"This is equivalent to the consumer of the library installing the dependency, and is needed so that this module is also available to the example app."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"how-to-upgrade-the-react-native-version-in-the-generated-project",children:["How to upgrade the ",(0,s.jsx)(n.code,{children:"react-native"})," version in the generated project?"]}),"\n",(0,s.jsxs)(n.p,{children:["Since this is a library, the ",(0,s.jsx)(n.code,{children:"react-native"})," version specified in the ",(0,s.jsx)(n.code,{children:"package.json"})," is not relevant for the consumers. It's only used for developing and testing the library. If you'd like to upgrade the ",(0,s.jsx)(n.code,{children:"react-native"})," version to test with it, you'd need to:"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Bump versions of the following packages under ",(0,s.jsx)(n.code,{children:"devDependencies"})," in the ",(0,s.jsx)(n.code,{children:"package.json"}),":"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"react-native"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"react"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"@types/react"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"@types/react-native"})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If you have any other related packages such as ",(0,s.jsx)(n.code,{children:"react-test-renderer"}),", make sure to bump them as well."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Upgrade ",(0,s.jsx)(n.code,{children:"react-native"})," in the ",(0,s.jsx)(n.code,{children:"example"})," app."]}),"\n",(0,s.jsxs)(n.p,{children:["The example app is a React Native app that can be updated following the same process as a regular React Native app. The process will vary depending on if it's using ",(0,s.jsx)(n.a,{href:"https://expo.io",children:"Expo"})," or ",(0,s.jsx)(n.a,{href:"https://github.com/react-native-community/cli",children:"React Native CLI"}),". See the ",(0,s.jsx)(n.a,{href:"https://reactnative.dev/docs/upgrading",children:"official upgrade guide"})," for more details."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["To avoid issues, make sure that the versions of ",(0,s.jsx)(n.code,{children:"react"})," and ",(0,s.jsx)(n.code,{children:"react-native"})," are the same in ",(0,s.jsx)(n.code,{children:"example/package.json"})," and the ",(0,s.jsx)(n.code,{children:"package.json"})," at the root."]}),"\n",(0,s.jsx)(n.h2,{id:"how-does-the-library-get-linked-to-the-example-app-in-the-generated-project",children:"How does the library get linked to the example app in the generated project?"}),"\n",(0,s.jsxs)(n.p,{children:["If you generate a project with ",(0,s.jsx)(n.code,{children:"create-react-native-library"}),", you get an example app to test your library. It's good to understand how the library gets linked to the example app in case you want to tweak how it works or if you run into issues."]}),"\n",(0,s.jsx)(n.p,{children:"There are 2 parts to this process."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Aliasing the JavaScript code"})}),"\n",(0,s.jsxs)(n.p,{children:["The JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from ",(0,s.jsx)(n.code,{children:"'your-library-name'"}),", it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://babeljs.io",children:"Babel"})," is configured to use the alias in ",(0,s.jsx)(n.code,{children:"example/babel.config.js"})," using ",(0,s.jsx)(n.a,{href:"https://github.com/tleunen/babel-plugin-module-resolver",children:"babel-plugin-module-resolver"}),". This transforms the imports to point to the source code instead."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://facebook.github.io/metro/",children:"Metro"})," is configured to allow importing from outside of the ",(0,s.jsx)(n.code,{children:"example"})," directory by configuring ",(0,s.jsx)(n.code,{children:"watchFolders"}),", and to use the appropriate peer dependencies. This configuration exists in the ",(0,s.jsx)(n.code,{children:"example/metro.config.js"})," file."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://webpack.js.org/",children:"Webpack"})," is configured to compile the library source code when running on the Web. This configuration exists in the ",(0,s.jsx)(n.code,{children:"example/webpack.config.js"})," file."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})," is configured to use the source code for type checking by using the ",(0,s.jsx)(n.code,{children:"paths"})," property under ",(0,s.jsx)(n.code,{children:"compilerOptions"}),". This configuration exists in the ",(0,s.jsx)(n.code,{children:"tsconfig.json"})," file at the root."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Linking the native code"})}),"\n",(0,s.jsxs)(n.p,{children:["By default, React Native CLI only links the modules installed under ",(0,s.jsx)(n.code,{children:"node_module"})," of the app. To be able to link the ",(0,s.jsx)(n.code,{children:"android"})," and ",(0,s.jsx)(n.code,{children:"ios"})," folders from the project root, the path is specified in the ",(0,s.jsx)(n.code,{children:"example/react-native.config.js"})," file."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"how-to-test-the-library-in-an-app-locally",children:"How to test the library in an app locally?"}),"\n",(0,s.jsxs)(n.p,{children:["You may have come across the ",(0,s.jsx)(n.code,{children:"yarn link"})," and ",(0,s.jsx)(n.code,{children:"npm link"})," commands to test libraries locally. These commands work great for simple packages without build process, but they have different behavior from how a published package works."]}),"\n",(0,s.jsx)(n.p,{children:"For more accurate testing, we recommend following approaches:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsxs)(n.strong,{children:["Local tarball with ",(0,s.jsx)(n.code,{children:"npm"})]})}),"\n",(0,s.jsxs)(n.p,{children:["First, temporarily change the version in ",(0,s.jsx)(n.code,{children:"package.json"})," to something like ",(0,s.jsx)(n.code,{children:"0.0.0-local.0"}),". This version number needs to be updated to something different every time you do this to avoid ",(0,s.jsx)(n.a,{href:"https://github.com/yarnpkg/yarn/issues/6811",children:"stale content"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Run the following command inside your library's root:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"pack"})]})})}),"\n",(0,s.jsxs)(n.p,{children:["This will generate a file like ",(0,s.jsx)(n.code,{children:"your-library-name-0.0.0-local.0.tgz"})," in the root of the project."]}),"\n",(0,s.jsx)(n.p,{children:"Then, you can install the tarball in your app:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"../path/to/your-library-name-0.0.0-local.0.tgz"})]})})}),"\n",(0,s.jsxs)(n.p,{children:["Or if you use ",(0,s.jsx)(n.code,{children:"npm"}),":"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"install"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"../path/to/your-library-name-0.0.0-local.0.tgz"})]})})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Verdaccio"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://verdaccio.org/",children:"Verdaccio"})," is a lightweight private npm registry that can be used to test packages locally. The advantage of using Verdaccio is that it allows to test the complete workflow of publishing and installing a package without actually publishing it to a remote registry."]}),"\n",(0,s.jsxs)(n.p,{children:["You can find installation and usage instructions in the ",(0,s.jsx)(n.a,{href:"https://verdaccio.org/docs/en/installation",children:"Verdaccio documentation"}),"."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"users-get-a-warning-when-they-install-my-library",children:"Users get a warning when they install my library"}),"\n",(0,s.jsx)(n.p,{children:"If users are using Yarn 1, they may get a warning when installing your library:"}),"\n",(0,s.jsx)(n.pre,{"data-language":"sh","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"sh","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"warning"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"Workspaces"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"can"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"only"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"be"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"enabled"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"in"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"private"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:"projects."})]})})}),"\n",(0,s.jsxs)(n.p,{children:["This is because the example app is configured as a Yarn workspace, and there is a ",(0,s.jsx)(n.a,{href:"https://github.com/yarnpkg/yarn/issues/8580",children:"bug in Yarn 1"})," which causes this warning to be shown for third-party packages. It has no impact for the consumers of the library and the warning can be ignored. If consumers would like to get rid of the warning, there are 2 options:"]}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Disable workspaces"})}),"\n",(0,s.jsxs)(n.p,{children:["If the consumer doesn't use Yarn workspaces, they can disable it by adding the following to the ",(0,s.jsx)(n.code,{children:".yarnrc"})," file in the root of their project:"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"rc","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"rc","data-theme":"default",children:(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:"workspaces-experimental false"})})})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.strong,{children:"Upgrade to Yarn 3"})}),"\n",(0,s.jsxs)(n.p,{children:["Yarn 1 is no longer maintained, so it's recommended to upgrade to Yarn 3. Yarn 3 works with React Native projects with the ",(0,s.jsx)(n.code,{children:"node-modules"})," linker. To upgrade, consumers can follow the ",(0,s.jsx)(n.a,{href:"https://yarnpkg.com/migration/guide",children:"official upgrade guide"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["It's also necessary to use ",(0,s.jsx)(n.code,{children:"node-modules"})," linker. To use it, consumers can add the following to the ",(0,s.jsx)(n.code,{children:".yarnrc.yml"})," file in the root of their project:"]}),"\n",(0,s.jsx)(n.pre,{"data-language":"yml","data-theme":"default",children:(0,s.jsx)(n.code,{"data-language":"yml","data-theme":"default",children:(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"nodeLinker"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"node-modules"})]})})}),"\n"]}),"\n"]})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,o.a)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/faq.md",route:"/faq",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Frequently Asked Questions",headings:l},pageNextRoute:"/faq",nextraLayout:r.ZP,themeConfig:a.Z};n.default=(0,t.j)(d)},6282:function(e,n,i){"use strict";var s=i(4246);i(7378),n.Z={primaryHue:30,logo:(0,s.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=7040)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/index-f3079f6cc42897d7.js b/_next/static/chunks/pages/index-0502346c6ec49844.js similarity index 53% rename from _next/static/chunks/pages/index-f3079f6cc42897d7.js rename to _next/static/chunks/pages/index-0502346c6ec49844.js index 9f3cfe18d..bbb2665ee 100644 --- a/_next/static/chunks/pages/index-f3079f6cc42897d7.js +++ b/_next/static/chunks/pages/index-0502346c6ec49844.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{215:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return a(3725)}])},3725:function(e,t,a){"use strict";a.r(t),a.d(t,{__toc:function(){return l}});var n=a(4246),i=a(9304),r=a(2917),c=a(6282);a(6288);var o=a(1441);let l=[];function s(e){let t=Object.assign({h1:"h1",p:"p",ul:"ul",li:"li",a:"a",code:"code"},(0,o.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:"Bob"}),"\n",(0,n.jsx)(t.p,{children:"This project is a collection of CLIs to make it easier to build React Native libraries. It contains the following CLIs:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"./create",children:(0,n.jsx)(t.code,{children:"create-react-native-library"})})," - a CLI to scaffold a React Native library."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"./build",children:(0,n.jsx)(t.code,{children:"react-native-bundle-bob"})})," - a CLI to build React Native libraries for various targets."]}),"\n"]})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.a)(),e.components);return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(s,{...e})}):s(e)},pageOpts:{filePath:"pages/index.md",route:"/",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Bob",headings:l},pageNextRoute:"/",nextraLayout:r.ZP,themeConfig:c.Z};t.default=(0,i.j)(d)},6282:function(e,t,a){"use strict";var n=a(4246);a(7378),t.Z={logo:(0,n.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=215)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{215:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return a(3725)}])},3725:function(e,t,a){"use strict";a.r(t),a.d(t,{__toc:function(){return l}});var i=a(4246),n=a(9304),r=a(2917),c=a(6282);a(6288);var o=a(1441);let l=[];function s(e){let t=Object.assign({h1:"h1",p:"p",ul:"ul",li:"li",a:"a",code:"code"},(0,o.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Bob"}),"\n",(0,i.jsx)(t.p,{children:"This project is a collection of CLIs to make it easier to build React Native libraries. It contains the following CLIs:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"./create",children:(0,i.jsx)(t.code,{children:"create-react-native-library"})})," - a CLI to scaffold a React Native library."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"./build",children:(0,i.jsx)(t.code,{children:"react-native-bundle-bob"})})," - a CLI to build React Native libraries for various targets."]}),"\n"]})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,o.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(s,{...e})}):s(e)},pageOpts:{filePath:"pages/index.md",route:"/",pageMap:[{kind:"Meta",data:{index:"Introduction",create:"Scaffold a library",build:"Build a library",faq:"FAQ"}},{kind:"MdxPage",name:"build",route:"/build"},{kind:"MdxPage",name:"create",route:"/create"},{kind:"MdxPage",name:"faq",route:"/faq"},{kind:"MdxPage",name:"index",route:"/"}],flexsearch:{codeblocks:!0},title:"Bob",headings:l},pageNextRoute:"/",nextraLayout:r.ZP,themeConfig:c.Z};t.default=(0,n.j)(d)},6282:function(e,t,a){"use strict";var i=a(4246);a(7378),t.Z={primaryHue:30,logo:(0,i.jsx)("span",{style:{fontSize:"32px"},children:"\uD83D\uDC77‍♂️"}),project:{link:"https://github.com/callstack/react-native-builder-bob"},docsRepositoryBase:"https://github.com/callstack/react-native-builder-bob/tree/main/docs"}}},function(e){e.O(0,[774,571,888,179],function(){return e(e.s=215)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/build.html b/build.html index 236ff03da..0b5cb83cc 100644 --- a/build.html +++ b/build.html @@ -1,6 +1,6 @@ Build a React Native library – Nextra
Build a library

Build a React Native library

+
Build a library

Build a React Native library

react-native-builder-bob can compile JavaScript and TypeScript code in your React Native library for following targets:

  • Generic CommonJS build
    • @@ -146,4 +146,4 @@

    This builds the project according to the configuration. This is usually run as part of the package's publishing flow, i.e. in the prepare or prepack scripts.

    "scripts": {
   "prepare": "bob build"
-}
    Scaffold a libraryFAQ

MIT 2023 © Nextra.
\ No newline at end of file +}
Scaffold a libraryFAQ
MIT 2023 © Nextra.
\ No newline at end of file diff --git a/create.html b/create.html index 83e58dabb..6cb422431 100644 --- a/create.html +++ b/create.html @@ -1,6 +1,6 @@ Scaffold a React Native library – Nextra
Scaffold a library

Scaffold a React Native library

+
Scaffold a library

Scaffold a React Native library

+

If you want to create your own React Native library, scaffolding the project can be a daunting task. create-react-native-library can scaffold a new project for you with all the necessary tools configured.

Features

-

If you want to create your own React Native library, scaffolding the project can be a daunting task. create-react-native-library can scaffold a new project for you with the following things:

  • Minimal boilerplate modules on which you can build upon
  • Example React Native app to test your modules
    • @@ -31,4 +31,4 @@ 

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

This will ask you few questions about your project and generate a new project in a folder named awesome-library.

Demo

-

After the project is created, you can find the development workflow in the generated CONTRIBUTING.md file.

IntroductionBuild a library
MIT 2023 © Nextra.
\ No newline at end of file +

After the project is created, you can find the development workflow in the generated CONTRIBUTING.md file.

IntroductionBuild a library
MIT 2023 © Nextra.
\ No newline at end of file diff --git a/faq.html b/faq.html index 00826fee8..5dbd1e901 100644 --- a/faq.html +++ b/faq.html @@ -1,6 +1,6 @@ Frequently Asked Questions – Nextra
FAQ

Frequently Asked Questions

+
FAQ

Frequently Asked Questions

Why should I compile my project with react-native-builder-bob?

We write our library code in non-standard syntaxes such as JSX, TypeScript etc. as well as proposed syntaxes which aren't part of the standard yet. This means that our code needs to be compiled to be able to run on JavaScript engines.

When using the library in a React Native app, Metro handles compiling the source code. However, it's also possible to use them in other targets such as web, run in Node for tests or SSR etc. So we need to compile the source code for them as well.

@@ -114,4 +114,4 @@

It's also necessary to use node-modules linker. To use it, consumers can add the following to the .yarnrc.yml file in the root of their project:

nodeLinker: node-modules
-
Build a library

MIT 2023 © Nextra.
\ No newline at end of file +
Build a library
MIT 2023 © Nextra.
\ No newline at end of file diff --git a/index.html b/index.html index 4513e895d..09e92e5bb 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ Bob – Nextra
Introduction

Bob

+
MIT 2023 © Nextra.
\ No newline at end of file +
Scaffold a library
MIT 2023 © Nextra.
\ No newline at end of file