thebiltheory / React Native Number Please
Licence: mit
🔢 Generate react-native pickers with range numbers.
Stars: ✭ 30
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Number Please
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (+163.33%)
Mutual labels: dropdown, picker, expo
react-native-multi-selectbox
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user interface & user experience on both platforms.
Stars: ✭ 169 (+463.33%)
Mutual labels: dropdown, picker, expo
Actual Number Picker
Android: A horizontal number picker
Stars: ✭ 206 (+586.67%)
Mutual labels: picker, number
React Native Picker Select
🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
Stars: ✭ 1,229 (+3996.67%)
Mutual labels: picker, dropdown
react-native-smart-picker
React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.
Stars: ✭ 19 (-36.67%)
Mutual labels: dropdown, picker
React Native Modal Dropdown
A react-native dropdown/picker/selector component for both Android & iOS.
Stars: ✭ 1,103 (+3576.67%)
Mutual labels: picker, dropdown
Mobile Select
手机移动端选择组件 支持是否级联/单选到多选/可异步更新数据等..
Stars: ✭ 829 (+2663.33%)
Mutual labels: picker, number
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+666.67%)
Mutual labels: picker, dropdown
csc picker
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.
Stars: ✭ 25 (-16.67%)
Mutual labels: dropdown, picker
Re Spinner
A spinner that supports item click events
Stars: ✭ 19 (-36.67%)
Mutual labels: picker, dropdown
PhoneNumberKit
Android Kotlin library to parse and format international phone numbers. Country code picker.
Stars: ✭ 124 (+313.33%)
Mutual labels: picker, number
react-native-picker-box
Simple and configurable component picker for react native
Stars: ✭ 0 (-100%)
Mutual labels: dropdown, picker
Mkdropdownmenu
🔻 Dropdown Menu for iOS with many customizable parameters to suit any needs
Stars: ✭ 523 (+1643.33%)
Mutual labels: picker, dropdown
Numericaltextentry
An iOS library for beautiful number entry fields. iPad friendly. Written in Swift.
Stars: ✭ 16 (-46.67%)
Mutual labels: number
React Native Image Picker
🌄 A React Native module that allows you to use native UI to select media from the device library or directly from the camera.
Stars: ✭ 7,431 (+24670%)
Mutual labels: picker
React Native Starter Kit
React Native starter kit, get up and running !
Stars: ✭ 9 (-70%)
Mutual labels: expo
Dropdownmenu
DropDownMenu for Android,Filter the list based on multiple condition.
Stars: ✭ 815 (+2616.67%)
Mutual labels: dropdown
Jquery Dropdown
Bootstrap-style dropdowns with some added features and no dependencies.
Stars: ✭ 788 (+2526.67%)
Mutual labels: dropdown
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
import 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
digits={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 = [
{ id: "day", value: 16 },
{ id: "month", value: 4 },
{ id: "year", value: 1970 },
];
const [birthday, setBirtday] = useState(initialBirthday);
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()
},
return (
<View>
<Text>My birthday</Text>
<NumberPlease
digits={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
interface IDigit {
id: string;
label?: string;
min: number;
max: number;
}
interface IValue {
id: string;
value: number;
}
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].