This is a cheatsheet on starting up a React Native project using Material UI on a Mac. This uses the React Native Material Kit (RNMK) template.

This is an abbreviated version of what you'll find in the React Native and RNMK docs. Note: I'm skipping the Xcode install steps for iOS development.

React Native Setup

Install dependencies:

brew install node
brew install watchman

Install React Native CLI

npm install -g react-native-cli

Install Yarn

If you're going to create more than one React Native project, install Yarn to save time:

brew update
brew install yarn

Create React Native RNMK Project

Create and optionally run the RNMK project. We'll link to this project for our own projects

react-native init rnmk
cd rnmk
react-native run-ios  # or run-android

Run the commands to install RNMK:

npm install -S react-native-material-kit
react-native link react-native-material-kit

Xcode Settings for iOS

Open the rnmk/ios/rnmk.xcodepoj file in Xcode.

• Add the node_modules/react-native/material-kit/iOS/RCTMaterialKit.xcodeproj to your xcode project under Libraries group (this is normally automatically setup) by dragging it from the Finder to the Xcode libraries.
• Add libRCTMaterialKit.a to build target's Linked Frameworks and Libraries list (there's an example screen shot here) from Libraries > RCTMaterialKit.xcodeproj > Products to the Linked Frameworks.

Run the project in Xcode and you should see the iOS simulator start a display a welcome message.

Install & Run CocoaPods (iOS only)

If you're going to develop for iOS, then it's a good idea to install CocoaPods.

sudo gem install cocoapods

Create a PodFile in the ios directory of your project:

project '/path/to/rnmk/ios/YourProject.xcodeproj/'

pod 'React', :subspecs => ['Core', 'RCTText', 'RCTWebSocket'], :path => 'node_modules/react-native'
pod 'react-native-material-kit', :path => 'node_modules/react-native-material-kit'

post_install do |installer|
  target = installer.pods_project.targets.select{|t| 'React' == t.name}.first
  phase = target.new_shell_script_build_phase('Run Script')
  phase.shell_script = "if nc -w 5 -z localhost 8081 ; then\n  if ! curl -s \"http://localhost:8081/status\" | grep -q \"packager-status:running\" ; then\n    echo \"Port 8081 already in use, packager is either not running or not running correctly\"\n    exit 2\n  fi\nelse\n  open $SRCROOT/../node_modules/react-native/packager/launchPackager.command || echo \"Can't start packager automatically\"\nfi"
end

Run CocoaPods:

cd ios
pod install

Run RNMK

Run RNMK from the project root directory to make sure there are no errors. You should end up with a screen with a welcome message in the iOS or Android emulator.

react-native run-ios  # or run-android

Create Your Project Using RNMK Demo

The RNMK demo project is on GitHub here. Here are the commands to start a new project based on the demo code, including link this to the base RNMK install we just completed:

git clone https://github.com/xinthink/rnmk-demo.git
npm install

Open the rnmk/ios/rnmk.xcodepoj file in Xcode and perform the steps described above. Then run the app from Xcode.

I also ran into a build error and had to take the steps described here to address that issue. The build error was:

ld: file not found: .../Debug-iphonesimulator/Example.app/Example