react-native-dynamically-selected-picker

React Native Picker for Android and IOS with dynamically updating selected items on scroll. Idea was taken at react-native-swipe-picker

Installation

yarn add react-native-dynamically-selected-picker react-native-linear-gradient

or

npm i react-native-dynamically-selected-picker react-native-linear-gradient --save

Then, if you didn't install react-native-linear-gradient before: Enter command cd /ios and pod install. Now you can run project

Basic usage

import React, { useState } from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';

import DynamicallySelectedPicker from 'react-native-dynamically-selected-picker';

export default function App() {
  const [selectedItemIndex, setSelectedItemIndex] = useState<number>(0);
  const initialSelectedIndex = 1;
  const windowWidth = Dimensions.get('window').width;
  const height = 300;

  return (
    <View style={styles.container}>
      <DynamicallySelectedPicker
        items={[
          {
            value: 1,
            label: 'Item 1',
          },
          {
            value: 2,
            label: 'Item 2',
          },
          {
            value: 3,
            label: 'Item 3',
          },
          {
            value: 4,
            label: 'Item 4',
            itemColor: 'blue',
          },
          {
            value: 5,
            label: 'Item 5',
          },
        ]}
        onScroll={({ index }) => setSelectedItemIndex(index)}
        onMomentumScrollBegin={({ index }) => setSelectedItemIndex(index)}
        onMomentumScrollEnd={({ index }) => setSelectedItemIndex(index)}
        onScrollBeginDrag={({ index }) => setSelectedItemIndex(index)}
        onScrollEndDrag={({ index }) => setSelectedItemIndex(index)}
        initialSelectedIndex={initialSelectedIndex}
        height={height}
        width={windowWidth}
      />
      <View style={styles.selectedItemWrapper}>
        <Text>Selected item index {selectedItemIndex}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectedItemWrapper: {
    marginTop: 50
  },
});

Properties (All are optional)

Prop	Default	Type	Description
items	[{value: 0, label: 'No items', itemColor: 'red'}]	Array<object>	-
onScroll	-	func	Returns selected selected index
onMomentumScrollBegin	-	func	Returns selected selected index
onMomentumScrollEnd	-	func	Returns selected selected index
onScrollBeginDrag	-	func	Returns selected selected index
onScrollEndDrag	-	func	Returns selected selected index
initialSelectedIndex	0	number	Set index number of initial item.
transparentItemRows	3	number	Set number of items at top and bottom of selected index.
width	300	number	-
height	300	number	-
horizontal	false	boolean	If true then a Horizontal picker.
allItemsColor	#000	string	-
selectedItemBorderColor	'#cecece'	string	-
fontSize	-	number	-
fontFamily	'Arial'	string	-
renderItem	-	func	Custom render function for each item. Passed in PickerListItemProps See source for a working example.
renderGradientOverlay	true	boolean	Render gradient over outer items.
topGradientColors	[...]	Array<string>	See default value in source.
bottomGradientColors	[...]	Array<string>	See default value in source.