Zapp React Native Starter Project
The Zapp React Native starter project is a template project meant to streamline the development of React Native plugins for the Zapp platform.
This project can be used both for local development and as a template for a brand new plugin. The code for the project can be found here. It is a Github template that can be used to simplify generating a new project.
Contents
The template repository contains the following:
- React Native app based on RN 0.59 with 1 screen containing a headline and a printout of the initial props
- Sample plugin manifest
Running the React Native Bundle
In order to run this project simply:
- Run either
npm i
oryarn
to install all the necessery dependencies. - Run
react-native start
to start the React Native web server.
Building Deployable Files
The starter project contains a basic build script to generate deployable React Native bundles by running either npm run-script build
or yarn build
.
The following structure is used to generate the bundles:
<project_folder>/build/android
<project_folder>/build/ios
This can be used in a CI script in order to generate bundles and then deploy them to S3 for example.
Note: For single bundle instructions - an NPM package should be used. For more info on Single Bundle - click here.
Testing
In order to simplify testing we have created a Zapp app that contains a React Native screen plugin to be used during development with a local running React server. By following these steps, a developer could run their local version of the plugin within a fully featured Zapp App enviornment.
iOS
Testing on a Device (Preferred methodology)
- If you have access to Zapp, please use the following app family and download the latest iOS build or alternatively download the version from hockey app
- After the app is installed on the device, launch it and then kill it from the background
- Go to the device settings app -> Zapp React Native Starter App
- Under React Native Bundle -> Turn off
Allow Caching
- On the device -> Change the server type to
Custom
and change the IP to your computer's IP address running the RN project in theCustom
field - Run the app
- Click on the side menu in the top left corner of the screen (It's a white button, it may be hard to see)
- Select
RN Starter
- Shake the phone to display the pop up debug menu and select
Enable Remote Debugging
Testing on the Simulator (Advanced)
This option will run the Zapp project inside Xcode and is mainly meant to enable debugging both the React Native and Native integrations. For more about downloading dev projects please click here.
- Download the latest zipped dev project for iOS from: https://zapp.applicaster.com/app_families/1554
- Open the workspace file from the unzipped directory
- Choose the simulator as the target. Run the app and stop it once it launched.
- Go to the device settings app -> Zapp React Native Starter App
- Under React Native Bundle -> Turn off
Allow Caching
- Change the React Native server type to
Local
- Run the app
- Click on the side menu in the top left corner of the screen (It's a white button, might be hard to see)
- Select
RN Starter
- Click
Cmd + d
on the simulator to display the pop up debug menu