React-native-carousel-picker NPM

React Native Carousel Picker

A cross-platform carousel picker component for React Native in pure Javascript. (iOS wheel Picker for Android & iOS)

Features

100% Javascript
Highly customizable

Demo

Demo Image

Installation

Open a Terminal in the project root and run:

npm install react-native-carousel-picker

We're done! Now you can build and run the app on your device/simulator.

Quick Start

import React, { useState } from "react";
import { View } from "react-native";
import CarouselPicker from "react-native-carousel-picker";

const App = () => {
    // Set the initial indices for each column.
    const [selectedIndices, setSelectedIndices] = useState({ col1: 0, col2: 0, col3: 0 });

    // Sample items for each column.
    const items = {
        col1: [...Array(10).keys()].map((index) => `Col1 Item ${index + 1}`),
        col2: [...Array(10).keys()].map((index) => `Col2 Item ${index + 1}`),
        col3: [...Array(10).keys()].map((index) => `Col3 Item ${index + 1}`),
    };

    // Update the selected indices state when an item is selected.
    const handleSelected = (column, index) => {
        setSelectedIndices(prevState => ({
            ...prevState,
            [column]: index
        }));
    };

    return (
        <View style={{ flex: 1, backgroundColor: 'white', justifyContent: 'center' }}>
            <CarouselPicker
                onSelected={handleSelected}
                items={items}
                selectedIndices={selectedIndices}
            />
        </View>
    );
};

export default App;

Props

onSelected (`required`)

Callback which is called on carousel picker change, receives the column & index of the new selected item as argument. The current selected index state needs to be updated when it's called, otherwise the change is dropped.

selectedIndices (`required`)

This is the current selected indices that needs to be updated when the picker change. You can use this property to update the selected item. Default value is {}.

itemHeight (`optional`)

Height of each item of the picker needs to be upper to zero. The global height of the container depends on the height of each item. Default value is 40.

countVisibleItems (`optional`)

The minimum number of visible items to be displayed. The global height of the container depends on the number of visible items. Default value is 2

items (`optional`)

An array of string items that needs to be displayed. This array can be updated any time, the picker will refresh its content according to the new array. Default value is [].