BigBinary Blog

Running React Native dependent animations on UI thread using Reanimated

2023-03-13T12:00:00+00:00

Here we have a slider. When the user slides the slider, the loader needs to showhow much is loaded. We want to animate the loader component when the slidermoves. In other words, the loader animation is "dependent" on the slideranimation.

This is an example of Dependent Animations on the UI thread. DependentAnimation is when one view is animated based on another element.

first we need a gesture handler to detect the slider events. Then, based on theslider events we need to animate the progress ofthe loader component.

Building gesture handler to detect the slider events

const [width, setWidth] = useState(200);const x = useSharedValue(0);const gestureHandler = useAnimatedGestureHandler({  onStart: (event, ctx) => {    x.value = event.absoluteX;  },  onActive: (event, ctx) => {    x.value = event.absoluteX;    // We need to calculate `progress` here based on the slider position.  },});const animatedStyle = useAnimatedStyle(() => {  return {    transform: [      {        translateX: x.value,      },    ],  };});return (                        );

Loader component:

Animate the loader based on the slider position

Before we move further, let's understand the difference between UI Thread and JSThread. The UI Thread handles rendering and gestures of Android and iOS views,whereas the JS Thread takes care of all the logic of the React Nativeapplication.

We have two approaches for animating the loader.

In the first approach, when the slider moves, we can store the progress inreact state and pass it to Lottie animation. Withthis approach, the entire component rerenders on setting the progress.

const [progress, setProgress] = useState(0);const gestureHandler = useAnimatedGestureHandler({  onStart: (event, ctx) => {    x.value = event.absoluteX;  },  onActive: (event, ctx) => {    x.value = event.absoluteX;    runOnJS(setProgress)(x.value / width);  },});;

In the second approach, when the slider moves, we can calculate progress andpass it to the loader component via theuseAnimatedProps.In this way, the progress gets calculated on the UI thread itself. Hence itavoids rerenders.

const LottieAnimated = Animated.createAnimatedComponent(Lottie);const [progress, setProgress] = useState(0);const lottieAnimatedProps = useAnimatedProps(() => progress: x.value / width);const gestureHandler = useAnimatedGestureHandler({  onStart: (event, ctx) => {    x.value = event.absoluteX;  },  onActive: (event, ctx) => {    x.value = event.absoluteX;  },});;

Conclusion

With the first approach, whenever the slider moves, the UI thread will pass thegesture event to the JS thread to store the progress value in react state, andwhen the progress value changes in the JS thread, it causes a re-render. Thisapproach creates a lot of traffic overCommunication Bridgebecause of the message exchange between UI and JS threads.

So we should prefer the second approach to run any calculations on the UI threadinstead of the JS thread. Here is the entire code for reference:

let approach1ReRenderCount1 = 0;const Approach1: () => Node = () => {  const [width, setWidth] = useState(1);  const x = useSharedValue(0);  const [progress, setProgress] = useState(0);  const gestureHandler = useAnimatedGestureHandler({    onStart: (event, ctx) => {      x.value = event.absoluteX;    },    onActive: (event, ctx) => {      x.value = event.absoluteX;      runOnJS(setProgress)(x.value / width);    },  });  const animatedStyle = useAnimatedStyle(() => {    return {      transform: [        {          translateX: x.value,        },      ],    };  });  return (           {          setWidth(width);        }}      >        Approach 1                  Rerender Count : {approach1ReRenderCount1++}                                                                                                          );};const LottieAnimated = Animated.createAnimatedComponent(Lottie);let approach2ReRenderCount = 0;const Approach2: () => Node = () => {  const [width, setWidth] = useState(1);  const x = useSharedValue(0);  const lottieAnimatedProps = useAnimatedProps(() => progress: x.value / width);  const gestureHandler = useAnimatedGestureHandler({    onStart: (event, ctx) => {      x.value = event.absoluteX;    },    onActive: (event, ctx) => {      x.value = event.absoluteX;    },  });  const animatedStyle = useAnimatedStyle(() => {    return {      transform: [        {          translateX: x.value,        },      ],    };  });  return (           {          setWidth(width);        }}      >         Approach 2                  Rerender Count : {approach2ReRenderCount++}                                                                                                          );};

How to remove the white screen just before the splash screen in Android

2022-07-28T12:00:00+00:00

In order to add a splash screen, we'll use thereact-native-splash-screenpackage. While most of the job is done by following the installation steps,there are some additional steps we need to follow for Android.

There's a concept known as the "preview window" in Android which serves a basicpurpose of faking a fast launch of an app when the app icon is clicked. Whilepreview window fakes fast launching, it shows an empty white screen until theapp has loaded. More info available inthisarticle.

The preview window can itself be disabled by adding the following line in theandroid/app/src/main/res/values/styles.xml file.

true

However, disabling the preview window introduces an undesirable delay betweenclicking on the app icon and the actual launching of the app.

We can get rid of the delay and the empty white screen by adding an additionalsplash activity.

Additional steps for Android

Create a background_splash.xml file with the same design you used inlaunch_screen.xml during the installation above.
Place this new xml file inside the android/app/src/main/res/drawabledirectory.
Create a new splash theme in the android/app/src/main/res/values/styles.xmlfile by adding the following snippet.

Create a new splash activity to call the main activity, and add the followingcode in it.

package com.example;import android.content.Intent;import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;public class SplashActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState){        super.onCreate(savedInstanceState);        Intent intent = new Intent(this, MainActivity.class);        startActivity(intent);        finish();    }}

Finally, we will call this activity first on launch with the splash theme wecreated above.
Add the new activity in AndroidManifest.xml.
```
            
```
The intent-filter tag, with its "MAIN" action and "LAUNCHER" categorychildren, allows us to call this new activity first on launch. It's usuallyfound in the main activity by default, so we have to remove them entirely fromthere, leaving them exclusively in SplashActivity.

Once we've done all this, we can rebuild the app and run it withnpx react-native run-android to see the splashscreen we created.

The app should now launch quickly with no empty white screen on startup.

Playing videos in React Native

2021-09-14T12:00:00+00:00

These days, a large number of mobile apps allow users to upload videos and playthose videos efficiently. While building these features in a React Native app, weran into some challenges. In this blog, we will discuss those challenges and thesolutions.

Where to host the videos

Since we are dealing with video,s we need a service that will store, host, encodeand be a CDN. After looking at various service providers, we decided to go withCloudinary. Cloudinary is a service provider with anend-to-end image/video-management solution for web and mobile applications,covering everything from uploads, storage, manipulations, optimizations todelivery with a fast content delivery network (CDN).

Setting up react-native-video player

We decided to usereact-native-videov5.1.1 for playing videos in React Native application. Here is theguide to setup the video player.

import Video from "react-native-video";const Player = ({ uri }) => {  return (                );};

The above code snippet works perfectly on iOS but not on Android. On Android, wefaced aknown issuewhere the video doesn't play, but the audio plays with significant delay. Thisissue can be resolved by settingexoplayer as thedefault player for Android in react-native.config.js in the root directory ofthe project.

module.exports = {  dependencies: {    "react-native-video": {      platforms: {        android: {          sourceDir: "../node_modules/react-native-video/android-exoplayer",        },      },    },  },};

Setting up Cloudinary

A Cloudinary account is required before proceeding. Once the account isready, following are the steps to enable unsigned upload for the account.

Go to the Settings of Cloudinary.
Select the Upload tab.
Search for Upload presets section.
Click on Enable unsigned uploading.

This generates an upload preset with a random name, which will be required forthe unsigned upload.

Setting up Client for Upload

Selecting Video from the gallery

We decided to usereact-native-image-crop-pickerv0.36.2 library to select the video from the gallery. Here is theguide forsetting it up.

import ImagePicker from "react-native-image-crop-picker";const selectVideo = ({ setVideoToUpload }) => {  ImagePicker.openPicker({ mediaType: "video" })    .then(setVideoToUpload)    .catch(console.error);};

Uploading Video

// Cloud Name: Found on the Dashboard of Cloudinary.const URL = "https://api.cloudinary.com/v1_1//video/upload";// Random Name: Generated After Enabling The Unsigned Uploading.const UPLOAD_PRESET = "";const uploadVideo = (fileInfo, onSuccess, onError) => {  const { name, uri, type } = fileInfo;  let formData = new FormData();  if (uri) {    formData.append("file", { name, uri, type });    formData.append("upload_preset", UPLOAD_PRESET);  }  axios    .post(URL, formData, {      headers: { "Content-Type": "multipart/form-data" },    })    .then(res => onSuccess(res.data))    .catch(error => onError(error));};export default { uploadVideo };

Fetching Videos on client

import base64 from "base-64";// API Key and Secret: Found on the Dashboard of Cloudinary.const API_KEY = "";const API_SECRET = "";const URL = `https://api.cloudinary.com/v1_1//resources/video`;const getVideos = (onRes, onError) => {  axios    .get(URL, {      headers: {        Authorization: base64.encode(`${API_KEY}:${API_SECRET}`),      },    })    .then(res => onRes(res.data.resources))    .catch(error => onError(error));};export default { getVideos };

Response:

{  "resources": [    {      "asset_id": "475675ddd87cb3bb380415736ed1e3dc",      "public_id": "samples/elephants",      "format": "mp4",      "version": 1628233788,      "resource_type": "video",      "type": "upload",      "created_at": "2021-08-06T07:09:48Z",      "bytes": 38855178,      "width": 1920,      "height": 1080,      "access_mode": "public",      "url": "http://res.cloudinary.com/do77lourv/video/upload/v1628233788/samples/elephants.mp4",      "secure_url": "https://res.cloudinary.com/do77lourv/video/upload/v1628233788/samples/elephants.mp4"    }    //...  ]}

Transforming uploaded videos for faster delivery

One way to play a video is to first completely download the video on theclient's device and then play it locally. The biggest drawback of this approachis that it could take a long time before the video is fully downloaded and tillthen the device is not playing anything at all. This strategy also requires asophisticated algorithm to manage memory.

Another solution is to useAdaptive Bitrate Streaming(ABS)for playing videos. As the name suggests in this case, the video is beingstreamed. It is one of the most efficient ways to deliver videos based on theclient's internet bandwidth and device capabilities.

To generate ABS, we add an eager transformation to the upload preset we createdwhile setting up the Cloudinary account earlier.

An eager transformation runs automatically for all the videos uploaded using theupload preset which has the transformation added.

Setup Transformation

Here are the steps for adding an eager transformation to the upload preset.

Go to the upload preset that was generated when the unsigned upload wasenabled while setting up Cloudinary in the earlier section.
Click on edit.
Go to the Upload Manipulations section.
Click on Add Eager Transformation to open the Edit Transaction window.
Open the Format dropdown under the Format & shape section and selectM3U8 Playlist (HLS).
Select any streaming profile from the dropdown under the More options. Anyprofile matching your maximum required quality can be selected here.

Next upload a video with the same preset, trigger the transformation to generateThe M3U8 format, which is the one we need for playing the videos as streams.

Consuming video streams

To play streams, the type property must be provided to thereact-native-video's source prop. In this case, type will be m3u8. Also,the URI needs to be updated with this same extension.

- source={{ uri }}+ source={{ uri: uri.replace(`.${format}`, '.m3u8'), type: 'm3u8'}}

Conclusion

Once all the above mentioned steps were performed, we were able to uploadand stream videos on both iOS and Android without any issues.

Handling environment specific configurations in React Native

2021-04-27T12:00:00+00:00

Many modern-day applications now go through different stages of the productcycle such as development, staging, production etc.

Having different environment variables for each environment will make it a loteasier to manage any application. This article is intended to share one solutionto address this problem in React Native. We will be using a library calledreact-native-config for thispurpose; you can also tryreact-native-dotenv.

We will be focusing on having three different bundles containing configurationfiles for development, staging and production environments.

Installing react-native-config

Install the package:

yarn add react-native-config

For iOS also run pod install after package is installed.

Setup for Android

Add below line of code to android/app/build.gradle to apply plugin.

apply plugin: "com.android.application"+ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Create three files in root folder of the project .env.development,.env.staging & .env.production which will contain our environment variables.

// .env.developmentAPI_URL=https://myapi.development.com// .env.stagingAPI_URL=https://myapi.staging.com// .env.productionAPI_URL=https://myapi.com

Now we need to define envConfigFiles in build.gradle associating builds withenv files. To achieve this, add the below code before the apply from call,and be sure to leave the build cases in lowercase.

+ project.ext.envConfigFiles = [+   productiondebug: ".env.production",+   productionrelease: ".env.production",+   developmentrelease: ".env.development",+   developmentdebug: ".env.development",+   stagingrelease: ".env.staging",+   stagingdebug: ".env.staging"+ ]apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Next, add productFlavors in build.gradle, just below buildTypes.

flavorDimensions "default"  productFlavors {    production {}    staging {      // We can have build-specific configurations here. Like using applicationIdSuffix to create different package name (ex. ".staging")    }    development {}  }

Names should match based on productFlavors, so productiondebug will matchdebug in this case and generate debug build of App with configuration from.env.production.

Also add matchingFallbacks in buildTypes as shown below:

buildTypes {  debug {    signingConfig signingConfigs.debug+   matchingFallbacks = ['debug', 'release']  }  release {    signingConfig signingConfigs.debug    minifyEnabled enableProguardInReleaseBuilds    proguardFiles getDefaultProguardFil  ("proguard-android.txt"), "proguard-rules  pro"  } }

Add the below scripts to scripts in the package.json file.

"android:staging": "react-native run-android --variant=stagingdebug","android:staging-release": "react-native run-android --variant=stagingrelease","android:dev": "react-native run-android --variant=developmentdebug","android:dev-release": "react-native run-android --variant=developmentrelease","android:prod": "react-native run-android --variant=productiondebug","android:prod-release": "react-native run-android --variant=productionrelease",

Now, to have a debug build with staging environment, run:

yarn android:staging

Or, to have a release build with staging environment, run:

yarn android:staging-release

Setup for iOS

In iOS we will create three new schemes TestAppDevelopment, TestAppStaging &TestAppProduction containing configuration files for development, staging andproduction environments respectively.

To create schemes, open the project in xcode & do the following:

In the Xcode menu, go to Product > Scheme > Edit Scheme.

Click Duplicate Scheme on the bottom and name it TestAppDevelopment and checkthe shared checkbox.

We will repeat the above steps two more times (for TestAppStaging &TestAppProduction).

Now edit the newly generated scheme. Expand "Build" settings and click"Pre-actions", and under the plus sign select "New Run Script Action". Selectproject from the Provide build settings from dropdown.

Where it says "Type a script or drag a script file", type:

cp "${PROJECT_DIR}/../.env.staging" "${PROJECT_DIR}/../.env"  # replace .env.staging for your file

Add the below scripts to scripts in the package.json file.

"ios:dev": "react-native run-ios --scheme 'TestAppDevelopment'","ios:prod": "react-native run-ios --scheme 'TestAppProduction'","ios:staging": "react-native run-ios --scheme 'TestAppStaging'",

Now, to have a build with staging environment, run:

yarn ios:staging

And it will run the application with staging configuration.

Accessing environment variables

Once the setup is complete, we can access the variables as shown below:

import Config from "react-native-config";Config.API_URL;//`https://myapi.staging.com`

Handling authentication state in React Native

2021-04-06T12:00:00+00:00

Authentication flow is an essential part of any modern mobile application. Inthis article, we will see how to store and manage the authentication state inReact Native.

Storing auth data

Let's consider a basic scenario where we use a phone number and authenticationtoken for verifying API requests. Here we need to persist both the phone numberand authentication token. For storing these data we can use AsyncStorage, whichis a key-value data store commonly used to persist data locally in React Native.Even though we are storing two different values, we will always access themtogether and hence we can avoid multiple AsyncStorage calls by storing them as asingle key-value pair.

const auth = {  phone: PHONE_NUMBER, // User's phone number  token: AUTH_TOKEN, // Authentication token};AsyncStorage.setItem("auth", JSON.stringify(auth));// AsyncStorage supports only string values - so we have to serialize our object.

After storing the data we can use the AsyncStorage.getItem() API to retrieveit.

Things to keep in mind while using AsyncStorage

It should be clear from the name that AsyncStorage calls are asynchronous soconsider the following while using it.

Avoid unnecessary AsyncStorage calls - Async calls will take time and mayaffect user experience.
Reuse data once fetched - Use higher-level state or central state managementlike Context, Redux etc to manage data used in multiple places.
Asynchronous calls might fail and we should handle exceptions properly.
In Android, AsyncStorage has a 6MB hard limit. You can change it by settingAsyncStorage_db_size_in_MB value in gradle.properties file.
AsyncStorage uses SQLite so beware ofSQLite limits.

Manage auth state globally with Context API

In many apps we would use the current authentication state to displayappropriate content based on auth state, user type etc., so it's always good toput it in a centrally accessible place. We can use a central state managementlibrary like Redux or Context API. In this example we will use the built-inContext API.

Let's create an AuthContext and store all auth data in the Provider state byfetching it from AsyncStorage. We will also an API to update the data in state &AsyncStorage.

AuthContext

// Create a contextconst AuthContext = createContext({});const AuthProvider = ({ children }) => {  const [auth, setAuthState] = useState(initialState);  // Get current auth state from AsyncStorage  const getAuthState = async () => {    try {      const authDataString = await AsyncStorage.getItem("auth");      const authData = JSON.parse(authDataString || {});      // Configure axios headers      configureAxiosHeaders(authData.token, authData.phone);      setAuthState(authData);    } catch (err) {      setAuthState({});    }  };  // Update AsyncStorage & context state  const setAuth = async (auth) => {    try {      await AsyncStorage.setItem("auth", JSON.stringify(auth));      // Configure axios headers      configureAxiosHeaders(auth.token, auth.phone);      setAuthState(auth);    } catch (error) {      Promise.reject(error);    }  };  useEffect(() => {    getAuthState();  }, []);  return (          {children}      );};export { AuthContext, AuthProvider };

When using axios we can configure the default auth headers and they will be usedfor all API requests. In case you are not using axios you can still get authvalues from the context.

const configureAxiosHeaders = (token, phone) => {  axios.defaults.headers["X-Auth-Token"] = token;  axios.defaults.headers["X-Auth-Phone"] = phone;};

Now we can wrap our root component with AuthProvider and use theuseContext() API in any component to access the auth state.

Restricting routes(screens)

Displaying appropriate screens and restricting access to screens based on theauth state is a common use case. In this section, we will see how to displayLogin/Signup screens if the user is not authenticated and a Home screen if theuser is already authenticated.

const App = () => {  // Get auth state from context  const { auth } = useContext(AuthContext);  return (                  {auth.token ? (                  ) : (          <>                                          )}            );};

In the above snippet, we are conditionally rendering screens based on the authtoken rather than doing manual navigation using navigate function. This willhelp us restrict access to screens and avoid accessing restricted screens whennavigating from code or using the system back button in android.

Things to keep in mind while using react navigation

Try to keep all top-level StackNavigator screens in one place to avoidunexpected behaviour.
Use conditional rendering to restrict screens.
Use replace instead of navigate when you want to remove the current screenfrom the back stack.
Use constants for screen names instead of string literals.

Enhancements

Store additional pieces of information like user type, username etc in theAuth context for easier access.
Improve AuthContext by using useReducer instead of useState.
Consider using state management libraries like Redux if you want to managelots of states globally.
Use a loader state to display a SplashScreen until we fetch the auth statefrom AsyncStorage for the first time.

Higher Order Component to render spinner React Native

2017-11-15T12:00:00+00:00

In one of ourprevious blogs,we mentioned howrecomposeimproves boththe readabilityand themaintainabilityof the code.

We also sawhow branchandrenderComponentfunctionsfrom recomposehelp usin decidingwhich component to renderbased on a condition.

We can use the code fromrenderComponent documentationto render aspinner component whenthe data is being fetchedin a ReactJS application.

Initial Code

// PatientsList.jsimport React, { Component } from 'react';import LoadingIndicator from './LoadingIndicator';export default class PatientsList extends Component {  state = {    isLoading: true,    patientsList: [],  }  componentDidMount() {    api.getPatientsList().then(responseData => {      this.setState({        patientsList: responseData,        isLoading: false,      })    })  }  render() {    const { isLoading } = this.state;    if (isLoading) {      return     } else {      return (                  // Some header component          // View rendering the patients              )    }  }

In the above code,when the PatientsList component mounts,it fetchesthe list of patients from the API.During this time,the isLoading state is true,so we renderthe LoadingIndicator component.

Once the API callreturns with the response,we setthe isLoading state to false.This rendersScrollView component,with our list of patients.

The above code works fine,butif our app has multiple screens,which showthe loading indicatorand fetch data,the above wayof handling itbecomes repetitiveand hard to maintain.

Building a higher order component

Here's whereHigher Order Components(HOC)are very useful.We can extract the logicfor the abilityto show the loading indicatorin a HOC.

// withSpinner.jsimport React from "react";import { ScrollView } from "react-native";import LoadingIndicator from "./LoadingIndicator";const withSpinner = (Comp) => ({ isLoading, children, ...props }) => {  if (isLoading) {    return ;  } else {    return {children};  }};export default withSpinner;

Here,we created a HOC componentwhich accepts a componentand the isLoading prop.

If isLoading is true,we show the LoadingIndicator.If isLoading is false,we show the supplied componentwith its children,and pass in the props.

Now,we can use the above HOCin our PatientsList.js file.The supplied componentcan be any React Native componentbased on the use case.Here in our case,its a ScrollView.

// PatientsList.jsimport { ScrollView } from 'react-native';import withSpinner from './withSpinner';const ScrollViewWithSpinner = withSpinner(ScrollView);export default class PatientsList extends Component {  state = {    isLoading: true,    patientsList: [],  }  componentDidMount() {    api.getPatientsList().then(responseData => {      this.setState({        patientsList: responseData,        isLoading: false,      })    })  }  render() {    const { isLoading } = this.state;    return(              // Some header component        // View rendering the patients          )  }

Conclusion

Because of the aboveextraction of logic to a HOC,we can now use the same HOCin all our componentswhich render a loading indicatorwhile the data is being fetched.

The logicto show a loading indicatornow resides in a HOC.This makes the code easierto maintain and less repetitive.

Opening non HTTPS sites in WebView in React Native

2016-07-27T12:00:00+00:00

Using WebView in a React Native application allows us to reuse already built webpages.

With iOS 9 or higher if our application attempts to connect to any HTTP serverthat doesn't support the latest SSL technology(TLSv1.2),WebView will fail and will not be able load the web pages.

Let's see this in action. Here we are trying to access a HTTP site via WebViewin React Native.

Running that on an iPhone simulator with iOS version 9.0 or greater would showfollowing error.

Error Loading PageDomain: NSURLErrorDomainError Code: -1022Description: The resource could not be loaded becausethe App Transport Security policy requires the use of asecure connection

Ideally, the site we are trying to connect to should have HTTPS enabled. Howeverthere might be cases where we need to connect to sites where HTTPS is notenabled.

For example, while developing the app, we might want to connect to local serverwhich is running just HTTP.

Fix - Using Xcode

To access HTTP sites inside our WebView, we need to open the project in Xcodeand open the Info.plist file.

In the list of keys, we will find App Transport Security Settings.

When we expand the section, we would find localhost inside theException Domains and the key NSTemporaryExceptionAllowsInsecureHTTPLoadswith value true.

Because of this setting when we are connecting to localhost then app runs evenif server is running on HTTP and not on HTTPS.

So in order to make our non HTTPS site run, we need to add our website url tothis whitelisting.

When we hover over the Exception Domains key, we would see a + sign at theright hand side.

Click on it and add our domain here. Set the type to dictionary.

Now click on the domain we just entered and addNSTemporaryExceptionAllowsInsecureHTTPLoads with type Boolean and valueYES similar to the one present for localhost

Re-run the app using react-native run-ios from the terminal and now the sitewould be loaded.

If it doesn't work, then prior to running the app, do a clean build from xcode.

Fix using any IDE

By making the changes from XCode, if we look at the changes in info.plist file,we would find a few lines of code added.

So if we don't want to open Xcode for the fix, we can add the following linesdirectly in our info.plist.

Edit the node for the key NSAppTransportSecurity so that the whole node nowlooks like this:

NSAppTransportSecurity    NSExceptionDomains            del.icio.us                    NSTemporaryExceptionAllowsInsecureHTTPLoads                            localhost                    NSTemporaryExceptionAllowsInsecureHTTPLoads

Be sure to re-run the app using react-native run-ios. Now let's see how toallow all the HTTP sites instead of whitelisting each and everyone

Using Xcode

Using Xcode : To allow all the non HTTPS sites, just delete theException Domains from Xcode inside info.plist and add a new keyAllow Arbitrary Loads with the value true.

Using any IDE

Our NSAppTransportSecurity should just contain the following.

NSAppTransportSecurity    NSAllowsArbitraryLoads

HTTP request headers on each WebView request

2016-07-26T12:00:00+00:00

UsingWebViewin a React Native application allowsus to reuse already built web pages.

HTTP Headers are name/value pairs thatappear in both request andresponse messages.The purpose of headers is to supplythe web server with additional informationand control how content is returned.

In React Native, while openingweb pages via WebView Component,we can pass headers to the HTTP request.Refer to ourprevious blogfor more on this.

But there is a bug.On subsequent requests frominside the WebView,the headers are not passed in the request.

First, let's try to understandby recreating the bug.We have created a simple node serverwhich will act as the backendfor the application and log the requestalong with the custom header.

Here is our server.js

var http = require("http");var port = 9000;function logRequest(request) {  console.log("Processing request for: ", request.url);  console.log("Custom Header: ", request.headers["custom-app-header"]);  console.log("Request Processed\n");}http  .createServer(function (request, response) {    response.writeHead(200, { "Content-Type": "text/html" });    switch (request.url) {      case "/":        response.write(          "WelcomeBye"        );        logRequest(request);        break;      case "/bye":        response.write("ByeWelcome");        logRequest(request);        break;      default:        break;    }    response.end();  })  .listen(port);

As we can see, the welcome pagehas a link to bye and vice versa.Let's start the node server by runningnode server.js.

When we run the app on the simulator,the welcome page opens up,and in the server log,we can verify that the requestheader is being passed.

Processing request for:  /Custom Header:  react-native-ios-appRequest Processed

But when we click on the Byelink from the Welcome page,the server doesn't receive therequest header,which can be verified from the log.

Processing request for:  /byeCustom Header:  undefinedRequest Processed

And it can be verified againthat for any subsequent clicksthe request header doesnot get passed. We can click onWelcome and check the log again.

Processing request for:  /Custom Header:  undefinedRequest Processed

We recently encountered thisbug and created an issuehere.Until the issue is fixed,we have found a workaround.

Workaround

WebView provides a prop onLoadStartwhich accepts a function that isinvoked when the WebViewstarts loading.

We can use this prop to knowwhen a link is clickedand then re-render the WebViewcomponent with the new url.Re-rendering the WebView componentwill load the page as if it's thefirst page and then the requestheaders would be passed.

We know that in React,a component re-renders itself whenany of its state changes.The only thing which changeshere is the url, so let's move theurl to a state andinitialize it to the Welcome pagewhich is the root of the application.And then use the onLoadStart propto change the url state to the clicked url.

Here's the new code.

class testApp extends Component {  state = {    url: "http://localhost:3000",  };  render() {    return (                this.setState({ url: navState.nativeEvent.url })        }        source={{          uri: this.state.url,          headers: { "custom-app-header": "react-native-ios-app" },        }}      />    );  }}

Now when we run the app,we can verify in the backend thatthe request headers are being senteven when we click on Bye link.

Processing request for:  /byeCustom Header:  undefinedRequest ProcessedProcessing request for:  /byeCustom Header:  react-native-ios-appRequest Processed

One thing to note here is that,when we click on the Bye link,the request is not interceptedfrom reaching the server.We are just resending therequest by means of a componentre-render with the new url.

Hence in the log, we see two requests.First request took place whenuser clicked on the link,and the second request occurredwhen the component got re-renderedwith the required request headers.

This workaround might help usto pass the request headers whichwe intend to send to the backendserver until the issue gets fixed.

Platform specific styles in stylesheet, React Native

2016-07-12T12:00:00+00:00

While writing cross platform applicationswe need to add platform specific styles.There are many ways of accomplishing this.

React NativeintroducedPlatform.select helper inversion 0.28which allows us to write platform specific styles in a concise way.In this blog we will see how to use this newly introduced feature.

StyleSheet

A basic stylesheet file might look something like this.

import { StyleSheet } from "react-native";export default StyleSheet.create({  container: {    flex: 1,  },  containerIOS: {    padding: 4,    margin: 2,  },  containerAndroid: {    padding: 6,  },});

Now let's see how we can re-write this StyleSheet using Platform.select.

import { StyleSheet, Platform } from "react-native";export default StyleSheet.create({  container: {    flex: 1,    ...Platform.select({      ios: {        padding: 4,        margin: 2,      },      android: {        padding: 6,      },    }),  },});

User agent or custom header in React Native WebView

2016-07-10T12:00:00+00:00

Using WebView in aReact Native application allows us to reuse already built web pages.

We have seen that in most of the "web view" based applications the links inheader are mostly turned in native navigational components. It means servershould not be sending header if React Native component is asking for web pages.However those headers should be present if the request is not coming from theReact Native app.

Passing custom request headers

We can configure React Native app to pass custom request headers when request ismade to the server to fetch pages.

let customHeaders = {  "X-DemoApp-Version": "1.1",  "X-DemoApp-Type": "demo-app-react-native",};

While invoking WebView component we can pass customHeaders as shown below.

renderWebView() {  return (      )}

Passing user agent

React Native also allows us to pass "userAgent" as a prop. However it is onlysupported by android version of React Native.

renderWebView() {  return (      )}

For iOS, we would need to add the following lines to our AppDelegate.m to setthe userAgent.

NSString *newAgent = @"demo-react-native-app";NSDictionary *dictionary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", nil];[[NSUserDefaults standardUserDefaults] registerDefaults:dictionary];

Data exchange between React Native app and WebView

2016-05-25T12:00:00+00:00

A project we recently worked on needed some complicated charts.We builtthose charts using JavaScript library and it worked fine on browsers.

Now we need to build mobile app usingReact Nativeand it would take alot of time to build those charts natively. So we decided to useWebView (Link is not available )to render the html pages which already displays charts nicely.

React Native comes with WebViewcomponent by default.So rendering the html page using WebView was easy.However, once the page is rendered the React Native app could not exchangeany data with the web page.

In this blog post we'll discuss how tomake React Native app communicate with the pages rendered usingWebViewwith the help ofreact-native-webview-bridgelibrary.

What is React Native WebView Bridge ?

react-native-webview-bridgeisa wrapper on top of React Native's WebView component with some extra features.

First we need to installreact-native-webview-bridgepackage.

npm install react-native-webview-bridge --save

Next we need to import the WebView bridge module.

// ES6import WebViewBridge from "react-native-webview-bridge";// ES5let WebViewBridge = require("react-native-webview-bridge");

Now let's create a basic React component.This component will be responsible for rendering html page usingWebView.

React.createClass({  render: function () {    return (          );  },});

After the component is mounted then we will send data to web view.

componentDidMount() {  let chartData = {data: '...'};  // Send this chart data over to web view after 5 seconds.  setTimeout(() => {    this.refs.webviewbridge.sendToBridge(JSON.stringify(data));  }, 5000);},

Next, We will add code to receive data from web view.

onBridgeMessage: function (webViewData) {  let jsonData = JSON.parse(webViewData);  if (jsonData.success) {    Alert.alert(jsonData.message);  }  console.log('data received', webViewData, jsonData);  //.. do some react native stuff when data is received}

At this time code should look something like this.

React.createClass({  componentDidMount() {    let chartData = { data: "..." };    // Send this chart data over to web view after 5 seconds.    setTimeout(() => {      this.refs.webviewbridge.sendToBridge(JSON.stringify(data));    }, 5000);  },  render: function () {    return (          );  },  onBridgeMessage: function (webViewData) {    let jsonData = JSON.parse(webViewData);    if (jsonData.success) {      Alert.alert(jsonData.message);    }    console.log("data received", webViewData, jsonData);    //.. do some react native stuff when data is received  },});

Okay, We've added all the React Native side of code.We now need to add some JavaScript code on our web page to complete the functionality.

Why do we need to add JavaScript snippet on my web page?

This is a two way data exchange scenario. When our React Native app sends any data, this JavaScript snippet will parse that data and will trigger functions accordingly. We'll also be able to send some data back to React Native app from JavaScript.

Theexample in the READMEof WebViewBridge library shows how to inject JavaScript snippet in React component.However, we prefer JavaScript code to be added to web page directlysince it provides more control and flexibility.

Coming back to our implementation, Let's now add the snippet in our web page.

Done! We've achieved our goal of having a two way communication channel between our React Native app and the web page.

Checkoutthis linkfor more examples of how to use WebView Bridge.

Using Image as a Container in React Native

2016-04-28T12:00:00+00:00

Adding a nice looking background to a screen makes an app visually appealing. Italso makes the app look more sleek and elegant. Let us see how we can leveragethis technique in React Native and add an image as a background.

Well need to create different sizes of the background image, which were goingto use as a container. React Native will pick up appropriate image based on thedevices dimension (checkImages guidefor more information).

- login-background.png (375x667)- login-background@2x.png (750x1134)- login-background@3x.png (1125x2001)

Now well use these images in our code as container.

//...render() {    return (                        Welcome to React Native!                          To get started, edit index.ios.js                          Press Cmd+R to reload,{'\n'}          Cmd+D or shake for dev menu                  );  }//...const styles = StyleSheet.create({  container: {    flex: 1,    width: undefined,    height: undefined,    backgroundColor:'transparent',    justifyContent: 'center',    alignItems: 'center',  },});

Weve intentionally left height and width of the image as undefined. This willlet React Native take the size of the image from the image itself. This way, wecan use Image component as View and add other components as a children to buildUI.

Using Stripe API in React Native with fetch

2015-11-03T12:00:00+00:00

Stripe makes it easy to accept payments online. Stripeoffers an npm package withnice documentation.

Problem with using Stripe in React Native

I added stripe to my React Native application using following command.

npm install stripe --save

Added Stripe to the project as shown below.

var stripe = require('stripe')('stripe API key');

And now I'm getting following error.

This's because npm package uses stripe.jsand stripe.js needs http provided byNode.JS.

Our React Native code does not actually run on Node.JS. I know while buildingReact Native we use NPM and we have a node server running in the background soit feels like we are in Node.JS land and we can use everything Node.JS has tooffer. But that's not true. React Native code can't depend on Node.JS becauseNode.JS is not shipped with ios. It means we can't use any of Node.JS packagesincluding http. It means we can't use stripe npm module.

Now you can remove require('stripe') line that was added in the last step.

Solution

React Native comes with Fetch api. From the documentation

The Fetch API provides a JavaScript interface for accessing an manipulatingparts of the HTTP pipeline, such as requests and responses. It also provides aglobal fetch() method that provides an easy, logical way to fetch resourcesasynchronously across the network.

stripe.js is a nice wrapper around stripe api. stripe api is very welldocumented and is easy to use. Since we can't use stripe.js we will use stripeapi.

We will use fetch tocreate a credit card token using api.

return fetch("https://api.stripe.com/v1/tokens", {  method: "post",  headers: {    Accept: "application/json",    "Content-Type": "application/x-www-form-urlencoded",    Authorization: "Bearer " + "",  },  body: formBody,});

Here, the header has 3 keys. Lets go through them one-by-one:

'Accept': 'application/json' : Designates the content to be in JSON format.
'Content-Type': 'application/x-www-form-urlencoded' : This tells theendpoint that the payload will be one giant query string where name and valuepairs will be separated by the ampersand.
'Authorization': 'Bearer ' + '' : This key is toauthorize our actions on Stripe. Here Bearer is just a prefix which we needto attach to the api-key because Stripe uses OAuth 2.0 . You can read more onthe Bearer token usagehere .

Payload needs to contain credit card details.

var cardDetails = {  "card[number]": "1111 2222 3333 4444",  "card[exp_month]": "01",  "card[exp_year]": "2020",  "card[cvc]": "123",};

Since the Content-Type is application/x-www-form-urlencoded, the payloadshould be one query string. An example of this would be:city=Miami&state=Florida

Let's prepare a proper payload.

var formBody = [];for (var property in cardDetails) {  var encodedKey = encodeURIComponent(property);  var encodedValue = encodeURIComponent(cardDetails[property]);  formBody.push(encodedKey + "=" + encodedValue);}formBody = formBody.join("&");

That's it. Now we can attach formBody to the body part of the fetch requestand we are good to go.

Final solution

Here's the whole code snippet.

"use strict";var stripe_url = "https://api.stripe.com/v1/";var secret_key = "";module.exports.createCardToken = function (cardNumber, expMonth, expYear, cvc) {  var cardDetails = {    "card[number]": cardNumber,    "card[exp_month]": expMonth,    "card[exp_year]": expYear,    "card[cvc]": cvc,  };  var formBody = [];  for (var property in cardDetails) {    var encodedKey = encodeURIComponent(property);    var encodedValue = encodeURIComponent(cardDetails[property]);    formBody.push(encodedKey + "=" + encodedValue);  }  formBody = formBody.join("&");  return fetch(stripe_url + "tokens", {    method: "post",    headers: {      Accept: "application/json",      "Content-Type": "application/x-www-form-urlencoded",      Authorization: "Bearer " + secret_key,    },    body: formBody,  });};

This is an example of registering a credit card with stripe and getting thetoken. Similar implementations can be done for other API endpoints.

How to test React Native App on a real iPhone

2015-08-25T12:00:00+00:00

I have been developing a new iOS app usingReact Native. I have been testing itusing simulator provided by Xcode. Now it's time to test the app using a realdevice. One could ask why test on a real device if it works perfectly on asimulator. Here are some of the reasons.

There are a number of device specific features which are not testable on asimulator. Phone calls, camera, gps data, compass and vibration are a few ofthem.
Testing unexpected cases that can only be tested on a real device. Like howyour application handles incoming calls, low memory situations, low diskspace, limited data connectivity etc.
Hardware-wise, your device is different than your Mac. If your app is graphicsintensive and requires a lot of CPU usage, it might work seamlessly on yoursimulator depending on your Mac's specifications. But it might be laggy andglitchy on the real device.

Now let's look into how you can start testing your React Native app on an realiPhone.

Step 1 - Plug in your device

Plug in your device to your Mac and open Xcode. You will be able to select yourdevice to the right of the Play and Stop buttons.

You might run into one of the following two errors if you have not enrolled intoApple's Developer Program.

Error 1 : Failed to code sign

To fix above issues please enroll in Apple Developer program.

Error 2 : Disk Image could not be mounted

The Developer Disk Image could not be mounted :You may be running a version of iOS that is not supported by this version of XCode

This can happen if your iOS version is not supported by your current version ofXcode. To fix this, just update your Xcode to the latest version from the AppStore.

Step 2 - Set right deployment target

In your Xcode project setup the Deployment Target should be set to less thanor equal to the iOS version installed on the device.

If your iPhone is running iOS 7.0 and you have set "Deployment Target" as 8.0then the app will not work. If your iPhone is running iOS 8.0 and you haveset "Deployment Target" as 7.0 then the app will work.

Step 3 - Fix "Could not connect to development server" error

So the app is installed and you can see the launch screen. That's great. Butsoon you might get following error on your iPhone.

Could not connect to development server.Ensure node server is running and available on the samenetwork  run npm start from react-native root.

To fix this open AppDelegate.m file in your project's iOS folder.

Locate line mentioned below and replace localhost with your Mac IP addresse.g. 192.168.x.x.

To find the ip address of your Mac this is what ReactNative suggests us to do.

you can get ip by typing ifconfig into the terminal and selecting the * >inet value under en0:.

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

Save and click run again. This will fix the error.

Step 3 - Fix connecting to API hosted on local development server

Now the app is installed and you can navigate through the app screens. If theapp attempts to make API call to the server running locally on the machine thendepending on how the local server was started it could be a problem.

In my case, I have a Ruby on Rails application running on my local machine. Ihad started my rails server by executing command rails server.

To do this, the app should be able to access the rails server using the privateip of the server e.g. 192.168.x.x:3000. Turned out that I had started my railsserver using command rails server.

Because ofchange in Rails 4.2rails server listens to localhost and not 0.0.0.0.

The rails guide further says following.

with this change you will no longer be able to access the Rails server from adifferent machine, for example if your development environment is in a virtualmachine and you would like to access it from the host machine. In such cases,please start the server with rails server -b 0.0.0.0 to restore the oldbehavior.

In this case iPhone is trying to talk to Rails server so Rails server must bestarted using following command.

rails server -b 0.0.0.0orrails server --binding=0.0.0.0

By doing so, now you can connect to your Rails app from your local network, bybrowsing to http://192.168.x.x:3000.

Summary

These were some of the issues I came across while testing my iOS app on anactual device and how I fixed them. Hopefully, this blog post helps you fixthese error cases get you started on testing quickly.