Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.