How to deploy a React Native App for iOS, Android and Windows.

by Sona James

on January 2, 2018

React Native is a library for creating mobile applications using familiar web technologies without sacrificing performance or the look and feel typically associated with fully native applications. It is built on top of Facebook’s open source JavaScript library, React and, indeed, iOS, Windows and Android applications created using the library are primarily written in JavaScript.

Create react-native project

Use this command to create your new react-native-project

react-native init HelloWorld.

Running your app on ANDROID

1. Install Android Studio
2. Install the Android SDK
3. Open your android studio , file-> open -> and browse to your project folder HelloWorld-> android
4. Run the app from Run-> Run ‘app’

How to change app name

You can change your app name by editing app_name  in strings.xml file. app/src/main/res/values/strings.xml

How to change app icon

You can change the app icon by adding the icons  in mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi and change the android:icon=@mipmap/ic_launcher

Value in AndroidManifest.xml file

Generate signed APK

To generate signed apk you need to create a keystore for your project and  keep this keystore secure. We need this keystore for further updates of the app.

Build -> Generate Signed apk

In keystore section create new if you dont have one already or select the path to existing one.

You need to specify the keystore password, key password and alias and need to specify one certificate detail for generating new Keystore.

After that click next and then finish.

Running your app on IOS.

Once you have your React Native project initialized, you can run react-native run-ios inside the newly created project directory. If everything is set up correctly, you should see your new app running in the iOS Simulator shortly.

 Specifying a device

You can specify the device the simulator should run with the –simulator flag, followed by the device name as a string. The default is “iPhone 6″. If you wish to run your app on an iPhone 4s, just run react-native run-ios –simulator=”iPhone 4s”.

Running your app on IOS device.

1).Plug in your device via USB

Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the iosfolder in your project, then open the .xcodeproj file within it using Xcode.

If this is your first time running an app on your iOS device, you may need to register your device for development. Open the Product menu from Xcode’s menubar, then go to Destination. Look for and select your device from the list. Xcode will then register your device for development.

2). Configure code signing

 Register for an Apple developer account if you don’t have one yet.

Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the “General” tab. Go to “Signing” and make sure your Apple developer account or team is selected under the Team dropdown.

Repeat this step for the Tests target in your project.

3). Build and Run your App.

If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (⇧⌘2). You can now press the Build and run button (⌘R) or select Run from the Product menu. Your app will launch on your device shortly.

If you run into any issues, please take a look at Apple’s Launching Your App on a Device docs.

Things to Do Before Deployment for IOS

Here is the list of things you should set out to achieve before even thinking of submitting for actual release:

Create the appropriate Apple Developer account (personal or business)

After creating the provisioning certificate, In Xcode menu,Select the device as Generic IOS Device .

Product->Clean and build your application.

If the provisioning certificate is not valid,it will lead to build failed with an error.If so you have to change it to a valid certificate through your project->build settings.Else if build succeeded just leave this step.

Then select Product->archive,it will create an archive file in Organiser->archives and open it up for you after archive finished.

Once archive is successfully completed it will open in Organizer window

Then select the export function from the right side section.

Select a method for export  as per your need and click on Next button.

Then choose your development team to use for provisioning.

Then select the required device support as per your need and click on Next button.

Then it shows the summary  and click on Next button.

Now choose the location where folder is to be saved and Click on Export

If you want to take diavi build please upload the .ipa file to this site.

If you want to take itunes build ,

Please select open xcode ->development tool  ->Application Loader from xcode seen in the  top    left  corner of the window

In application Loader choose your development team to use for provisioning from the left top corner ande choose the .ipa file from the bottom left side

Submitting the app to itunes by using the followinglink.

If we want to take another build  or change version we need to change the build number and version number in the xcode.

Things to Do Before Deployment for Windows.

Windows 10:Currently, only Universal Windows Platform (UWP) applications are officially supported. You may be able to do development from an older version of Windows as long as you have a Windows 10 device available to run the application on remotely.

Configure Your Project for Windows Development

  • Use ReactNative0.41.0 or higher in package.json.
  • Install the React Native Windows CLI Plugin: npm i –save-dev rnpm-plugin-windows.
  • Run the Windows initialization command: react-native windows –windowsVersion 0.41.0-rc.0.
  • Open MyProject/windows/MyProject.sln in Visual Studio.
  • Follow the prompts to install the Windows 10 SDK v. 10.0.10586.0
  • Note: You’ll only have to do this step once per machine.
  • If prompted, select Developer Mode in the Settings window under “Use developer features” and approve the Certificate Installation request.

  • Run your application react-native run-windows.
  • Now you can start building your React Native Windows Application. With UWP, you can target your application at any device running Windows 10, from headless IoT devices to HoloLensto Xbox and of course desktops/laptops and phones!

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success