day-pass-clone.js

import React from 'react';
import { StyleSheet, Text, View, Image, Animated, Easing, TouchableWithoutFeedback } from 'react-native';
import moment from 'moment';
import Dimensions from 'Dimensions';
var { width, height } = Dimensions.get('window');

export default class App extends React.Component {
  
  constructor(props) {
    super(props);

    this.state = {
      timestamp: new Date(),
      left: 50,
      toRight: true,
      opacityUp: true,
      opacity: 0.3,
      isOpen: false
    };
    
    // time
    setInterval(() => {
      this.setState(previousState => {
        return { timestamp: new Date() };
      });
    }, 1000);

    setInterval(() => {
      this.setState(previousState => {
        let toRight = previousState.toRight;
        if (previousState.left > (width - 210) && previousState.toRight) {
          toRight = false;
        } else if (previousState.left <= 50 && !previousState.toRight) {
          toRight = true;
        }

        let opacityUp = previousState.opacityUp;
        if (previousState.opacity > 0.6 && previousState.opacityUp) {
          opacityUp = false;
        } else if (previousState.opacity <= 0.3 && !previousState.opacityUp) {
          opacityUp = true;
        }

        let c = 2;
        if (c.toString() == 'Infinity') {
          throw new Error(previousState.left + " caused Infinity");
        }

        if (c > 100 || c < -100) {
          c = 1;
        }

        return { left: previousState.left + (((toRight ? 1 : -1) * c) ), toRight: toRight, opacity: previousState.opacity + (opacityUp ? 0.005 : -0.005), opacityUp: opacityUp };
      });
    }, 1);

    this.transformValue1 = new Animated.Value(0);
    this.transformValue2 = new Animated.Value(0);

  }

  toggle() {
    if (!this.state.isOpen) {
      this.open();
    } else {
      this.close();
    }
    this.setState(previousState => { return {isOpen: !previousState.isOpen} });
  }

  open () {
    this.transformValue1.setValue(0);
    Animated.timing(
      this.transformValue1,
      {
        toValue: 1,
        duration: 500,
        easing: Easing.ease
      }
    ).start(() => {});
    this.transformValue2.setValue(0);
    Animated.timing(
      this.transformValue2,
      {
        toValue: 1,
        duration: 500,
        easing: Easing.ease
      }
    ).start(() => {});
  }

  close () {

    this.transformValue1.setValue(1);
    Animated.timing(
      this.transformValue1,
      {
        toValue: 0,
        duration: 500,
        easing: Easing.ease
      }
    ).start(() => {});
    this.transformValue2.setValue(1);
    Animated.timing(
      this.transformValue2,
      {
        toValue: 0,
        duration: 500,
        easing: Easing.ease
      }
    ).start(() => {});
  }

  render() {
    let timestamp = this.state.timestamp;
    const translateY1 = this.transformValue1.interpolate({
      inputRange: [0, 1],
      outputRange: [-200, 0],
      useNativeDriver: true
    });
    const translateY2 = this.transformValue2.interpolate({
      inputRange: [0, 1],
      outputRange: [-200, 0],
      useNativeDriver: true
    });
    let scrollingStyle = StyleSheet.flatten([styles.scrolling, {left: this.state.left}]);
    let colorOverlayStyle = StyleSheet.flatten([styles.colorOverlay, {opacity: this.state.opacity}]);
    let codeImage = null, timestampBar = null;
    if (this.state.isOpen) {
      codeImage = (
        
          <Image style={{width:300,height:300}} source={{uri: 'https://i.imgur.com/mc3xR7M.pngjpg'}} />
        );
    } else {
      timestampBar = [(<View key={0} style={styles.colorContainerStyle}>
            <View style={styles.color1}></View>
            <View style={styles.color2}></View>
            <View style={styles.color3}></View>
            <View style={colorOverlayStyle}></View>
          </View>),
          (<Animated.View key={1} style={scrollingStyle}>
            <View style={{position: 'absolute'}}>
              <Text style={styles.timestampTextBg}>{moment(timestamp).format('MM/DD/YY')}</Text>
              <Text style={styles.timestampTextBg}>{moment(timestamp).format('h:mm:ss A')}</Text>
            </View>
            <Text style={styles.timestampText}>{moment(timestamp).format('MM/DD/YY')}</Text>
            <Text style={styles.timestampText}>{moment(timestamp).format('h:mm:ss A')}</Text>
          </Animated.View>),
          (<Text key={2} style={styles.revealText}>Tap to reveal barcode</Text>)];
    }

    let codeContainerStyle = StyleSheet.flatten([
        styles.codeContainer,
        this.state.isOpen ? {backgroundColor: 'white'} : {backgroundColor: '#f0f0f0'}
      ]);

    return (
      <View style={styles.container}>
        <View style={styles.headerBar}>
          <Text style={styles.headerText}>Regional/Airport Day Pass</Text>
        </View>
        <View style={styles.timestampBar}>
          { timestampBar }
          { codeImage }          
        </View>
        <View style={codeContainerStyle}>
        </View>
        <View>
          <Animated.View style={{transform: [{translateY:translateY1}], width: width, alignItems: 'center'}}>
            <TouchableWithoutFeedback onPress={this.toggle.bind(this)}>
              <Image style={styles.revealButton} source={require('./assets/reveal-btn.png')}></Image>
            </TouchableWithoutFeedback>
          </Animated.View>
          <Animated.Image style={{
                height: 420,
                width: width - 10,
                marginTop: 0,
                marginLeft: 5,
                marginRight: 5,
                transform: [{translateY:translateY2}]
          }} source={require('./assets/bottom.png')}></Animated.Image>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center'
  },
  headerBar: {
    position: 'absolute',
    top: 30,
    height: 50,
    width: width,
  },
  headerText: {
    textAlign: 'center',
    color: '#444',
    fontSize: 20,
    fontWeight: 'bold'
  },
  timestampBar: {
    marginTop: 70,
    position: 'relative',
    borderColor: 'black',
    borderTopWidth: 2,
    backgroundColor: 'white',
    width: width,
    height: 290,
    paddingTop: 10,
    alignItems: 'center'
  },
  timestampText: {
    color: 'white',
    fontSize: 32,
    textAlign: 'center',
    textShadowColor: 'rgba(0,0,0,0.9)',
    textShadowOffset: {width: -2, height: -2},
    textShadowRadius: 3
  },
  timestampTextBg: {
    fontSize: 32,
    textAlign: 'center',
    textShadowColor: 'rgba(0,0,0,0.9)',
    textShadowOffset: {width: 2, height: 2},
    textShadowRadius: 3
  },
  scrolling: {
      position:'absolute',
      top: 30,
      left: 0
  },
  revealText: {
    position: 'absolute',
    top: 145,
    width: width,
    textAlign: 'center',
    fontWeight: '600'
  },
  codeContainer: {
    height: 75,
    width: width,
    alignItems: 'center',
  },
  colorContainerStyle: {
    position: 'absolute',
    top: 15,
    height: 120,
    width: width - 60,
    left: 30,
    flexDirection: 'row',
  },
  color1: {
    height: 120,
    width: (width - 60) / 3,
    backgroundColor: '#528052'    
  },
  color2: {
    height: 120,
    width: (width - 60) / 3,
    backgroundColor: '#675991'
  },
  color3: {
    height: 120,
    width: (width - 60) / 3,
    backgroundColor: '#344e8c'
  },
  colorOverlay: {
    height: 120,
    width: (width - 60),
    backgroundColor: 'white',
    opacity: 0,
    position: 'absolute',
    top: 0,
    left: 0
  },
  revealButtonContainer: {
    width: width,
    alignItems: 'center',
  },
  revealButton: {
    height: 40,
    width: 80
  }
});