Skip to content
React Native Blur Overlay Library For Ios And Android
Branch: master
Clone or download
Latest commit 62bb3de May 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android performance optimization Dec 20, 2018
ios Fix pod file errors. May 11, 2019
.DS_Store Ios Support Sep 5, 2018
.gitattributes Update .gitattributes Sep 5, 2018
.gitignore better performance, non ui blocking, downsampling enabled Dec 16, 2018
.npmignore changed package name Sep 4, 2018
LICENSE Create LICENSE Sep 17, 2018
README.md docs: more accurate description of limitations Dec 16, 2018
Untitled.jpg Ios Support Sep 5, 2018
Untitled2.jpg Ios Support Sep 5, 2018
giphy.gif updated gif Sep 15, 2018
index.js pass through onPress instead of hard coding Mar 6, 2019
package-lock.json better performance, non ui blocking, downsampling enabled Dec 16, 2018
package.json

README.md

react-native-blur-overlay npm version Maintainability Test Coverage

Getting started

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

Mostly automatic installation

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

Manual installation

iOS

  1. In XCode right click on project's name and choose Add Files to..
  2. Go to node_modules/react-native-blur-overlay and select ios folder Now you're ready to require('react-native-blur-overlay') inside your app!

Android

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

  1. 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
  1. 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')
    
    
  2. 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

    
You can’t perform that action at this time.