react-native-carousel-picker

Carousel-picker is a component that allows you to display your data in a circular select/dropdown way.
It's a full typescript responsive component that uses reanimated 2.
The work is still in progress but you can use it and improve it if you want! PR are welcome.

Demo

Works on both iPhone and Android

Installation

Using yarn:

1yarn add @grean/react-native-carousel-picker

Usage

You can control the picker value with the index prop.
When you manually change the value, onChanged callback will be called.
You can pass an array of primitives for your values with the items prop.

1const currentItemIndex = 1
2const [index, setIndex] = useState(currentItemIndex);
3const items = [1, 2, 3, 4, 5] //or ['one', 'two', 'three'...]
4
5const onChanged = (newIndex: number) => {
6  setIndex(newIndex)
7}
8
9//removed code for brevety
10  <View style={{
11    flex: 1,
12  }}>
13    <Picker
14      {...{
15        items,
16        index,
17        onChanged,
18        marginHorizontalPercentage: 0.05,
19        spaceBetween: 1 / 1.75,
20        textStyle: {
21          paddingVertical: 10,
22          textShadowColor: 'rgba(0, 0, 0, 0.75)',
23          textShadowOffset: { width: 3, height: 3 },
24          textShadowRadius: 10,
25        },
26      }}
27    />
28  </View>

Component props

1interface ViewportProps<T> {
2  allowFontScaling?: boolean //false: see RN Text prop
3  containerStyle?: ViewStyle //All view style props
4  discoverable?: boolean //true: allow horizontal swipe to discover hidden item's part
5  display?: DisplayType //"TOP_BOTTOM": one of those "TOP_BOTTOM" | "CENTER_ONLY"
6  fontSize?: number //200: fontsize value
7  index?: number //current selected index
8  items?: T[] //array of primitives of any types
9  marginHorizontalPercentage?: number //0: pourcentage of width container, ie: 0.05
10  marginVerticalPercentage?: number //0: pourcentage of height container, ie: 0.05
11  onChanged?: (index: number) => void //Callback called when selected index changed
12  opacityRangeOut?: number[] //Opacity interpolation thresholds for items. Default value depends on display prop mode but you can still override them, ie: [0, 0.6, 1, 0.6, 0]
13  scaleRangeOut?: number[] //Scale interpolation thresholds for items. Default value depends on display prop mode but you can still override them, ie: [0, 0.6, 1, 0.6, 0]
14  spaceBetween?: number //1 / 2.25: space between displayed items 
15  textStyle?: TextStyle //All RN Text style props
16}

Testing

See Expo example app for testing with hot-reload, you can directly modify the code's component and see how your modifications looks like immediately.

1git clone https://github.com/grean/react-native-carousel-picker.git
2cd react-native-carousel-picker && yarn
3cd example && yarn
4yarn ios

About

If you want to eat well and healthy, i recommand you to check out our mobile app Dietethic.net

License

MIT