react-native-carousel-picker
Carousel-picker is a component that allows you to display your data in a circular select/dropbox 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
const currentItemIndex = 1
const [itemIndex, setItemIndex] = useState(currentItemIndex);
const items = [1, 2, 3, 4, 5]
const onChanged = (index: number) => {
setItemIndex(index)
console.log(`onChanged index ${index}`)
}
<View style={{
flex: 1,
}}>
<Picker
{...{
items,
index: itemIndex,
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 my mobile app Dietethic.net
License
MIT