react native-tutorial

React Native  Running IOS

To execute an app on iOS and Android simulators and devices, React-Native offers command line facilities. Without further ado, let’s attempt to comprehend the why and how of how React-Native apps are executed on iOS.

Behind the scenes

This useful tool named init is provided by React-native. For you, it generates a native app template. This template generates the necessary Xcode project files in the app’s iOS folder.

By executing the following command in an app’s root folder, React-Native apps can be launched on iOS simulators and actual iOS devices:

react-native run-ios

If executed successfully, the app would launch on a connected device or simulator. When we run the aforementioned command, a number of procedures are carried out in order for this to occur.

run-ios command

To work with the app, React-Native offers a number of command-line tools. These can be found in the React-Native node module’s local-cli subdirectory. One such tool that uses the runIOS() function from the runIOS.js file is run-ios. Some options are supported by run-ios, including:

#Launch the app on a specific simulatorreact-native run-ios --simulator "iPhone 5"
#Pass a non-standard location of iOS directoryreact-native run-ios --project-path "./app/ios"
#Run on a connected device, e.g. Max's iPhonereact-native run-ios --device "Max\'s iPhone"
#Build the app in Release modereact-native run-ios --configuration Release

Device/Simulator selection

Run-ios would launch the app in Debug mode on a simulator by default if no device was given. To accomplish this, run a sequence of xcrun simctl commands. They would first look through the list of Mac simulators that were offered, choose one, and then start that simulator.

Alternatively, if you want to launch the programme on a physical device, connect it to the Mac and then supply the run-ios command with the device information.

The Xcode project for the app must be created next.

Creating the app code

Usually, the iOS folder under the root folder is where you may find the React-Native app Xcode project. The xcodebuild command is used to create the Xcode project. This command receives any parameters supplied to run-ios, such as configuration options.

The Xcode project is created in Debug scheme by default. On the simulator or the connected device, the app is installed and run after the project has been successfully built.

Bundling of app code in Debug Mode

React Native loads our JavaScript code dynamically at runtime during the development process. We require a server to bundle our app code and deliver it as required for this.

Metro server is launched concurrently when the Xcode project is being created in Debug mode. Apps made with the React-Native command line interface use the Metro bundler (CLI). When developing our software, it is utilised to bundle the code. By enabling hot reloading and other features, it makes debugging quicker and simpler.

By default, the Metro server is set up to launch on port 8081. A request for the bundle is made to the server once the programme has been launched in the simulator.

The bundle request is sent via the following

#Code in AppDelegate.m sends the request for the bundle: #index.bundle to serverjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation  modul

The JavaScript app code is then bundled by the server and sent back to the app after it has downloaded all necessary dependencies. Following this, you can use the simulator or a connected device to view the app in action.

Creating the app using Xcode

As an alternative to utilising the React-Native CLI, the Xcode project can alternatively be produced within Xcode on a Mac. Once finished, the programme can be launched on a connected physical device or a simulator chosen from Xcode’s settings.

Options in the Xcode menus to create an app and run it on a simulator


Leave a Reply

Your email address will not be published. Required fields are marked *