Horizontal Search Header swipe example

SlideAnimation.js

import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    TextInput,
    Animated,
    Dimensions,
    StyleSheet
} from 'react-native';

const size = Dimensions.get('window');

class Animations extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.animatedValue = new Animated.Value(1);
    }


    onBackPress = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 300
        }).start();
    };

    onShowPress = () => {
        Animated.timing(this.animatedValue, {
            toValue: 0,
            duration: 300
        }).start();
    };

    render() {
        const translateX = {
            transform: [
                {
                    translateX: this.animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, size.width]
                    })
                }
            ]
        };

        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <TouchableOpacity
                        style={styles.button}
                        activeOpacity={0.6}
                        onPress={this.onShowPress}
                    >
                        <Text style={styles.whiteText}>
                            Show
                        </Text>
                    </TouchableOpacity>
                </View>

                <Animated.View style={[styles.animatedHeader, translateX]}>
                    <TouchableOpacity
                        activeOpacity={0.6}
                        style={styles.button}
                        onPress={this.onBackPress}
                    >
                        <Text style={styles.whiteText}>
                            Hide
                        </Text>
                    </TouchableOpacity>
                    <TextInput
                        style={styles.textInput}
                    />
                </Animated.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'orange'
    },
    header: {
        height: 44,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    button: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 44,
        width: 44,
        backgroundColor: 'grey',
    },
    whiteText: {
        color: 'white'
    },
    textInput: {
        backgroundColor: 'white',
        flex: 1
    },
    animatedHeader: {
        height: 44,
        backgroundColor: 'grey',
        flexDirection: 'row',
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0
    }
});

export default Animations;