All Projects → listenzz → React Native Modal Translucent

listenzz / React Native Modal Translucent

Licence: mit
Remove the StatusBar background for Modal on Android

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to React Native Modal Translucent

Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (-26.24%)
Mutual labels:  modal
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-13.86%)
Mutual labels:  modal
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+1014.85%)
Mutual labels:  modal
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-24.75%)
Mutual labels:  modal
Ax5ui Kernel
Javascript UI Framework - AX5UI - Kernel Module
Stars: ✭ 164 (-18.81%)
Mutual labels:  modal
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (-12.38%)
Mutual labels:  modal
Modal progress hud
A simple modal progress HUD (heads-up display, or progress indicator) for flutter
Stars: ✭ 137 (-32.18%)
Mutual labels:  modal
React Popup
React popup component
Stars: ✭ 198 (-1.98%)
Mutual labels:  modal
React Portal
🎯 React component for transportation of modals, lightboxes, loading bars... to document.body or else.
Stars: ✭ 2,023 (+901.49%)
Mutual labels:  modal
React Native Modal Datetime Picker
A React-Native datetime-picker for Android and iOS
Stars: ✭ 2,412 (+1094.06%)
Mutual labels:  modal
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+851.49%)
Mutual labels:  modal
Dialog
👻 A simple to use, highly customizable, and powerful modal for Angular Applications
Stars: ✭ 158 (-21.78%)
Mutual labels:  modal
React Native Simple Modal
A simple JavaScript modal component for React Native.
Stars: ✭ 179 (-11.39%)
Mutual labels:  modal
React Native Modal Popover
React-Native pure JS popover that uses Modal
Stars: ✭ 151 (-25.25%)
Mutual labels:  modal
React Native Popover View
A well-tested, adaptable, lightweight <Popover> component for react-native
Stars: ✭ 191 (-5.45%)
Mutual labels:  modal
Djsemimodalviewcontroller
Simple semi modal presentation dialog with stacked content
Stars: ✭ 137 (-32.18%)
Mutual labels:  modal
React Modal Hook
Syntactic sugar for handling modals using React Hooks
Stars: ✭ 174 (-13.86%)
Mutual labels:  modal
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+1086.63%)
Mutual labels:  modal
React Native Smart Tip
🔥🔥🔥Toast , SnackBar , Modal , Show Toast above Modal
Stars: ✭ 198 (-1.98%)
Mutual labels:  modal
Modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.
Stars: ✭ 183 (-9.41%)
Mutual labels:  modal

react-native-modal-translucent

Remove the StatusBar background for Modal on Android

Before

After

Usage

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

If your RN version is below 0.60, you need to link manually.

react-native link react-native-modal-translucent

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 = "28.0.3"
+        minSdkVersion = 16
+        compileSdkVersion = 28
+        targetSdkVersion = 28
+        supportLibVersion = "28.0.0"
+    }

    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.3.2
+        classpath 'com.android.tools.build:gradle:3.3.2'
    }
}

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.10.1'
+    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_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.10.1-all.zip
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].