How to run an iOS application through React Native

    image

    This is a translation of the original article by a programmer blogging under the pseudonym Soujanya PS. She is a professional and likes not only to develop applications and services, but also to write articles about this. Here is an overview of launching an iOS application using the React Native framework.

    Not long ago, I started using React Native for iOS programs. This is my first deep immersion into the native application development environment. I note that I was surprised by the ease of the whole process, as well as the level of abstraction that the React Native command line interface provides. Actually, this was one of the factors that prompted me to write about this framework. I would like to share my own experience with those who have just started working with him.

    Skillbox recommends: “Mobile PRO Developer” .
    We remind: for all readers of "Habr" - a discount of 10,000 rubles when writing to any Skillbox course on the promotional code "Habr".

    React Native provides command line tools for running iOS and Android applications on emulators and devices. Let's try to understand what and how to do to deploy React Native application for iOS.

    Actually launch


    React Native provides an excellent utility called init. It provides an application template, while simultaneously creating relevant Xcode project files in the iOS folder of this application.

    It, in turn, can be launched both in the iOS emulator environment and on the phone / tablet by entering the following command in the root folder of the application:

    react-native run-ios

    Successful execution of the command is followed by launching the application in the emulator or on the device. We tell what to do for this.

    Run ios command


    React Native provides the developer with several command-line utilities that allow you to interact with the application. They are located in the local-cli folder of the React Native module nodes. Run-ios is one of the utilities that runs the runIOS () function defined in the runIOS.js file.

    Run-ios allows you to use the following options:
    #Launch the the app on a specific simulator
    the React-native the run-of ios --simulator «the iPhone 5»

    #Pass a the non-standard location The directory of iOS
    the React-native the run-of ios --project-path "./app/ios"

    #run on a the connected device, the eg the iPhone's Max
    the React-native the run-of ios --device «Max's the iPhone»

    #Build the the app in the Release mode
    the React-native the run-of ios --configuration the Release

    Device / Emulator Selection


    If the device is not set, then run-ios will start the debug mode of the application in the emulator by default. This is possible thanks to the execution of a series of xcrun / simctl commands. First, we check the list of available emulators, select one of them and download the application in its environment.

    If you want to run the application on a physical device, simply connect it to your laptop and set the details through run-ios.

    The next step is to create an Xcode application project.

    Application code


    Usually the Xcode project of the React Native application is located in the iOS folder in the root directory. The xcode project is created using the xcodebuild command. Any parameters previously set for run-ios are passed to this command.

    Once the project is created, the application is installed and launched on the emulator or the connected device.

    Adding application code in debug mode


    During the entire development process, React Native dynamically loads your code. In order for everything to go smoothly and the code is available as needed, you will need a server.

    While the Xcode project is in the process of debugging, the Metro server is launched in parallel with it. It is used by applications that are created using the React Native command line interface. All this allows you to speed up and simplify the process using a hot boot and other methods.

    By default, Metro listens on port 8081. As soon as the application is running in the emulator, a request is sent to the server.

    #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
 moduleName:@"MobileApp    
 initialProperties:nil    
 launchOptions:launchOptions];

    The server loads all the necessary dependencies, collects the JavaScript code and sends it to the application. After this step, you can see the running application in the emulator or on a connected device.

    Package JavaScript Package


    In release-mode, you need to pre-pack JavaScript by placing it in the application. This requires some changes to ensure that the static package can be downloaded. You need to change jsCodeLocation in the AppDelegate.m file, specifying the location of the static package outside of debug mode:

    #ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

    Now this is an indication of the resource file main.bundle, which appeared during the processing of the Xcode project. At this stage, the react-native-xcode.sh script is launched. It can be found in the scripts folder of the React Native module.

    Creating an application from Xcode


    You can create an Xcode project directly on the Mac instead of using the React Native CLI. After creation, the application can also be run on an emulator selected in the Xcode options, or on a physical device.



    I hope that this material has helped you understand the processes that are launched when the react-native run-ios command is executed, which creates magic and allows the application to run in the iOS environment.

    Skillbox recommends:

    Tags:

    Also popular now: