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:
yarn 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.
const currentItemIndex = 1
const [index, setIndex] = useState(currentItemIndex);
const items = [1, 2, 3, 4, 5]
const onChanged = (newIndex: number) => {
setIndex(newIndex)
}
<View style={{
flex: 1,
}}>
<Picker
{...{
items,
index,
onChanged,
marginHorizontalPercentage: 0.05,
spaceBetween: 1 / 1.75,
textStyle: {
paddingVertical: 10,
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: { width: 3, height: 3 },
textShadowRadius: 10,
},
}}
/>
</View>
Component props
interface ViewportProps<T> {
allowFontScaling?: boolean
containerStyle?: ViewStyle
discoverable?: boolean
display?: DisplayType
fontSize?: number
index?: number
items?: T[]
marginHorizontalPercentage?: number
marginVerticalPercentage?: number
onChanged?: (index: number) => void
opacityRangeOut?: number[]
scaleRangeOut?: number[]
spaceBetween?: number
textStyle?: TextStyle
}
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.
git clone https://github.com/grean/react-native-carousel-picker.git
cd react-native-carousel-picker && yarn
cd example && yarn
yarn ios
About
If you want to eat well and healthy, i recommand you to check out our mobile app Dietethic.net
License
MIT