500Docs
  • React Libraries
  • SSR
  • React Native

›React Native

React Libraries

  • Calendar

Server-Side Rendering

  • Setup
  • Redux Integration

React Native

  • Tools
  • Setup (iOS)
  • Setup (Android)
  • Running a Project
  • Linking Libraries
  • Debugging
  • Appcenter
  • Detox
  • Bugsnag
  • Notifications
  • Routing
  • Splash Screen
  • RTL
  • Animations
  • Common Problems

Setup (iOS)

Create a project with react-native init $PROJECT_NAME$

Project Initialization

It is recommended to use Cocoapods - many native libraries on iOS are dependant on it. Cocoapods is the primary dependencies manager for iOS (like npm for web)

  • Inside project’s root, run cd ios && pod init - it creates a Podfile, and /Pods folder.
  • Replace Podfile’s content with (don’t forget to change project’s name):
## !! CHANGE THE PROJECT NAME TO YOUR PROJECT'S !! ##
target ${PROJECT_NAME} do
  platform :ios, '9.0'

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end

# Fixes an issue that happens with Xcode > 9: https://github.com/facebook/react-native/issues/20492
post_install do |installer|
  installer.pods_project.targets.each do |target|

    # The following is needed to ensure the "archive" step works in XCode.
    # It removes React & Yoga from the Pods project, as it is already included in the main project.
    # Without this, you'd see errors when you archive like:
    # "Multiple commands produce ... libReact.a"
    # "Multiple commands produce ... libyoga.a"

    targets_to_ignore = %w(React yoga)

    if targets_to_ignore.include? target.name
      target.remove_from_project
    end

  end
end
  • Run pod install in same folder
  • Most of RN’s 3rd party libraries, that use native code, support Pods. After some time, your Podfile will look something like this
  • From this point, every time you install a 3rd party native library, after running react-native link, you need to run pod install again to update you project

After initializing the Podfile & installing Pods, when opening the project in Xcode, you'll be opening your project from ios/YourProject.xcworkspace instead of ios/YourProject.xcodeproj:

You'll see that your project now contains both your initial project AND Pods libraries


Scheme

An Xcode scheme defines a collection of targets to build, a configuration to use when building, and a collection of tests to execute.

On RN project initialization, there's only 1 scheme, which is used to build apps in debug mode. We need to create another scheme, which will be used to create an app in release mode.

  • Open the schemes list, and select 'Edit':
  • Duplicate the current scheme, give it a new name ('$PROJECT NAME$ - Release', for example):
  • In 'Run' tab, select 'Release':

Now you can run the app in Release mode, without archiving it for production. This is a good way to check your app just before distributing it.

To run a specific scheme, use react-native run-ios --scheme"$SCHEME NAME$"


Simulators

Running react-native run-ios will automatically open a simulator. It's always good to test your app on number of simulator, as different iPhones have different resolutions & the newer ones have a notch on their screen.

To run a specific simulator, use react-native run-ios --simulator="iPhone XS Max" (iPhone 5, iPhone 8, iPhone XR...)

Last updated on 2/10/2019 by Vova Porton
← ToolsSetup (Android) →
  • Project Initialization
  • Scheme
  • Simulators
Copyright © 2020 500Tech