@terrysahaidak/react-native-devmenu

react-native-devmenu

Open developer menu using touches instead of shaking your device.

Installation

Install the library from npm:

npm i --save @terrysahaidak/react-native-devmenu

or

yarn add @terrysahaidak/react-native-devmenu

Build configuration on iOS

You don't need to do somethings because DevMenu package is already included in React Native on iOS.

Build configuration on Android

If you need Android support and you're using React Native 60 and later, you don't need to do anything. But if React Native version is above 60, it's recommended to use react-native link to link Android's native module:

react-native link @terrysahaidak/react-native-devmenu

Or you can link it manually:

Ensure your build files match the following requirements:

1. Define the react-native-devmenu project in android/settings.gradle:

...
include ':react-native-devmenu'
project(':react-native-devmenu').projectDir = new File(rootProject.projectDir, '../node_modules/@terrysahaidak/react-native-devmenu/android')

2. Add the react-native-devmenu as an dependency of your app in android/app/build.gradle:

...
dependencies {
  ...
  implementation project(':react-native-devmenu')
}

4. Add import com.mands.reactnativedevmenu.DevMenuPackage; and new DevMenuPackage(this) in your MainApplication.java, but make sure you pass this to DevMenuPackage:

import com.mands.reactnativedevmenu.DevMenuPackage;
...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new DevMenuPackage(this) // make sure you pass `this`
        );
    }

Usage

Wrap your root any any other component you want to recognize you touches to open the dev menu. Pass numberOfTouches prop to change number of taps (by default it's 3).

It renders children without any wrapper in production.

import DevMenu from '@terrysahaidak/react-native-devmenu';

const App = () => (
  <DevMenu numberOfTouches={4}>
    {/* your app stuff such as providers, navigators etc */}
  </DevMenu>
);

AppRegistry.registerComponent('myApp', () => App);

License

MIT © Terry Sahaidak/Oleh Mryhlod 2019