DevSettings.reload() for logout in React Native

Question

The Problem

I am migrating the logout functionality of my hybrid app from native to react native.

Requirements:

• It works in production and on a device
• It navigates to the root screen of the app (login screen)
• It clears the redux store
• [nice to have] It cancels any in-flight requests

Initially, we planned to do something like this: how-to-reset-the-state-of-a-redux-store

The Idea

As of React Native 0.62.0, we now have access to the DevSettings module. DevSettings has a native bridge that can reload the react-native environment. But are DevSettings really only for development environments?

Export the DevSettings module, add addMenuItem method (cc068b0551 by @janicduplessis)

The Question

1. What are the tradeoffs for using reload vs logging out with a redux action?
2. Should I use reload in a production app?

Edit: The Answer

1. Reload is disallowed in prod (code)
2. react-native-restart worked great for my use case.

Answer 1

Here's the line in code that disallows using devSettings in prod

import NativeDevSettings from '../NativeModules/specs/NativeDevSettings';
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';

class DevSettings extends NativeEventEmitter {
  ...
  reload(reason: string) {
    if (typeof NativeDevSettings.reloadWithReason === 'function') {
      NativeDevSettings.reloadWithReason(reason || 'Uncategorized from JS');
    } else {
      NativeDevSettings.reload();
    }
  }
  ...
}

// Avoid including the full `NativeDevSettings` class in prod.
class NoopDevSettings {
  addMenuItem(title: string, handler: () => mixed) {}
  reload() {}
}

module.exports = __DEV__ ? new DevSettings() : new NoopDevSettings();

from Libraries/Utilities/DevSettings