React-Native-StackAnimation

lightweight library for react native to manage components/screens with animation

Demo

this example can be found on https://snack.expo.dev/@amassnao/react-native-stackanimation-example

Example Code

import React, { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { createStackAnimation, StackAnimationRef, useStackAnimation } from 'react-native-stackanimation';

type ScreenParams = {
    'first_screen': undefined,
    'second_screen': { value: number },
    'third_screen': { name: string }
}

const StackAnimation = createStackAnimation<ScreenParams>();

const Example = () => {

    const stackAnimationRef = useRef<StackAnimationRef<ScreenParams>>(null);

    return (
        <StackAnimation.Stack ref={stackAnimationRef} containerStyle={{ flex: 1 }}>
            <StackAnimation.Screen name="first_screen">
                <View style={{ backgroundColor: '#f00', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text style={{ fontSize: 30 }}>First Screen</Text>
                    <TouchableOpacity
                        style={{ backgroundColor: '#00f', padding: 10, marginTop: 10 }}
                        onPress={() => stackAnimationRef.current?.animateTo('second_screen', { props: { value: 2 } })}
                    >
                        <Text>Go To Second Screen</Text>
                    </TouchableOpacity>
                </View>
            </StackAnimation.Screen>
            <StackAnimation.Screen name="second_screen" initialProps={{ value: 1 }}>
                {(props) => {
                    const { value } = props;
                    return (
                        <View style={{ backgroundColor: '#ff0', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                            <Text style={{ fontSize: 30 }}>Second Screen</Text>
                            <Text style={{ fontSize: 26 }}>Value: {value}</Text>
                            <TouchableOpacity
                                style={{ backgroundColor: '#00f', padding: 10, marginTop: 10 }}
                                onPress={() => stackAnimationRef.current?.animateTo('third_screen', { props: { name: 'John' } })}
                            >
                                <Text>Go To Third Screen</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={{ backgroundColor: '#00f', padding: 10, marginTop: 10 }}
                                onPress={() => stackAnimationRef.current?.animateBack({})}
                            >
                                <Text>Go Back</Text>
                            </TouchableOpacity>
                        </View>
                    );
                }}
            </StackAnimation.Screen>
            <StackAnimation.Screen name="third_screen" children={ThirdScreen} initialProps={{ name: 'Robert' }} />
        </StackAnimation.Stack>
    );
};

const ThirdScreen = ({ name }: ScreenParams['third_screen']) => {
    const { animateBack, animateTo, isAnimating } = useStackAnimation<ScreenParams>();
    return (
        <View style={{ backgroundColor: '#f0f', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 30 }}>Third Screen</Text>
            <Text style={{ fontSize: 25 }}>Name: {name}</Text>
            <Text style={{ fontSize: 25 }}>isAnimating: {isAnimating ? 'true' : 'false'}</Text>

            <TouchableOpacity
                style={{ backgroundColor: '#00f', padding: 10, marginTop: 10 }}
                onPress={() => animateTo('second_screen', { props: { value: 100 } })}
            >
                <Text>Go To Second Screen</Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={{ backgroundColor: '#00f', padding: 10, marginTop: 10 }}
                onPress={() => animateBack({})}
            >
                <Text>Go Back</Text>
            </TouchableOpacity>
        </View>
    );
};

export { Example };