This is a boilerplate for distributable React Native components with native code (iOS & Android). It has unit tests for native code, and integration tests for automated testing on emulators or devices. The boilerplate contains a simple HelloWorld component that is backed by native code.
When published and installed via npm, the resulting package supports automatic linking of the native code. You can install and link the HelloWorld component like this:
npm install react-native-helloworld
react-native link react-native-helloworld
For a full explanation of the layout, see this article.
There are 3 sets of 3 projects (JS, Obj-C & Java). The first set is for the component code:
/
/android
/ios
The second set is for unit- and integration tests:
/tests
/tests/android
/tests/ios
The third set is just a sample project to demonstrate usage of the components. The Android and iOS parts are just the standard React Native boilerplate:
/example
/example/android
/example/ios
For development of the component code, first run npm install in the tests-folder. Since the
native code is linked directly in the test-projects, they serve as a context you can develop it in
(the root projects only link React/Native as peer dependencies).
If you open /tests/ios/HelloWorldTests.xcodeproj in XCode, you can edit the native code and
unit tests side-by-side. You'll find the native code under Libraries/HelloWorld.xcodeproj.
Unit- and integration tests can be run together in the standard test-runner with ⌘+U.
Open /tests/android in Android Studio, and you'll find both the native code and the unit tests
in the project view. The unit tests can be run by right-clicking the package containing the tests,
and choosing Run Tests in tests.
There is not yet an automatic test runner for integration tests on Android, but you can run them by
firing up /tests as a normal React Native app on an Android emulator or device, and selecting the
tests manually from a list.
To develop the JS-components and the integration tests, just open /tests in your editor of choice
(f.ex. Atom or WebStorm). The /tests/symlinks-folder links in the code from the root projects
for convenience.
Integration tests are located under /tests/integration-test.
There is a script /tests/make-copies.sh that copies the JS-code from the root project into a
folder /tests/copies. This is because the React Native packager doesn't follow symlinks. When
running the integration tests through XCode, this script is run automatically.
Since this project aims to demonstrate native code bundling, we haven't included any unit-tests for the JS components. But if you add Jest-tests, they're automatically excluded from the npm bundle.
The /example folder contains a React Native app that demonstrates usage of your components.
Ideally, you only touch the JS-code, and leave the React Native
boilerplate as it is.
To run it, first do an npm install from the /example folder, then react-native link.
For iOS simulators or Android, you can run react-native run-ios or react-native run-android
from the same folder.
To run on an iOS device, open the /example/ios/HelloWorldExample.xcodeproj
in XCode, select a development team for code signing (under the General tab of each target in the
project settings), and hit ⌘+R.
Once you have finished your components, you can run a normal npm publish from the root folder. The
/tests and /example folders are automatically excluded from the package.
Once installed and linked in a project, your components can easily be imported:
import HelloWorld from 'react-native-helloworld';
function MyComponent() {
return <HelloWorld />;
}