lvlrsajjad / react-native-blur-overlay Goto Github PK

React Native Blur Overlay Library For Ios And Android

License: MIT License

Java 55.99% JavaScript 22.28% Objective-C 18.10% Ruby 3.63%

react-native react-native-component react-native-components blur blur-backgrounds android react-native-blur-overlay blur-overlay react native blurview react-native-blur

react-native-blur-overlay's Introduction

react-native-blur-overlay

Getting started

$ npm install react-native-blur-overlay --save

Mostly automatic installation

$ react-native link react-native-blur-overlay

Manual installation

iOS

react-native link
cd to ios folder and run pod install

Android

Blur Only works on Android >= 17 !!! Brightness and should work everywhere though

Open up android/app/src/main/java/[...]/MainApplication.java

Add import com.bluroverly.SajjadBlurOverlayPackage; to the imports at the top of the file
Add new SajjadBlurOverlayPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

  include ':react-native-blur-overlay'
  project(':react-native-blur-overlay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-blur-overlay/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-blur-overlay')
```

Usage

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import BlurOverlay,{closeOverlay,openOverlay} from 'react-native-blur-overlay';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
    }

    renderBlurChilds() {
        return (
          <View style={styles.image}>
              <Text style={styles.instructions2}>{instructions}</Text>

              <Text style={styles.instructions2}>{instructions}</Text>
          </View>
        );
    }

    render() {
        return (

            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => {
                        openOverlay();
                    }}
                    style={{width: '90%', height: 36, backgroundColor: "#03A9F4", borderRadius: 4, margin: 16}}/>

                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>To get started, edit App.js</Text>
                <Text style={styles.instructions}>{instructions}</Text>
                

                <BlurOverlay
                    radius={14}
                    downsampling={2}
                    brightness={-200}
                    onPress={() => {
                        closeOverlay();
                    }}
                    customStyles={{alignItems: 'center', justifyContent: 'center'}}
                    blurStyle="dark"
                    children={this.renderBlurChilds()}
                />
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    instructions2: {
        textAlign: 'center',
        color: 'white',
        marginBottom: 5,
    },
});

Props

android only:
  radius : Int (Between  0 to 25*downsampling)
  downsampling : float (>= 1)
  brightness : float (Between -255 to 255 , 0 = nochange)
  
ios only : 
  blurStyle: string ("light" , "extraLight" , "dark")
	
both platforms :
  onPress : func
  customStyles: style

react-native-blur-overlay's People

Contributors

Stargazers

Watchers

react-native-blur-overlay's Issues

Android Overlay blurred from entire screen.

I want to get the blurred image of sub part of screen. So when I enclose "BlurOverlay" into one "View", blurred image is shown on that "View". But that is blurred from entire screen.

iOS is working good. What is the solution?

IOS Blur is too strong

Hi there ,Thanks for your library it helped me alot
How can I use less strong ios overlays that more details get visible?
<BlurOverlay
radius={7}
downsampling={100}
brightness={10}
blurStyle={'regular'}
blurAmount={3}
onPress={this.onRequestCloseEvent}
children={this.renderBlurChildren()}
/>

Android overlay displays trace of previous screen

I really like this library, and it works fine with RN 0.60+ on both iOS and Android. However, on Android, some devices have this weird problem that when you trigger the overlay, the background of the overlay (which should be a plain color) has what seems to be traces of the previously visited screen. I'm using react-navigation.

For clarity, suppose you have a FlatList on Screen A. You click on a FlatList item and it opens Screen B, which then shows an overlay (from this library). On Android, you will see the blurred screen on top of Screen B, but there will be traces of Screen A (some sort of misrendering) with edges and colors belonging to, say, the FlatList on Screen A. The behavior is strange. I wonder if anyone else has run into this before and whether there's a solution. I worry that this repo is incompatible with react-navigation.

How to use it in typescript?

In typescript how to use it ? Please help

open overlay doesn't work

I use two components in different pages but open overlay doesn't work.if I use one in my app it's ok but when add another blurview it doesn't work.
how can I solve my problem?

react-native-blur-overlay:verifyReleaseResources FAILED

Task :react-native-blur-overlay:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

this error is shown when I tried to build apk

How can I always show the blur overlay?

Hi sir,
I'm using your lib for making a blur background overlay for my app. Therefore, I want it is always be shown.
I tried showBlurOverlay true props but it doesn't work.

Thank you so much

onPress not passing through

Thanks for the great package. It's added some much needed style to my app.

I see the onPress prop is hard coded though so the prop in your readme is not going to work. :-)

change compile to implementation

please change the compile to implementation in build.gradle

How to prevent bluroverlay pop to close.

Hi,
I am using blur-overlay, it is great, but i have a problem,
i am using blur-overlay as modal pop-up, so i am showing some detail information in it and whenever i click text data it is closing, how could i prevent it to close when i touch inside modal, and close when i press outside of the modal.

Tanksss.

prevent navigation bar as a blur background

hi there, really love your library, btw how to specified the window that i want to use as blurred background instead of get all window including navigation bar..

i want to exclude navigation bar..

thanks