# react-native-modal-yiketranslucent

> Remove the StatusBar background for Modal on Android.

Latest version **1.0.5** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-modal-yiketranslucent
pnpm add react-native-modal-yiketranslucent
yarn add react-native-modal-yiketranslucent
bun add react-native-modal-yiketranslucent
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-07-22 |
| First published | 2019-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 692.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 199 |
| Author | listen |
| Maintainers | winfredxu |
| Keywords | react-native, modal, translucent, statusbar |

## Links

- npm: https://www.npmjs.com/package/react-native-modal-yiketranslucent
- Repository: https://github.com/listenzz/react-native-modal-translucent
- Issues: https://github.com/listenzz/react-native-modal-translucent/issues
- npm.io page: https://npm.io/package/react-native-modal-yiketranslucent

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-07-22
- 1.0.4 — 2019-03-26
- 1.0.3 — 2019-03-26
- 1.0.2 — 2019-03-26
- 1.0.1 — 2019-03-26
- 1.0.0 — 2019-03-26

## README

# react-native-modal-translucent

Remove the StatusBar background for Modal on Android

### Before

<img src="./screenshot/before.jpg" width=300>

### After

<img src="./screenshot/after.png" width=300>

### Usage

#### First

```bash
npm install react-native-modal-translucent --save
# or
yarn add react-native-modal-translucent
```

#### Second

```javascript
$ react-native link react-native-modal-translucent
```

#### Finally

Modify package.json

```diff
 "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

```bash
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

```diff
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

```diff
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=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
```

---
_Source: https://npm.io/package/react-native-modal-yiketranslucent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._