usmangurowa/rn-screen-keyboard

A Virutal Screen keyboard implementation for React-Native

rn-screen-keyboard

A Customizable On-Screen Keyboard Component for React Native

This React Native component provides a user-friendly on-screen keyboard for various input scenarios. It offers customization options for styling, layout, and behavior, allowing you to tailor it to your specific needs.

Features:

• Displays a standard numeric keyboard layout (rows 1-3, with 0 and a custom Backspace button in the footer).
• Supports custom input of characters for flexibility.
• Provides built-in Backspace functionality for single character deletion.
• Allows for optional Left, Center, and Right components in the footer for additional features.
• Includes customizable styling properties for cells, rows, and the overall keyboard.
• Integrates with React Native's Pressable component for touch handling and optional ripple effects on Android (requires react-native-gesture-handler).

Installation:

npm install rn-screen-keyboard

Usage:

import RNScreenKeyboard from 'rn-screen-keyboard';
import {Text, View} from "react-native"

const MyComponent = () => {
  const [value, setValue] = useState('');

  const handleKeyPress = (data) => {
    setValue(data);
  };

  return (
    <View style={{ flex: 1 }}>
      <Text>{value}</Text>
      <RNScreenKeyboard
        value={value}
        onKeyPress={handleKeyPress}
        // Optional props for customization
        textStyle={{ fontSize: 20 }}
        cellStyle={{ backgroundColor: '#f0f0f0' }}
        BackSpaceComponent={<Text>DEL</Text>} // Custom Backspace component
        footerStyle={{ backgroundColor: '#e0e0e0' }}
        Left={<Text>.</Text>} // Custom left footer button
        Right={<Text>Done</Text>} // Custom right footer button
      />
    </View>
  );
};

Props:

Prop Name	Type	Description	Default Value
value	string	The current value of the input field	''
onKeyPress	(key: string) => void	Function to handle key press events	-
textStyle	object	Styles applied to the text within each cell	{}
cellStyle	object	Styles applied to each individual cell (button)	{}
rowStyle	object	Styles applied to each row of cells	{}
BackSpaceComponent	React.ReactNode	Custom component to display for the Backspace button	-
footerStyle	object	Styles applied to the footer container	{}
Left	React.ReactNode	Custom content to display in the left footer cell	-
Right	React.ReactNode	Custom content to display in the right footer cell	-
Center	React.ReactNode	Custom content to display in the center footer cell	-
backspaceTint	string	Tint color for the Backspace icon (if not using a custom BackSpaceComponent)	'black'
textLength	number	(Optional) Maximum allowed length of the input string	0 (unlimited)
Footer	React.ReactNode	(Optional) Custom component to replace the default footer	-
ripple	boolean	(Optional) Enables a ripple effect on touch (Android)	true
ripple_color	string	(Optional) Color for the ripple effect	default_ripple_color (defined in styles)

Customization:

• You can further customize the appearance and behavior of the keyboard by overriding styles in your own stylesheet. Refer to the styles.js file for available style properties.
• The ripple prop allows you to enable an optional ripple effect on Android platforms for a more tactile user experience. This requires linking react-native-gesture-handler.