|
1 | 1 | React Native Code Reuse |
2 | 2 | ======================= |
3 | | -This example shows how to share code between different platforms (web, iOS and Android) when using React & React Native. It is based on the fact that React Native will detect when a file has a .ios. or .android. extension and load the relevant platform file when required from other components (see [Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)). |
| 3 | +This example shows how to share code between different platforms (web, iOS and Android) when using React & React Native. It is based on the fact that React Native will detect when a file has a .ios. or .android. extension and load the relevant platform file when required from other components (see [Platform-specific extensions](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions)). I created this application as an example for my article [Code sharing between React and React Native applications](http://ihor.burlachenko.com/code-sharing-between-react-and-react-native-applications/). |
4 | 4 |
|
5 | 5 | Each platform uses the corresponding ```index.js``` file as an entry point. All other code resides in the [app](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app) directory. |
6 | 6 |
|
7 | | -Each component is presented as a subpackage containing implementations for all platforms. For simple components which don't do any logic, we define only two views for web and mobile and load the relevant view in the subpackage index. Like in the [App](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/App) component. |
8 | | - |
9 | | - For components which have a different appearance for iOS and Android, we define two views with ```ios.js``` and ```android.js``` extensions each containing a platform specific code. Like in the [Title](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/Title) component. |
| 7 | +For simple components which don't do any logic, we define views with ```.js```, ```.ios.js``` and ```.android.js``` extensions each containing a platform specific code. Like in the [Title](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/Title) component. |
10 | 8 |
|
11 | 9 | For components which do some logic, we add a container component to define that logic. In such case in the subpackage index, we load the container and it renders the view. For max code reuse, we can put all shared logic into the abstract container and put platform specific code into subclasses. Like in the [AboutButton](https://github.com/ihor/ReactNativeCodeReuseExample/tree/master/app/components/AboutButton) component. |
12 | 10 |
|
|
0 commit comments