Open developer menu using touches instead of shaking your device.
Install the library from npm:
npm i --save @terrysahaidak/react-native-devmenu
or
yarn add @terrysahaidak/react-native-devmenu
You don't need to do somethings because DevMenu package is already included in React Native on iOS.
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:
- Define the
react-native-devmenu
project inandroid/settings.gradle
:
...
include ':react-native-devmenu'
project(':react-native-devmenu').projectDir = new File(rootProject.projectDir, '../node_modules/@terrysahaidak/react-native-devmenu/android')
- Add the
react-native-devmenu
as an dependency of your app inandroid/app/build.gradle
:
...
dependencies {
...
implementation project(':react-native-devmenu')
}
- Add
import com.mands.reactnativedevmenu.DevMenuPackage;
andnew DevMenuPackage(this)
in yourMainApplication.java
, but make sure you passthis
toDevMenuPackage
:
import com.mands.reactnativedevmenu.DevMenuPackage;
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DevMenuPackage(this) // make sure you pass `this`
);
}
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);
MIT © Terry Sahaidak/Oleh Mryhlod 2019