Skip to content

Instantly share code, notes, and snippets.

@qrobin qrobin/Main.js
Last active Jul 2, 2017

Embed
What would you like to do?
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Image, TouchableOpacity, Animated } from 'react-native';
import { Text } from 'atoms';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
force: 0,
forceAction: false
};
this.forceAnimationValue = new Animated.Value(0);
}
forceAnimate = () => {
Animated.timing(
this.forceAnimationValue,
{
toValue: 1,
duration: 400
}
).start();
}
handleResponderMove = (e) => {
this.setState({ force: e.nativeEvent.force }, () => {
if (this.state.force === 1) {
this.setState({ forceAction: true }, () => {
// handle force action here
this.forceAnimate();
});
}
});
}
handleResponderRelease = (e) => {
const { forceAction } = this.state;
if (forceAction) {
this.setState({
force: 0,
forceAction: false
});
} else {
this.setState({
force: 0
});
// hande simple action here
}
}
render() {
const { forceAnimationValue } = this;
return (
<View style={s.wrapper}>
<ScrollView style={s.container} contentContainerStyle={s.containerContent}>
<Image style={s.grandude} source={{ url: 'assets/images/grandude.png' }} />
<View style={s.buttons}>
<TouchableOpacity style={s.leftButton}>
<Image style={s.avatar} source={{ url: 'assets/images/avatar.png' }} />
<View style={s.leftTextBlock}>
<Text style={s.buttonTitle}>Профиль</Text>
<Text style={s.buttonDescription}>Lorem ipsum dolor sit amet</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={s.rightButton}>
<Image style={s.icon} source={{ url: 'assets/icons/calendar_icon.png' }} />
<View>
<Text style={[ s.buttonTitle, { textAlign: 'center' }]}>Мои обращения</Text>
<Text style={[ s.buttonDescription, { textAlign: 'center' }]}>21 обращение</Text>
</View>
</TouchableOpacity>
</View>
<TouchableOpacity style={s.chatButton}>
<Image style={s.icon} source={{ url: 'assets/icons/calendar_icon.png' }} />
<View>
<Text style={[ s.buttonTitle, { textAlign: 'center' }]}>Мои обращения</Text>
<Text style={[ s.buttonDescription, { textAlign: 'center' }]}>21 обращение</Text>
</View>
</TouchableOpacity>
</ScrollView>
<View
onStartShouldSetResponder={() => true}
onResponderMove={!this.state.forceAction ? this.handleResponderMove : null}
onResponderRelease={this.handleResponderRelease}
style={[ s.callButton, {
transform: [{ scale: this.state.force / 2 + 1 }],
width: forceAnimationValue.interpolate({
inputRange: [ 0, 1 ],
outputRange: [ 84, 184 ]
})
}]}>
<Image style={s.callIcon} source={{ url: 'assets/icons/phone_icon.png' }} />
</View>
</View>
);
}
}
const s = StyleSheet.create({
wrapper: {
width: '100%',
height: '100%'
},
container: {
backgroundColor: 'white'
},
containerContent: {
alignItems: 'center'
},
grandude: {
width: 263,
height: 274,
resizeMode: 'contain',
marginVertical: 50
},
// Buttons
buttons: {
alignItems: 'center',
justifyContent: 'space-around',
flexDirection: 'row',
width: '95%'
},
leftButton: {
width: 168,
height: 92,
borderRadius: 7,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: '#B7ACE1',
elevation: 6,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 6
},
rightButton: {
width: 168,
height: 92,
borderRadius: 7,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#B7ACE1',
elevation: 6,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 6
},
avatar: {
width: 57,
height: 57
},
leftTextBlock: {
width: '55%',
paddingLeft: 11
},
buttonTitle: {
fontSize: 15,
marginVertical: 3
},
buttonDescription: {
fontSize: 10
},
icon: {
width: 38,
height: 38
},
// Call
callButton: {
position: 'absolute',
backgroundColor: '#FF386C',
// width: 84,
height: 84,
bottom: 21,
right: 14,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 42,
elevation: 13,
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.7,
shadowRadius: 13
},
callIcon: {
width: 31,
height: 31
},
chatButton: {
}
});
export { Main };
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.