How to resolve overlay permissions need granted in react-native dev mode? - react-native

Question

I've changed my Android device from Android 7.0 to Android 8.0 to run a react-native app on. Previously adding the overlay permission in AndroidManifest allowed the app to run and display the developer menu on the device:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.simpleoffsetpro"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission tools:node="remove" android:name="android.permission.SYSTEM_ALERT_WINDOW" />
</manifest>
But when I run the app on Android 8.0 I grant the permission that's prompted "Permit drawing over other apps". Then the app just shows a grey screen with notification - Overlay permissions needs to be granted in order for react native apps run in dev mode.
Device: Huawei P Smart - Android 8.0.0
Question:
How can you resolve overlay permissions needs to be granted in react-native dev mode?
Package.json depedencies:
"dependencies": {
"bluebird": "^3.3.5",
"convert-units": "^2.3.4",
"event-emitter": "^0.3.4",
"immutability-helper": "^2.8.1",
"immutable": "^3.7.6",
"lodash": "^4.11.0",
"moment": "^2.12.0",
"native-base": "2.0.12",
"react": "~15.4.2",
"react-dom": "~15.4.2",
"react-native": "0.42.0",
"react-native-awesome-alerts": "^1.0.6",
"react-native-dismiss-keyboard": "^1.0.0",
"react-native-floating-label-text-input": "^0.1.4",
"react-native-hide-with-keyboard": "^1.0.0",
"react-native-keyboard-listener": "^1.1.0",
"react-native-localization": "^1.0.11",
"react-native-material-initials": "^0.0.12",
"react-native-overlay": "^0.5.0",
"react-native-popup-menu": "^0.12.3",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.0.0",
"react-redux": "^4.4.5",
"redux": "^3.4.0",
"redux-logger": "^2.6.1",
"redux-loop-symbol-ponyfill": "^2.2.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.0.1",
"standard-http-error": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-eslint": "^7.1.0",
"babel-jest": "^17.0.2",
"babel-polyfill": "^6.9.0",
"babel-preset-react-native": "^1.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"enzyme": "^2.2.0",
"eslint": "^3.10.1",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-react": "^6.7.1",
"fetch-mock": "^5.5.0",
"istanbul": "1.0.0-alpha.2",
"jasmine": "^3.1.0",
"jest": "^17.0.2",
"react-addons-test-utils": "~15.4.2",
"react-native-mock": "~0.2.5",
"react-test-renderer": "^16.3.2",
"remote-redux-devtools": "^0.5.7",
"rimraf": "^2.5.2"
}

Answer 1

Android oreo is only supported from RN 0.51 + , update your react native, the latest version is 0.58, and the new version 0.59 is gonna bring hooks to react native 7u7

Answer 2

That line should look like this:
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
But it's not normally something you should have to mess with.