Generate react-native pickers with range numbers.
Add the package to your project
yarn add react-native-number-please npm install -S react-native-number-pleaseimport React from 'react'; import { View, Text } from 'react-native'; import NumberPlease from 'react-native-number-please'; const OrderPizza = () => { const initialValues = [{ id: 'pizza', value: 3 }]; const [pizzas, setPizzas] = useState(initialValues); const pizzaNumbers = [{ id: 'pizza', label: '🍕', min: 0, max: 99 }]; return ( <View> <Text>I would like</Text> <NumberPlease pickers={pizzaNumbers} values={pizzas} onChange={(values) => setPizzas(values)} /> </View> ); };import React from 'react'; import { View, Text } from 'react-native'; import NumberPlease from 'react-native-number-please'; const ItsYourBirthday = () => { const initialBirthday = { day: 16, year: 1970, month: 4 }; const [birthday, setBirtday] = React.useState(initialBirthday); const { day, month, year } = birthday; const date = [ { id: 'day', label: '', min: 0, max: 31 }, { id: 'month', label: '', min: 0, max: 12 }, { id: 'year', label: '', min: 1900, max: new Date().getFullYear() }, ]; const calculateAge = () => { const ageDifMs = Date.now() - new Date(year, month, day).getTime(); const ageDate = new Date(ageDifMs); return Math.abs(ageDate.getUTCFullYear() - 1970); }; return ( <View style={styles.container}> <Text>When is your birthday?</Text> <NumberPlease pickers={date} values={birthday} onChange={(values) => setBirtday(values)} /> <Text>You're {calculateAge()} years old</Text> </View> ); };| Prop | Required | Description | Default |
|---|---|---|---|
pickers | ✅ | Array of objects containing individal picker config | undefined |
values | ✅ | Array of objects initial values for each picker in digits | undefined |
onChange | ✅ | Callback for when an item is selected. | undefined |
pickerStyle | Optional | Picker wrapper style object. | {} |
itemStyle | Optional | Picker item style object. | {} |
This project is licensed under the MIT License - see the LICENSE.md file for details