blurOver.js

blurOver.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Alert,
  StatusBar,
  Animated,
  Easing
} from 'react-native';

var {width,height} = require('Dimensions').get('window');
const { BlurView } = require('react-native-blur');


class Ghinwa extends Component {

  constructor(props) {
    super(props);
    StatusBar.setHidden(true);
    this.state = {
      top: new Animated.Value(height)
    }
  }

  _handlePress(msg) {
      Alert.alert('behind wins!')
  }
_openOver() {
  Animated.timing(this.state.top, { toValue: 0 , duration: 400, easing: Easing.inOut(Easing.ease) }).start();

}

  _handlePressOver(msg) {
      Alert.alert('Over wins!')
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._handlePress} style={styles.button} >
          <Text>Close pop over</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._openOver.bind(this)} style={styles.button} >
          <Text>Open pop over</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._handlePressOver}  style={[styles.viewOver, {top:this.state.top}]}>
          <Image style={styles.imgBg}  source={{ uri: 'http://localhost:3000/led.jpg'}} >
            <BlurView blurType="xlight" style={{flex:1, width: width }}>
            </BlurView>
          </Image>
        </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  button: {
    backgroundColor: 'green',
    height:80
  },
  imgBg : {
      width: width,
      height: 80,
  },
  viewOver:{
    width: width,
    position:'absolute',
    top:0,
    height:80,
    backgroundColor:'red'
  }

});

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