Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Blurry overlay for react-native android

npm

This is very experimental

A react native android module to add a blurry overlay.

Example

Setup

  • install module
 npm i --save react-native-android-blurryoverlay
  • android/settings.gradle
...
include ':react-native-android-blurryoverlay'
project(':react-native-android-blurryoverlay').projectDir = new File(settingsDir, '../node_modules/react-native-android-blurryoverlay')
  • android/app/build.gradle
...
android {
    ...
    defaultConfig {
        ...        
        renderscriptTargetApi 23
        renderscriptSupportModeEnabled true
    }    
    ...
}
...
dependencies {
    ...
    compile project(':react-native-android-blurryoverlay')
}
  • register module (in MainActivity.java)
import com.kwaak.react.BlurryOverlayPackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ......
  private static Activity mActivity = null;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mActivity = this;
    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new BlurryOverlayPackage(this))      // <------- add package, the 'this' is super important
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

Usage

The Android root view will be 'screenshotted' and rendered blurry in the view.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

var BlurryOverlay = require('react-native-android-blurryoverlay');

class BlurryTest extends Component {
  constructor() {
    super();
    this.state = {
      renderBlurry: false
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ renderBlurry: true })
    });
  }
  render() {
    var overlay = (this.state.renderBlurry) ? <BlurryOverlay 
    radius={7} sampling={6} color="#00FFFF00"
    style={[{ 
      position: "absolute", 
      left: 0, 
      top: 0, 
      bottom: 0, 
      right: 0 
    }]}  /> : <View />;
    return (
      <View style={styles.container}>
        <Image
          source={require('./bg.jpg')}
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
        {overlay}
      </View>
    );
  }
}

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

AppRegistry.registerComponent('BlurryTest', () => BlurryTest);

About

A react native android package to show a blurry overlay.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.