From 9f5783e2aa64599ea1acc3696700a9e5a206b7d4 Mon Sep 17 00:00:00 2001 From: Daniel Rochetti Date: Mon, 7 May 2018 16:46:11 -0700 Subject: [PATCH 1/3] add documentation about `.native.js` extensions Lots of projects use the `.native.js` to share code between ReactJS and React Native (including core projects, like Jest) but there's no official documentation about it. I'm adding some info so projects can easily discover and refer to this feature. --- docs/platform-specific-code.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md index 68d2f923e89..8932590e906 100644 --- a/docs/platform-specific-code.md +++ b/docs/platform-specific-code.md @@ -102,3 +102,20 @@ const BigButton = require('./BigButton'); ``` React Native will automatically pick up the right file based on the running platform. + +## Native-specific extensions (i.e. sharing code with NodeJS and Web) + +You can also use the `.native.js` extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS. + +For example, say you have the following files in your project: + +```sh +Container.js // pick by Webpack, Rollup or any other Web bundler +Container.native.js // pick by the React Native bundler for both Android and iOS (Metro) +``` + +You can still require it without the `.native` extension, as follows: + +```javascript +const Container = require('./Container'); +``` From 45dbc03f442a09815e2f1b25a9b4a055644a0068 Mon Sep 17 00:00:00 2001 From: Daniel Rochetti Date: Tue, 8 May 2018 13:59:53 -0700 Subject: [PATCH 2/3] fix comments and add pro-tip about `.native.js` Fixed the comment on a code block and added a pro-tip telling users to ignore `.native.js` extensions in their web bundlers in order to optimize final bundle size. --- docs/platform-specific-code.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md index 8932590e906..a1f5cb4b110 100644 --- a/docs/platform-specific-code.md +++ b/docs/platform-specific-code.md @@ -110,8 +110,8 @@ You can also use the `.native.js` extension when a module needs to be shared bet For example, say you have the following files in your project: ```sh -Container.js // pick by Webpack, Rollup or any other Web bundler -Container.native.js // pick by the React Native bundler for both Android and iOS (Metro) +Container.js # picked up by Webpack, Rollup or any other Web bundler +Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro) ``` You can still require it without the `.native` extension, as follows: @@ -119,3 +119,5 @@ You can still require it without the `.native` extension, as follows: ```javascript const Container = require('./Container'); ``` + +**Pro tip:** Configure your Web bundler to ignore `.native.js` extensions in order to avoid having unused code in your production bundle, thus reducing the final bundle size. From 339131dd8067d7a38c7a79743822fc26d6ab5252 Mon Sep 17 00:00:00 2001 From: Christoph Nakazawa Date: Thu, 7 Feb 2019 13:44:52 +0000 Subject: [PATCH 3/3] Update platform-specific-code.md --- docs/platform-specific-code.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md index a1f5cb4b110..4ad473c9467 100644 --- a/docs/platform-specific-code.md +++ b/docs/platform-specific-code.md @@ -98,7 +98,7 @@ BigButton.android.js You can then require the component as follows: ```javascript -const BigButton = require('./BigButton'); +import BigButton from './BigButton'; ``` React Native will automatically pick up the right file based on the running platform. @@ -117,7 +117,7 @@ Container.native.js # picked up by the React Native bundler for both Android and You can still require it without the `.native` extension, as follows: ```javascript -const Container = require('./Container'); +import Container from './Container'; ``` **Pro tip:** Configure your Web bundler to ignore `.native.js` extensions in order to avoid having unused code in your production bundle, thus reducing the final bundle size.