Nightmarish Pawnshop Mystic

    react-native-animated-steps

    1.0.0 • Public • Published

    react-native-animated-steps

    A component that helps you render "cards" step by step with animations.

    Usage

    npm install react-native-animated-steps
    import AnimatedSteps from 'react-native-animated-steps';
     
    get cards () {
        return [
            (
            <View>
                <Text>This is the first step.</Text>
            </View>
            ),
            (
            <View>
                <Text>And this is the second.</Text>
            </View>
            ),
            (
            <View>
                <Text>Success ! This is the last step.</Text>
            </View>
            ),
        ];
    }
     
    render () {
        return (
            <AnimatedSteps
            ref={'cardnavigation'}
            cards={this.cards}
            />
        );
    }

    Props

    Prop Description Type Default
    cards Array of React Elements array Required
    containerStyle Style of the view wrapping cards object Check styles in index.js
    firstCard First card to display number 0
    getNextCard Override default behaviour see below function undefined
    getPrevCard Override default behaviour see below function undefined
    prevButton React element to render see below object Default plain button
    nextButton React element to render see below object Default plain button
    onTransitionStart Called when transition starts function undefined
    onTransitionEnd Called when transition ends function undefined
    onChangeCard Called when navigating to a new card with the card index as 1st param function undefined

    Rendering custom navigation buttons

    Altough prevButton and nextButton are not required in any way, you will probably want to render your own elements. You can do that by passing a function returning a React element that will receive the following parameters :

    Parameter Description Type
    getCardPos(index) Returns the Y position of the card at the supplied index function
    currentCard Index of the current displayed card number
    prevCard Index of the previous card (in prevButton only) number
    showPrev() or showNext() Call this function to navigate function

    By default, prevButton won't be rendered on the first index, and nextButton won't be on the last. These functions are a great way of displaying them conditionally. For instance :

        nextButton (getCardPos, currentCard, showNext) {
            const nextCard = currentCard + 1;
     
            if (nextCard === 3 && this.state.geolocationStatus !== 2) {
                // Don't render the nextButton until the user has been located
                return false;
            }
     
            return (
                ...
            );
        }

    Overriding default behaviour

    By default, the showPrev and showNext functions supplied to your custom buttons will navigate to the index - 1 and index + 1 cards. However, you might need to override this behaviour if you want to skip a step for instance.

    In order to do that, you have to supply getPrevCard and/or getNextCard in your props. These functions need to return the index of the previous or the next card you want to navigate to. They both receive getCardPos() and currentCard as their parameters, (see above for their description).

    You should be able to implement any kind of customed logic with these. Here's an example :

        getNextCard (getCardPos, currentCard) {
            const { town } = this.state;
            const nextCard = currentCard + 1;
     
            // Handle special cases
            if (nextCard === 1) {
                if (!town.hoods) {
                    // Skip the hoodpicker (step 2) if the selected town
                    // doesn't have any hood anyway
                    return 2;
                } else {
                    // We need to display the second step
                    return 1;
                }
            }
     
            // In other cases, just display the `currentCard + 1` index
            return nextCard;
        }

    TODO

    • Customize transitions
    • Implement shouldComponentRender to improve perfs
    • Thoroughly test the component

    Install

    npm i react-native-animated-steps

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • bd-arc
    • exilz