React Native Numpad

A simple React Native number pad for quickly updating multiple number inputs.

• ✅ No Dependencies
• ✅ iOS
• ✅ Android
• ✅ React Native Web
• ✅ JS-Only (No Native Code / No Linking Necessary)

Demo 👉 Expo Snack

Install

yarn add react-native-numpad

Use Cases

• Splitting expenses
• Forms with multiple number inputs
• Spreadsheets
• Calculators

Usage

import React from 'react';
import NumberPad, { Input, Display } from './index';

export default () => (
  <NumberPad>
    <Display key={0} cursor value={1.0} />
    <Display key={1} cursor value={2.5} />
    <Input />
  </NumberPad>
);

Custom Icons

import React from 'react';
import NumberPad, { Input, Display } from './index';
import { Ionicons } from '@expo/vector-icons';

export default () => (
  <NumberPad>
    <Display key={0} cursor value={1.0} />
    <Display key={1} cursor value={2.5} />
    <Input
      backspaceIcon={<Ionicons icon="ios-backspace" {...Input.iconStyle} />}
      hideIcon={<Ionicons icon="ios-arrow-down" {...Input.iconStyle} />}
    />
  </NumberPad>
);

API

Under the hood, react-native-numpad uses the React Context API to link the number inputs (the <Display>s) to the number pad (the <Input>).

<NumberPad> Component

The <NumberPad> component is a HOC (Higher Order Component) that does not accept any props besides children. It creates a reactNativeNumpad context that listens for press events on the number inputs, opens the number input when it detects a press, and then updates the input values when the user presses on the number buttons in the number pad.

<Display> Component

The <Display> is the number pad's equivalent of React Native's <TextInput> component. It is a controlled component that, when pressed, opens the number pad.

| Prop | Description | Default | | -------------------------- | ------------------------------------------------------------------------------------------------ | ------- | | value | Current value of the input (number only) | None | | style | Any valid style object for <TouchableOpacity> | None | | textStyle | Any valid style object for a <Text> component | None | | activeStyle | Any valid style object for a <Text> component | None | | invalidTextStyle | Any valid style object for a <Text> component | None | | placeholderTextStyle | Any valid style object for a <Text> component | None | | cursorStyle | Any valid style object for a <View> component | None | | blinkOnStyle | Any valid style object for a <View> component | None | | blinkOffStyle | Any valid style object for a <View> component | None | | onChange | An event handler function that receives the new value (number) as an argument | None | | cursor | Whether or not to show the cursor when the input is focused (boolean) | true | | autofocus | Whether or not to autofocus the input when the component is loaded (boolean) | false |

<Input> Component

The <Input> a custom number pad keyboard that, unlike the native keyboard, does not minimize when the user presses on a new number input if it is already open. It is stylable and easy to customize.

| Prop | Description | Default | | ------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | | height | Height of the number pad | 270 | | position | How the number pad will be positioned | 'absolute' | 'relative' | | style | Any valid style object for a <View> component (Animated.View, actually) | None | | backspaceIcon | An Icon element (eg from react-native-vector-icons or @expo/vector-icons) | None | | hideIcon | An Icon element (eg from react-native-vector-icons or @expo/vector-icons) | None | | onWillHide | Called just before the number pad will hide | None | | onDidHide | Called just after the number pad hides | None | | onWillShow | Called just before the number pad will show | None | | onDidShow | Called just after the number pad shows | None |

<AvoidingView> Component

Sometimes React Native's built-in does not work smoothly with the number pad: it can either have performance issues where animations are choppy or it can be difficult to configure its height properly altogether. We've included a number pad context-aware version that adjusts it's height based on the keyboard animation to achieve a smooth frame rate.

| Prop | Description | Default | | ----------- | ---------------------------------------------------------------------------------------------------------------- | ------- | | style | Any valid style object for a <View> component (Animated.View, actually) | None |

Version History (Change Log)

View here.

Contribute

We welcome contributions! If you are interested in contributing, consider helping us with one of the following tasks:

• Rewrite components in TypeScript using arrow-function components and React hooks
• Add TypeScript bindings
• Add Tests

Glance Money

We wrote this for, actively use, and maintain this library for Glance Money. Now it is free and open for the world to use ❤️

License

MIT licensed.