React Native Starter

Starting point for react native apps

###Setup the project in Xcode

Clone the project and npm install in the root of your folder.

Then npm start in the root, this will start up your webpack-dev-server.

Open the project ReactNativeStarter.xcodeproj (found in the ios directory) and click on the project (top left) and select SHORTLIST MEDIA LTD as your team, then run the project (cmd + r).

##Build and run the app on a device

Go to the AppDelegate.m file of Xcode, and change the varaiable on line 20 to contain your IP address. (you can get this by typing ifconfig into the terminal). Make sure your computer and phone are on the same WIFI network. (You may need to stop the server and npm start again). Your phone will also need to be plugged into your computer.

Once it is running on your phone, shake your phone to open the development menu and select `Enable Live Reload' so that you do not need to reload the app in Xcode anytime a code change is made.

The following does not work yet (them not me) but I figured out how to do it so thought it was worth noting down still.

You will also want to enable Enable Chrome Debugging too so go into the RCTWebSocketExecutor.m file in Xcode (Libraries/RCTWebSocket.xcodeproj) and change the localhost in this file to your IP address too. Then save, shake the phone and select 'Debug in Chrome'.

##Additional installs

• React Native Device info - I have done iOS, will need to do Android when I get it working on a device.

Include the following at the top of your JS component when you want to include it - import DeviceInfo from 'react-native-device-info'

• Parse React

Include the following at the top of your JS component when you want to include it

import Parse from 'parse/react-native' import ParseReact from 'parse-react/react-native'

##Routing

Used react-native-router-flux to get started with routing

**Scripts for renaming the project

Follow instructions in this article

You will also want to change the name in the AppDelegate.m file in Xcode. Scroll down and look at the RCTRootView and you will need to change line 47 moduleName:@"ReactNativeStarter" to the name of the project you want.

After this quit the terminal that the app server opened up in earlier as this localhost:8081 will be pointing to the wrong place. Then run the app again, restarting a new localhost:8081 server.

Useful packages

React Native Side Menu

Google Ad Mob Banners

Background Geo Location

Google Material Design UI Kit

Native Blur of images and components

Animate.css for React Native

Simple wrapper around Push Notifications

Simple wrapper around File System access

Apple iAd (deprecated)

Parallax Image View

React Parts

React.Parts has a great list of userland React Native modules.

Reduce submissions to the app store

Microsoft have a service that allows you to push image assets and javascript to your device without needing to do an Apple submission:

Microsoft Code Push