import {
View,
Text,
StyleSheet,
Animated,
Easing,
Image,
TouchableOpacity,
ScrollView,
DeviceEventEmitter,
Platform,
} from 'react-native';
this.state = {
anim: new Animated.Value(1),
}
startAnim = () => {
this.props.setBottomVisible(!this.props.visible);
Animated.timing(this.state.anim, {
toValue: this.props.visible ? 0 : 1,
duration: 200,
easing: Easing.linear,
useNativeDriver: true,
}).start(() => {});
};
<Animated.View
style={[
styles.container,
{
bottom: 0,
left: 0,
transform: [
{
translateY: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: [UI.scaleSize(328), 0],
}),
},
],
},
]}
>
<TouchableOpacity onPress={this.startAnim}>
<Image
source={visible ? downImg : upImg}
style={{ height: UI.scaleSize(24) }}
resizeMode="contain"
/>
</TouchableOpacity>
</Animated.View>
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: UI.size.deviceWidth,
height: UI.scaleSize(352),
alignItems: 'center',
},
});