Last active
July 2, 2017 10:16
-
-
Save qrobin/2edf51fae678dfa7bc5995452dedf997 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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