react-native-modal-translucent
Remove the StatusBar background for Modal on Android
Before
After
Usage
First
npm install react-native-modal-translucent --save# or yarn add react-native-modal-translucent
Second
$ react-native link react-native-modal-translucent
Finally
Modify package.json
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest",+ "fix-modal": "node node_modules/react-native-modal-translucent/scripts/translucent-modal.js",+ "postinstall": "npm run fix-modal" }
Run fix-modal once
npm run fix-modal
That is All !
Now run the app and see the effect.
Caveat
If your react-native version is below 0.57, you need to update your android gradle.
First, modify your android/build.gradle
buildscript {+ ext {+ buildToolsVersion = "27.0.3"+ minSdkVersion = 16+ compileSdkVersion = 27+ targetSdkVersion = 26+ supportLibVersion = "27.1.1"+ } repositories {+ google() jcenter()- maven {- url 'https://maven.google.com/'- name 'Google'- } } dependencies {- classpath 'com.android.tools.build:gradle:2.3.3'+ // make sure your gardle version here is equal or greater than 3.1.4+ classpath 'com.android.tools.build:gradle:3.1.4' }} allprojects { repositories { mavenLocal()+ google() jcenter() maven { url "$rootDir/../node_modules/react-native/android" }- maven {- url 'https://maven.google.com/'- name 'Google'- } }} -ext {- buildToolsVersion = "26.0.3"- minSdkVersion = 16- compileSdkVersion = 26- targetSdkVersion = 26- supportLibVersion = "26.1.0"-} +task wrapper(type: Wrapper) {+ gradleVersion = '4.4'+ distributionUrl = distributionUrl.replace("bin", "all")+}
Second, modify android/gradle/wrapper.gradle-wrapper.properties, make sure the gradle distribution is equal or greater than 4.4
distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distszipStoreBase=GRADLE_USER_HOMEzipStorePath=wrapper/dists-distributionUrl=https\://services.gradle.org/distributions/gradle-3.5.1-all.zip+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip