import React, { PureComponent } from 'react'; | |
import { StyleSheet, View, TouchableWithoutFeedback, Animated, Easing, Platform } from 'react-native'; | |
import { COLOR, Toolbar, Icon } from '../react-native-material-ui'; | |
const styles = StyleSheet.create({ | |
pageContainer: { | |
flex: 1, | |
}, | |
contentContainer: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
iconContainer: { | |
margin: 16, | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
}); | |
class IconToggle extends PureComponent { | |
constructor(props, context) { | |
super(props, context); | |
const maxOpacity = 0.12; | |
this.state = { | |
maxOpacity, | |
scaleValue: new Animated.Value(0.01), | |
opacityValue: new Animated.Value(maxOpacity), | |
}; | |
this.renderRippleView = this.renderRippleView.bind(this); | |
this.onPressedIn = this.onPressedIn.bind(this); | |
this.onPressedOut = this.onPressedOut.bind(this); | |
} | |
onPressedIn() { | |
Animated.timing(this.state.scaleValue, { | |
toValue: 1, | |
duration: 225, | |
easing: Easing.bezier(0.0, 0.0, 0.2, 1), | |
useNativeDriver: Platform.OS === 'android', | |
}).start(); | |
} | |
onPressedOut() { | |
Animated.timing(this.state.opacityValue, { | |
toValue: 0, | |
useNativeDriver: Platform.OS === 'android', | |
}).start(() => { | |
this.state.scaleValue.setValue(0.01); | |
this.state.opacityValue.setValue(this.state.maxOpacity); | |
}); | |
} | |
renderRippleView() { | |
const { size, color } = this.props; | |
const { scaleValue, opacityValue } = this.state; | |
const rippleSize = size * 2; | |
return ( | |
<Animated.View | |
style={{ | |
position: 'absolute', | |
top: 0, | |
left: 0, | |
width: rippleSize, | |
height: rippleSize, | |
borderRadius: rippleSize / 2, | |
transform: [{ scale: scaleValue }], | |
opacity: opacityValue, | |
backgroundColor: color || 'black', | |
}} | |
/> | |
); | |
} | |
render() { | |
const { name, size, color } = this.props; | |
const containerSize = size * 2; | |
const iconContainer = { width: containerSize, height: containerSize }; | |
return ( | |
<TouchableWithoutFeedback onPressIn={this.onPressedIn} onPressOut={this.onPressedOut}> | |
<View style={[styles.iconContainer, iconContainer]}> | |
{this.renderRippleView()} | |
<View> | |
<Icon name={name} size={size} color={color} /> | |
</View> | |
</View> | |
</TouchableWithoutFeedback> | |
); | |
} | |
} | |
class TestPage extends PureComponent { | |
render() { | |
return ( | |
<View style={styles.pageContainer}> | |
<Toolbar leftElement="arrow-back" centerElement="Icon Toggle" /> | |
<View style={styles.contentContainer}> | |
<IconToggle name="star" color={COLOR.red500} size={40} /> | |
<IconToggle name="people" size={40} /> | |
</View> | |
</View> | |
); | |
} | |
} | |
export default TestPage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment