
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
rn-screen-keyboard
Advanced tools
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:
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:
styles.js
file for available style properties.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
.FAQs
React-Native Screen keyboard implementation
We found that rn-screen-keyboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.