React native slider screen

SliderScreen.js

import React from "react";
import { View, Animated, Text, StyleSheet, Button, Dimensions } from "react-native";

const DEVICE_WIDTH = Dimensions.get("window").width;

const SliderScreen = () => {
    const animateRight = new Animated.Value(0);

    const moveOver = () => {
        Animated.timing(animateRight, {
            toValue: -DEVICE_WIDTH,
            duration: 300,
            useNativeDriver: true
        }).start();
    };

    const moveBack = () => {
        Animated.timing(animateRight, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true
        }).start();
    };

    return (
        <Animated.View style={[s.root, { transform: [{ translateX: animateRight }] }]}>
            <View style={[s.screen, s.main]}>
                <Text>Main Screen</Text>

                <Button
                    title="Slide over"
                    onPress={moveOver}
                />
            </View>

            <View style={[s.screen, s.right]}>
                <Text>Right Screen</Text>
                <Button
                    title="Slide back"
                    onPress={moveBack}
                />
            </View>
        </Animated.View>
    );
};

const s = StyleSheet.create({
    root: {
        flex: 1,
        flexDirection: "row",
        width: DEVICE_WIDTH * 2,
        backgroundColor: "orange"
    },
    screen: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    main: {
        backgroundColor: "greenyellow"
    },
    right: {
        backgroundColor: "green"
    }
});

export default SliderScreen;