diff --git a/docs/platform-specific-code.md b/docs/platform-specific-code.md index 83404f61141..4ad473c9467 100644 --- a/docs/platform-specific-code.md +++ b/docs/platform-specific-code.md @@ -98,9 +98,26 @@ 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. -If you share your React Native code with a website, you might as well use the `BigButton.native.js` so that both iOS and Android will use this file, while the website will use `BigButton.js`. +## 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 # 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: + +```javascript +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.