Skip to content

Instantly share code, notes, and snippets.

@pablit07 pablit07/day-pass-clone.js
Last active Jun 13, 2018

Embed
What would you like to do?
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
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.