Initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

README.md

@@ -0,0 +1,30 @@
+# react-native-dev-menu-on-touch
+
+Open dev menu with 3 fingers touch instead of shake.
+
+## Why?
+
+It's annoying to shake real device every time you need dev menu. Especially when you have hot-reloading disabled.
+
+## How to use
+
+Wrap entire app inside this component
+
+```jsx
+import DevMenuOnTouch from 'react-native-dev-menu-on-touch';
+
+class YourRootApp extends Component {
+  render() {
+    return (
+      <DevMenuOnTouch>
+        <YourApp />
+      </DevMenuOnTouch>
+    );
+  }
+}
+```
+
+## Notes
+
+- It's enabled only in dev mode - in production it'll return normal view without changing anything (so it's safe to use in production)
+- It's inspider by comment of @slicejunk https://github.com/facebook/react-native/issues/10191#issuecomment-277208461

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "react-native-dev-menu-on-touch",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react-native": "^0.57.5"
+  },
+  "devDependencies": {
+    "@types/react": "^16.7.20",
+    "@types/react-native": "^0.57.12",
+    "typescript": "^3.1.6"
+  }
+}

src/index.tsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { NativeModules, PanResponder, View } from 'react-native';
+
+export default class DevMenuOnTouch extends Component {
+  private panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: (evt, gestureState) => {
+      if (gestureState.numberActiveTouches === 3) {
+        NativeModules.DevMenu.show();
+      }
+      return false;
+    },
+  });
+
+  private getPanHandlers = () => {
+    if (__DEV__) {
+      return {};
+    }
+    return this.panResponder.panHandlers;
+  };
+
+  public render() {
+    const { children } = this.props;
+
+    const panHandlers = this.getPanHandlers();
+
+    return (
+      <View style={{ flex: 1 }} {...panHandlers}>
+        {children}
+      </View>
+    );
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "lib": ["es2015"],
+    "skipLibCheck": true
+  },
+  "exclude": ["./node_modules/*", "./dist"]
+}

yarn.lock

@@ -0,0 +1,36 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/prop-types@*":
+  version "15.5.6"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
+
+"@types/react-native@^0.57.12":
+  version "0.57.12"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.12.tgz#cd012ea3f4f30e70af580a14f5805d85827f92e6"
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.7.6"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+"@types/react@^16.7.20":
+  version "16.7.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.20.tgz#13ae752c012710d0fa800985ca809814b51d3b58"
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+csstype@^2.2.0:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
+
+typescript@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.6.tgz#b6543a83cfc8c2befb3f4c8fba6896f5b0c9be68"