React-native-animated-form-stack NPM

react-native-animated-form-stack

version-badge

Introduction

Have you ever wondered about creating a component like this? Or have you ever seen such a UI and wished you could implement it effortlessly?

What if just wrapping your existing Form UI with our component could achieve this effect? No need for any additional external libraries; the ones you're already using in your project are sufficient.

Experience the magic of animated forms in a lightweight package of just under 3 KB.

Install

yarn add react-native-animated-form-stack

Usage

1. Wrap `FormStackProvider` and `FormStack`

By wrapping your filed UI with FormStackProvider and FormStack as you want, you will get a dynamic form which is automatically calculates its steps based on the arrangement of the fields and applies dynamic effects.

import { FormStackProvider, FormStack } from 'react-native-animated-form-stack';

const Example = () => {
    return (
        <FormStack>
            {/* just place your form here! */}
        </FormStack>
    ) 
}

const App = () => {
    return <FormStackProvider>
        <Example />
    </FormStackProvider>
}

2. Use hooks

If you complete the previous step, now you can use hooks which are able to obtain or update the current step.

import { 
    ...
    useFormStackValue,
    useFormStackAction
} from 'react-native-animated-form-stack';
import { View, Text } from 'react-native';

const ThirdField = () => {
    const {step} = useFormStackValue();
    return (
        <View>
            <Text>{step}</Text>
        </View>
    )
}

const FirstField = () => {
    const {update} = useFormStackAction();
    return (
        <View>
            {/* This action expected to expose `ThirdFiled` */}
            <Button title={'Go to step 2'} onPress={() => update(2)} />
        </View>
    )
}

const Example = () => {
    return (
        <FormStack>
            <ThirdField />
            <SecondField />
            <FirstField />
        </FormStack>
    ) 
}

const App = () => {
    return <FormStackProvider>
        <Example />
    </FormStackProvider>
}

3. Use methods

Or in case of you don't need to use hook, you can handle the step by methods.

import { 
    ...
    IFormStackRef
} from 'react-native-animated-form-stack';

const Example = () => {
    const ref = useRef<IFormStackRef>(null);
    const [step, setStep] = useState(0);
    
    // You can call the method which is able to handle inner state of the `FormStack`
    const handlePressPrev = () => {
        ref.current?.prev();
    };
    
    const handlePressNext = () => {
        ref.current?.next();
    };
    
    return (
        <View style={{ flex: 1 }}>
            <FormStack
                ref={ref}
                onUpdate={setStep} // Update a state when `FormStack` is updated
            >
                {/* just place your form here! */}
            </FormStack>
            <View>
                <Button title={'Previous'} onPress={handlePressPrev} />
                <Button title={'Next'} onPress={handlePressNext} />
            </View>
        </View>
    ) 
}

Contribute

This library is used in real-world products, and your contributions can help us make great updates to products uploaded to the App Store and Play Store.

Download Apple App Store or Google Play Store, a budgeting app for international travelers, today.