React Native Number Please 🙏🏽

Generate react-native pickers with range numbers.

Example

Installing

Add the package to your project

yarn add react-native-number-please
npm install -S react-native-number-please

Usage

importReactfrom"react";import{View,Text}from"react-native";importNumberPleasefrom"react-native-number-please";constOrderPizza=()=>{constinitialValues=[{id: "pizza",value: 3}];const[pizzas,setPizzas]=useState(initialValues);constpizzaNumbers=[{id: "pizza",label: "🍕",min: 0,max: 99}];return(<View><Text>I would like</Text><NumberPleasedigits={pizzaNumbers}values={pizzas}onChange={(values)=>setPizzas(values)}/></View>);};

importReactfrom"react";import{View,Text}from"react-native";importNumberPleasefrom"react-native-number-please";constItsYourBirthday=()=>{constinitialBirthday=[{id: "day",value: 16},{id: "month",value: 4},{id: "year",value: 1970},];const[birthday,setBirtday]=useState(initialBirthday);constdate=[{id: "day",label: "",min: 0,max: 31},{id: "month",label: "",min: 0,max: 12},{id: "year",label: "",min: 1900,max: newDate().getFullYear()},return(<View><Text>My birthday</Text><NumberPleasedigits={date}values={birthday}onChange={(values)=>setBirtday(values)}/></View>);};

Props

Prop	Required	Description	Default	Types
digits	✅	Array of objects containing individal picker config	undefined	IDigit[]
values	✅	Array of objects initial values for each picker in digits	undefined	IValue[]
onChange	✅	Callback for when an item is selected.	undefined
pickerStyle	Optional	Picker wrapper style object.	{}
itemStyle	Optional	Picker item style object.	{}

Interfaces

interfaceIDigit{id: string;label?: string;min: number;max: number;}interfaceIValue{id: string;value: number;}

License

This project is licensed under the MIT License - see the LICENSE.md file for details