React Native react-navigation props.navigation.navigate(“DrawerOpen”) doesn’t work

React Native react-navigation props.navigation.navigate(“DrawerOpen”) doesn’t work

If you are using react-navigation version “1.0.0-beta.11” then the following apis works fine

props.navigation.navigate('DrawerOpen'); // open drawer
props.navigation.navigate('DrawerClose'); // close drawer

 

If you are using react-navigation version “2.0.0-rc.9” then following apis works fine

props.navigation.openDrawer();
props.navigation.closeDrawer();
props.navigation.toggleDrawer();

 

Read More About React-Navigation Package : react-navigation performance issues

Typical React Native Navigation issues people facing for this

navigation.navigate(‘DrawerOpen’) doesn’t work

DrawerToggle not working on Android #2760

Drawer Menu doesn’t work in react-native

React Native react-navigation performance issue: Optimising performance

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 .