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