Files
react-native/Libraries/Utilities/DevSettings.js
T
Janic Duplessis cc068b0551 Export the DevSettings module, add addMenuItem method (#25848)
Summary:
I wanted to configure the RN dev menu without having to write native code. This is pretty useful in a greenfield app since it avoids having to write a custom native module for both platforms (and might enable the feature for expo too).

This ended up a bit more involved than planned since callbacks can only be called once. I needed to convert the `DevSettings` module to a `NativeEventEmitter` and use events when buttons are clicked. This means creating a JS wrapper for it. Currently it does not export all methods, they can be added in follow ups as needed.

## Changelog

[General] [Added] - Export the DevSettings module, add `addMenuItem` method
Pull Request resolved: https://github.com/facebook/react-native/pull/25848

Test Plan:
Tested in an app using the following code.

```js
if (__DEV__) {
 DevSettings.addMenuItem('Show Dev Screen', () => {
    dispatchNavigationAction(
      NavigationActions.navigate({
        routeName: 'dev',
      }),
    );
  });
}
```

Added an example in RN tester

![devmenu](https://user-images.githubusercontent.com/2677334/62000297-71624680-b0a1-11e9-8403-bc95c4747f0c.gif)

Differential Revision: D17394916

Pulled By: cpojer

fbshipit-source-id: f9d2c548b09821c594189d1436a27b97cf5a5737
2019-09-17 06:38:10 -07:00

53 lines
1.4 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* @format
*/
import NativeDevSettings from '../NativeModules/specs/NativeDevSettings';
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
class DevSettings extends NativeEventEmitter {
_menuItems: Map<string, () => mixed>;
constructor() {
super(NativeDevSettings);
this._menuItems = new Map();
}
addMenuItem(title: string, handler: () => mixed) {
// Make sure items are not added multiple times. This can
// happen when hot reloading the module that registers the
// menu items. The title is used as the id which means we
// don't support multiple items with the same name.
const oldHandler = this._menuItems.get(title);
if (oldHandler != null) {
this.removeListener('didPressMenuItem', oldHandler);
} else {
NativeDevSettings.addMenuItem(title);
}
this._menuItems.set(title, handler);
this.addListener('didPressMenuItem', event => {
if (event.title === title) {
handler();
}
});
}
reload() {
NativeDevSettings.reload();
}
// TODO: Add other dev setting methods exposed by the native module.
}
// Avoid including the full `NativeDevSettings` class in prod.
class NoopDevSettings {
addMenuItem(title: string, handler: () => mixed) {}
reload() {}
}
module.exports = __DEV__ ? new DevSettings() : new NoopDevSettings();