digicard-react-native-number-please
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

React Native Number Please 🙏🏽

Build npm npm NPM

Generate react-native pickers with range numbers.

Example

runs with expo

ezgif-3-f565f85e890a

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 = { 'day':  16,'year': 1970, 'month':  4  };
  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
pickers Array of objects containing individal picker config undefined IRNNPPicker[]
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

Install

npm i digicard-react-native-number-please

DownloadsWeekly Downloads

49

Version

1.1.6

License

MIT

Unpacked Size

69.7 kB

Total Files

36

Last publish

Collaborators

  • albertols