https://github.com/lvlrSajjad/react-native-blur-overlay

React Native Blur Overlay Library For Ios And Android
https://github.com/lvlrSajjad/react-native-blur-overlay

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

Last synced: 25 days ago
JSON representation

React Native Blur Overlay Library For Ios And Android

• Host: GitHub
• URL: https://github.com/lvlrSajjad/react-native-blur-overlay
• Owner: lvlrSajjad
• License: mit
• Created: 2018-08-31T15:52:03.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-12T12:58:14.000Z (over 3 years ago)
• Last Synced: 2024-08-03T01:07:40.657Z (about 1 month ago)
• Topics: android, blur, blur-backgrounds, blur-overlay, blurview, native, react, react-native, react-native-blur, react-native-blur-overlay, react-native-component, react-native-components
• Language: Java
• Homepage:
• Size: 7.61 MB
• Stars: 95
• Watchers: 1
• Forks: 35
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-blur-overlay ★5 - React Native Blur Overlay Library For Ios And Android (Components / UI)
• awesome-react-native - react-native-blur-overlay ★5 - React Native Blur Overlay Library For Ios And Android (Components / UI)
• awesome-react-native - react-native-blur-overlay ★5 - React Native Blur Overlay Library For Ios And Android (Components / UI)
• awesome-react-native - react-native-blur-overlay ★5 - React Native Blur Overlay Library For Ios And Android (Components / UI)

README

        

# react-native-blur-overlay [![npm version](https://img.shields.io/npm/v/react-native-blur-overlay.svg)](https://www.npmjs.com/package/react-native-blur-overlay) [![Maintainability](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/maintainability)](https://codeclimate.com/github/lvlrSajjad/react-native-blur-overlay/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/test_coverage)](https://codeclimate.com/github/lvlrSajjad/react-native-blur-overlay/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. `react-native link`

2. cd to ios folder and run `pod install`

#### 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

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

  	```

3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:

  	```

      compile project(':react-native-blur-overlay')

  	```

## Usage

```javascript

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 {

    constructor(props) {

        super(props);

    }

    renderBlurChilds() {

        return (

          

              {instructions}

              {instructions}

          

        );

    }

    render() {

        return (

            

                 {

                        openOverlay();

                    }}

                    style={{width: '90%', height: 36, backgroundColor: "#03A9F4", borderRadius: 4, margin: 16}}/>

                Welcome to React Native!

                To get started, edit App.js

                {instructions}

                

                 {

                        closeOverlay();

                    }}

                    customStyles={{alignItems: 'center', justifyContent: 'center'}}

                    blurStyle="dark"

                    children={this.renderBlurChilds()}

                />

                

            

        );

    }

}

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	  

```