A fully customizable in-app keyboard for React Native with smooth animations and multiple layouts
npm install react-native-custom-keyboard-pro

A fully customizable in-app keyboard for React Native with smooth animations, multiple layouts, and a clean API inspired by Flutter.
⨠Declarative API - Flutter-inspired component interface
šØ Fully Customizable - Complete control over keyboard layouts, colors, and styling
ā” Smooth Animations - Native animations at 60fps performance
š Type Safe - Written in TypeScript with full type definitions
š± Multiple Keyboards - Support for multiple keyboard types in one app
ā»ļø Memory Efficient - WeakMap-based architecture prevents memory leaks
š§ Predefined Layouts - Ready-to-use numeric and alphabetic keyboards
š¦ Zero Config - Works out of the box with automatic safe area handling


``sh`
npm install react-native-custom-keyboard-pro react-native-safe-area-context
Or with yarn:
`sh`
yarn add react-native-custom-keyboard-pro react-native-safe-area-context
`tsx
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
KeyboardProvider,
KeyboardHost,
InputKeyboard,
Keyboard,
NUMERIC_LAYOUT,
ALPHA_LAYOUT,
useKeyboardInput,
} from 'react-native-custom-keyboard-pro';
export default function App() {
const [amount, handleNumericKey, setAmount] = useKeyboardInput();
const [name, handleAlphaKey, setName] = useKeyboardInput();
return (
value={amount}
onChangeText={setAmount}
onCustomKeyPress={handleNumericKey}
placeholder="Enter amount"
style={styles.input}
/>
value={name}
onChangeText={setName}
onCustomKeyPress={handleAlphaKey}
placeholder="Enter name"
style={styles.input}
/>
{/ Host del teclado (al final del layout) /}
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 20 },
input: {
height: 48,
borderWidth: 1,
borderColor: '#ccc',
paddingHorizontal: 16,
marginBottom: 20,
},
});
`
- KeyboardProvider - Context provider for keyboard state management
- InputKeyboard - Smart TextInput with automatic keyboard association
- KeyboardHost - Container that renders the active keyboard
- Keyboard - Customizable keyboard component with flexible layouts
- inputRegistry - Internal WeakMap-based registration system
`tsx
import { NUMERIC_LAYOUT, ALPHA_LAYOUT } from 'react-native-custom-keyboard-pro';
layout={NUMERIC_LAYOUT}
containerBackgroundColor="#000"
keyColor="#1e3a8a"
keyHeight={50}
/>
layout={ALPHA_LAYOUT}
containerBackgroundColor="#16213e"
keyColor="#0f172a"
keyHeight={45}
/>
`
A TextInput component with automatic keyboard association.
#### Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| keyboardName | string | ā
| Unique identifier for the keyboard to display |onCustomKeyPress
| | (key: string) => void | ā | Callback fired when a key is pressed |...TextInputProps
| | TextInputProps | ā | All standard React Native TextInput props |
`tsx`
onCustomKeyPress={(key) => console.log(key)}
placeholder="Enter amount"
style={styles.input}
/>
Container component that hosts and animates keyboards. Automatically handles safe area.
#### Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| children | React.ReactNode | ā
| components to manage |height
| | number | ā | Default height for keyboards (default: 280) |backgroundColor
| | string | ā | Default background color (default: '#111') |
`tsx`
Customizable keyboard component with flexible layouts and styling.
#### Props
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| name | string | ā
| Unique identifier matching InputKeyboard.keyboardName |layout
| | string[][] | ā
| 2D array defining key layout (rows and columns) |onKeyPress
| | (key: string) => void | ā | Callback fired when a key is pressed |keyHeight
| | number | ā | Height of each key in pixels (default: 56) |containerHeight
| | number | ā | Total container height (overrides KeyboardHost height) |containerBackgroundColor
| | string | ā | Background color of keyboard container |keyColor
| | string | ā | Background color of keys (default: '#222') |keyPressedColor
| | string | ā | Key color when pressed (default: '#333') |textColor
| | string | ā | Text color on keys (default: '#fff') |fontSize
| | number | ā | Font size of key text (default: 18) |
`tsx`
layout={NUMERIC_LAYOUT}
onKeyPress={(key) => console.log(key)}
keyHeight={50}
containerHeight={260}
containerBackgroundColor="#000"
keyColor="#1e3a8a"
keyPressedColor="#3b82f6"
textColor="#ffffff"
fontSize={20}
/>
Hook that simplifies keyboard input handling with built-in backspace support.
Returns: [value: string, handleKeyPress: (key: string) => void, setValue: (value: string) => void]
`tsx
const [amount, handleAmountKey, setAmount] = useKeyboardInput('');
onChangeText={setAmount}
onCustomKeyPress={handleAmountKey}
keyboardName="numeric"
/>
`
Hook for programmatic keyboard control.
`tsx
const { showKeyboard, hideKeyboard, activeKeyboard } = useKeyboard();
// Show a specific keyboard
showKeyboard('numeric');
// Hide current keyboard
hideKeyboard();
// Check active keyboard
console.log(activeKeyboard); // 'numeric' | null
`
The library includes two ready-to-use keyboard layouts:
Standard numeric keypad (3x4 grid):
`tsx
import { NUMERIC_LAYOUT } from 'react-native-custom-keyboard-pro';
// Layout:
// 1 2 3
// 4 5 6
// 7 8 9
// . 0 ā«
`
Full QWERTY keyboard with Spanish support:
`tsx
import { ALPHA_LAYOUT } from 'react-native-custom-keyboard-pro';
// Layout:
// 1 2 3 4 5 6 7 8 9 0
// Q W E R T Y U I O P
// A S D F G H J K L Ć
// Z X C V B N M ā«
// . , ⣠@ ;
`
Each keyboard can have independent styling:
`tsx`
{/ Dark blue numeric keyboard /}
layout={NUMERIC_LAYOUT}
containerHeight={240}
containerBackgroundColor="#0a0e27"
keyColor="#1e3a8a"
keyPressedColor="#3b82f6"
textColor="#ffffff"
fontSize={22}
keyHeight={55}
/>
{/ Custom alpha keyboard /}
layout={ALPHA_LAYOUT}
containerHeight={280}
containerBackgroundColor="#16213e"
keyColor="#0f172a"
keyPressedColor="#1e293b"
textColor="#e2e8f0"
fontSize={16}
keyHeight={42}
/>
Create your own keyboard layouts:
`tsx
const CUSTOM_LAYOUT = [
['A', 'B', 'C'],
['D', 'E', 'F'],
['.', 'ā£', 'ā«'], // '' = empty space, ⣠= spacebar, ā« = backspace
];
layout={CUSTOM_LAYOUT}
onKeyPress={handleCustomKey}
/>
`
For advanced use cases, you can access the input registry directly:
`tsx
import { inputRegistry } from 'react-native-custom-keyboard-pro';
// Get current active input
const currentInput = inputRegistry.getCurrentInput();
// Get metadata for current input
const metadata = inputRegistry.getCurrentMetadata();
`
Check out the example directory for a complete working demo with multiple keyboard types.
- Smooth animations at 60fps using React Native Animated API
- Memory efficient with WeakMap-based architecture
- Optimized rendering with conditional component mounting
- Zero memory leaks through automatic cleanup
- Automatic safe area handling for notch/gesture devices
- React Native >= 0.70
- react-native-safe-area-context >= 4.0.0
component automatically applies showSoftInputOnFocus={false}. This is handled internally.$3
Safe area is handled automatically by KeyboardHost. Make sure you're wrapping your keyboards with For deeper technical insights:
- š Architecture - Design principles, component hierarchy, and system architecture
- ā
Verification - Complete checklist of tested features and platform support
Contributions are welcome! Please read our contributing guidelines for details.
- Development workflow
- Sending a pull request
- Code of conduct
Built with ā¤ļø for the React Native community by GianSandoval5
If you find this library helpful, consider:
- ā Starring the repo
- š Reporting issues
- š Contributing improvements
- š¢ Sharing with the community
Follow me on GitHub for more React Native libraries and tools!
MIT Ā© GianSandoval5
---
Made with create-react-native-library