https://github.com/thebiltheory/react-native-number-please

🔢 Generate react-native pickers with range numbers.
https://github.com/thebiltheory/react-native-number-please

android digit digits dropdown expo ios number numbers picker react react-native

Last synced: about 1 month ago
JSON representation

🔢 Generate react-native pickers with range numbers.

• Host: GitHub
• URL: https://github.com/thebiltheory/react-native-number-please
• Owner: thebiltheory
• License: mit
• Created: 2020-04-09T08:02:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:38:11.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T18:43:25.205Z (about 2 months ago)
• Topics: android, digit, digits, dropdown, expo, ios, number, numbers, picker, react, react-native
• Language: TypeScript
• Homepage:
• Size: 3.72 MB
• Stars: 153
• Watchers: 5
• Forks: 19
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Number Please 🙏🏽

[![Build](https://circleci.com/gh/thebiltheory/react-native-number-please/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/thebiltheory/react-native-number-please) ![npm](https://img.shields.io/npm/v/react-native-number-please?color=%236820FE) ![npm](https://img.shields.io/npm/dm/react-native-number-please) ![NPM](https://img.shields.io/npm/l/react-native-number-please)

Generate react-native pickers with range numbers.

## Example

[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://snack.expo.io/@thebiltheory/react-native-number-please)



### Installing

Add the package to your project

```bash

yarn add react-native-number-please

npm install -S react-native-number-please

```

## Usage

```javascript

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 (

    

      I would like

       setPizzas(values)}

      />

    

  );

};

```

```javascript

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 (

    

      When is your birthday?

       setBirtday(values)}

      />

      You're {calculateAge()} years old

    

  );

};

```

## Props

| 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.                                   | `{}`        |

## License

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