Skip to content

shortlist-digital/react-native-starter

Repository files navigation

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'.

####On device for presentation

  • Plug in phone

  • Product -> Archive

  • Export (right menu)

  • Check Save for Development Deployment -> Next

  • Select Shortlist Media as your Dev Team might already be selected in which case click choose)

  • Keep export one all for all compatible devices selected -> Next

  • Open Window -> Devices

  • Add the ipa file via the + button

##Additional installs

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

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 need 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 56 moduleName:@"ReactNativeStarter" to the name of the project you want.

You will also need to change the last line in index.ios.js and index.android.js to point to the name of your app and not ReactNativeStarter.

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

Maps

Useful articles

Adding custom fonts

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

Gotchas

  • Naturally views in iOS are not scrollable so you'll see in launch.js I have wrapped everything in <ScrollView> with the child container width and height 100%, and a margin to reflect the top navigation bar and bottom tab bar. I have only done it on this page, so if it is necassary on all pages it will need to be done.

About

Starting point for react native apps

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published