Repository files navigation

I created this application as an example for my articleCode sharing between React and React Native applications. It 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 (seePlatform-specific extensions).

Each platform uses the correspondingindex.js file as an entry point. All other code resides in theapp directory.

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 theTitle component.

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 theAboutButton component.

For components which need to use Redux state and dispatch actions (connected components), we connect them once in the subpackage index and pass the received props to containers or views the same as previous components. You can check the example in theHelpButton component.

1. Installnpm
2. From the root directory of the repository executenpm i

From the root directory of the repository executegulp serve

From the root directory executereact-native run-ios or openios/ReactNativeCodeReuse.xcodeproj with XCode and run the project.

From the root directory executereact-native run-android