boxmodel-native-carousel v2.0.4

Carousel created for adding JSX components within a swipeable container for react native.

Including form support with authenticated steps.

❒ Example

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Carousel from 'boxmodel-native-carousel';

export default function App() {

    const carouselItems = [
        {
            id: '0',
            items: [
                <Text style={[styles.header]}>Step 1</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        },
        {
            id: '1',
            items: [
                <Text style={[styles.header]}>Step 2</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        },
        {
            id: '2',
            items: [
                <Text style={[styles.header]}>Step 3</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        }
    ]

    return (
        <View style={styles.container}>
            <Carousel
                carouselItems={carouselItems}
                paginationColor={'#17e592'}
                buttonColor={'#17e592'}
                progressBarColor={
                    {
                        innerColor: '#d6d6d6',
                        outerColor: '#17e592'
                    }
                }
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
        color: '#000000'
    },
    text: {
        color: '#3b3b3b'
    }
});

❒ Adding carouselItems

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Carousel from 'boxmodel-native-carousel';

export default function App() {

    const carouselItems = [
        {
            id: '0',
            items: [
                <Text style={[styles.header]}>Step 1</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        },
        {
            id: '1',
            items: [
                <Text style={[styles.header]}>Step 2</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        },
        {
            id: '2',
            items: [
                <Text style={[styles.header]}>Step 3</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        }
    ]

    return (
        <View style={styles.container}>
            <Carousel
                carouselItems={carouselItems}
            />
        </View>
    )
}

❒ Authenticating Steps

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Carousel from 'boxmodel-native-carousel';
import Form from './myComponents/form';

export default function App() {

    const [nextButtonEnabled, setNextButtonEnabled] = useState(false)
    const [completed, setCompleted] = useState(false)

    const carouselItems = [
        {
            id: '0',
            allowNextStep: false,
            items: [
                <Text style={[styles.header]}>Step 1</Text>,
                <Text style={[styles.text]}>Example text</Text>,
                <Form setValidateNextStep={setNextButtonEnabled} /> //Return true when form is complete
            ]
        },
        {
            id: '1',
            allowNextStep: true,
            items: [
                <Text style={[styles.header]}>Step 2</Text>,
                <Text style={[styles.text]}>Example text</Text>
            ]
        }
    ]

    return (
        <View style={styles.container}>
            <Carousel
                carouselItems={carouselItems}
                nextButtonEnabled={nextButtonEnabled}
                setNextButtonEnabled={setNextButtonEnabled}
                setCompleted={setCompleted}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
        color: '#000000'
    },
    text: {
        color: '#3b3b3b'
    }
});

Here we use state to set the value of the nextButtonEnabled property, if set to false the move-to-next button will be deactivated and swiping will be disabled.

You can also pass setNextButtonEnabled as a property so the component can toggle the state back to false when the next slide appears.

To tell the component which slide to respond to the nextButtonEnabled property you will need to add it into the object inside of the carouselItems array as allowNextStep: true || false ( example shown above ), this will default to true if not defined.

❒ Create a CustomButton

const CustomButton = (props: any) => {
    return (
        <TouchableOpacity {...props} style={[styles.button, props.style]}>
            <AntDesign name={'right'} size={32} color={'#FFF'} />
        </TouchableOpacity>
    )
}

<Carousel
    CustomButton={CustomButton}
/>

❒ Properties