whatsapp-animation.js

import React from 'react';
import { StyleSheet, View, Text, SafeAreaView, Animated, TouchableWithoutFeedback } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

export default class AppContainer extends React.Component {
    horizontalSliderXAnimVal = new Animated.Value(0);
    _touchX = new Animated.Value(0);
    _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], { useNativeDriver: true });
    render() {
        return (
            <SafeAreaView style={{ alignItems: 'flex-end', justifyContent: 'center', flex: 1 }}>
                <View
                    style={{
                        justifyContent: 'center',
                    }}
                >
                    <PanGestureHandler onGestureEvent={this._onPanGestureEvent}>
                        <Animated.View
                            style={{
                                justifyContent: 'center',
                            }}
                        >
                            <Animated.View
                                style={{
                                    position: 'absolute',
                                    width: 200,
                                    height: 40,
                                    borderRadius: 20,
                                    backgroundColor: 'blue',
                                    opacity: this.horizontalSliderXAnimVal.interpolate({
                                        inputRange: [-60, 0],
                                        outputRange: [1, 0],
                                    }),
                                    transform: [
                                        {
                                            translateX: Animated.add(this._touchX, this.horizontalSliderXAnimVal),
                                        },
                                    ],
                                }}
                            />
                            <TouchableWithoutFeedback
                                onLongPress={() => {
                                    Animated.spring(this.horizontalSliderXAnimVal, {
                                        toValue: -120,
                                        useNativeDriver: true,
                                    }).start();
                                }}
                            >
                                <Animated.View
                                    style={{
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        width: 64,
                                        height: 64,
                                        backgroundColor: 'red',
                                        borderRadius: 32,
                                        transform: [
                                            {
                                                translateX: this._touchX,
                                            },
                                        ],
                                    }}
                                >
                                    <Text>i</Text>
                                </Animated.View>
                            </TouchableWithoutFeedback>
                        </Animated.View>
                    </PanGestureHandler>
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({});