React Native react-navigation performance issue: Optimising performance

educcess Programming, ReactNative react-navigation, react-navigation-issues, ReactNativePerformance, ReactNavigationPerformance, ReactNavigationSlow 0 Comments

React Native react-navigation performance issue: Optimising performance

Rather than writing a detailed article here, I would like to point out very few performance tuning technique with respect to React Native Navigation using react-navigation package.

1. Few check you have to do before blaming react-navigation library, Check whether are you calling any location api to fetch current location.

If you are fetching current location on component mount or will mount then consider my suggestion , fetch the current location on launch of app and save the location, then onwards use the saved location rather than fetching current location every time.

Find the code here to do so

import { AsyncStorage } from 'react-native';

let instance = null;
class SharedPreferences {

  constructor() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }
  async put(key, val) {
    try {
      await AsyncStorage.setItem(key, val);
    } catch (error) {
      console.error('Unable to save in preferences: ', error);
    }
  }

  async get(key) {
    try {
      return await AsyncStorage.getItem(key);
    } catch (error) {
      console.error('Unable to get from preferences: ', error);
    }
  }

   getMultiple(keys, callback) {
     AsyncStorage.multiGet(keys, (err, stores) => {
       if (!err) {
         const keyVals = {};
         stores.map((result, i, store) => {
           keyVals[`${result[0]}`] = result[1];
         });
         callback(keyVals);
       } else {
         callback([]);
       }
     });
  }
}

const sharedPreference = new SharedPreferences();

export const SHARED_PREFERENCE = {
  accessor: sharedPreference
};

'use strict';

import { SHARED_PREFERENCE } from './SharedPreferences';
import { SHARED_PREFERENCE_KEYS } from './AppConstants';

const defaultLocation = {
  coords: {
    latitude: 12.9833,
    longitude: 77.5833
  }
};

export function getCurrentLocation(navigator, callback) {
  SHARED_PREFERENCE.accessor.get(SHARED_PREFERENCE_KEYS.LAST_SAVED_LOCATION_ID)
  .then(savedLocation => {
    if (savedLocation !== null && savedLocation !== undefined) {
      const location = JSON.parse(savedLocation);
      console.log('Returning Saved Location');
      callback(location);
    } else {
      navigator
      .geolocation.getCurrentPosition(
        (location) => {
          console.log(`Saving Device Current Location due to failed save in last try:
             ${JSON.stringify(location)}`);
          SHARED_PREFERENCE
          .accessor
          .put(LAST_SAVED_LOCATION_ID, JSON.stringify(location));
          callback(location);
        }, (geoError) => {
          callback(defaultLocation);
        },
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 });
    }
  })
  .catch((locationError) => {
    callback(defaultLocation);
  });
}

export function saveCurrentLocation(navigator) {
  navigator
  .geolocation.getCurrentPosition(
    (location) => {
      console.log(`Saving Device Current Location: ${JSON.stringify(location)}`);
      SHARED_PREFERENCE
      .accessor
      .put(LAST_SAVED_LOCATION_ID, JSON.stringify(location));
    }, (geoError) => {
      console.log(`Save Location Failed. ${JSON.stringify(geoError)}`);
    },
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 });
}

2. Use Stateless components than ReactComponents wherever it is possible : Read more about StateLessComponents

3. Upgrade react-navigation package from “1.0.0-beta.11” to “2.0.0-rc.9” : This will boost the performance of react-navigation .