React-native-numpad NPM

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)

Screen Recording

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.