How To Deploy A React Native App For iOS, Android and Windows.

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 the app name

You can change your app name by editing app_name  in the 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-dpi, mipmap-xhdpi, and mipmap-xxhdpi and change the android:icon=“@mipmap/ic_launcher“

Value in AndroidManifest.xml file

Generate signed APK

To generate a signed app 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 app

In the Keystore section create a new one if you don’t have one already or select the path to an existing one.

You need to specify the Keystore password, key password rd, and alias and need to specify one certificate detail for generating a 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 an 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 ios folder 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 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 the 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 the building failing with an error. If so you have to change it to a valid certificate through your project->build settings. Else if the 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 the archive is finished.

Once the archive is completed it will open in the Organizer window

Then select the export function from the right side section.

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

Then choose your development team to use for provisioning.

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

Then it shows the summary and clicks on the Next button.

Now choose the location where the 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 and choose the .ipa file from the bottom left side. Submitting the app to iTunes by using the following link. If we want to take another build or change the version we need to change the build number and version number in the code.

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 rpm-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!