A Virutal Screen keyboard implementation for React-Native

Overview

React Native Screen Keyboard

Demo

React Native Screen Keyboard is a virutal screen keyboard implementation for React Native. It is fully customizable, the last row of the keys can be completely customized or changed to fit perfectly with your projects.

It support's Expo

Installation

npm

npm i rnscreenkeyboard

yarn

yarn add rnscreenkeyboard

Example

(""); return ( setValue(val)} /> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, input: { padding: 10, backgroundColor: "#ddd", width: "50%", borderRadius: 20, fontSize: 20, letterSpacing: 20, textAlign: "center", }, }); ">
import React from "react";
import { StyleSheet, TextInput, View } from "react-native";
import RNScreenKeyboard from "rnscreenkeyboard";

export default function App() {
  const [value, setValue] = React.useState<string>("");
  return (
    <View style={styles.container}>
      <TextInput value={value} style={styles.input} />
      <RNScreenKeyboard
        textStyle={{ color: "gray" }}
        backspaceTint={"gray"}
        cellStyle={{
          borderRadius: 100,
          backgroundColor: "lightblue",
          margin: 5,
        }}
        value={value}
        onKeyPress={(val: string) => setValue(val)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    padding: 10,
    backgroundColor: "#ddd",
    width: "50%",
    borderRadius: 20,
    fontSize: 20,
    letterSpacing: 20,
    textAlign: "center",
  },
});

Props

Name Type Default Description
cellStyle ViewStyle
textStyle TextStyle
rowStyle ViewStyle
onKeyPress func
backspaceTint string black
BackSpaceComponent React.ReactNode backspace image
Left React.ReactNode
Center React.ReactNode
Right React.ReactNode

License

MIT

MIT License

Copyright (c) 2022 Usman Hassan

You might also like...
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

react-native-idle-timer A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app Install npm insta

React native full screen modal component.

react-native-fs-modal React native full screen modal component. Demo Usage NOTE: If you are using the native status bar you will need to combine this

A React Native component for user to draw anything by touching screen
A React Native component for user to draw anything by touching screen

react-native-drawpad Basic useful feature list: Let users draw anything they want! change color of input easily change thickness of input easily defau

Quick React Native component for a full screen ScrollView
Quick React Native component for a full screen ScrollView

pagescrollview Very simple React Native / Expo ScrollView component that fills all the available area and have a working scrolling. It fixes some very

Full screen functionality for Android

React native full screen functionality Android There is plenty of room for improvment by adding additional react bindings for props and callbacks. Pro

Provide solutions to make your app flexible for different screen sizes, different devices.
Provide solutions to make your app flexible for different screen sizes, different devices.

react-native-size-scaling Provide solutions to make your app flexible for different screen sizes, different devices, based on your device's pixel rati

react-native-rebound-scrollview ★12 - React Native Android ReboundScrollView implementation.
react-native-rebound-scrollview ★12 - React Native Android ReboundScrollView implementation.

React Native ReboundScrollView support android rebound ScrollView, compatible ios -- use react scrollview Usage ##Android In android/setting.gradle ..

SGListView is a memory minded implementation of React Native's ListView
SGListView is a memory minded implementation of React Native's ListView

React Native SGListView SGListView is a memory minded implementation of the React Native's ListView. Maintainers Wanted I'm currently looking for main

A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features Can be

Owner
Usman Hassan
_0-0_
Usman Hassan
A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

react-native-keyboard-accessory A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. Expo Snack Playground https:

Arda Pektaş 458 Sep 26, 2022
Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

React Native Orientation Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per scr

Yamill Vallecillo 1.7k Sep 20, 2022
Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer Plug and play iOS react-native keyboard spacer view. Quick Start Install View: npm install --save react-native-keyboard-s

Andrew Hurst 1.5k Sep 17, 2022
⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.

React-Native Keyboard Manager Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects ⚛ . Thanks to awesome IQK

Douglas Nassif Roma Junior 697 Sep 22, 2022
Keyboard events for react-native

react-native-keyboardevents Keyboard events for react-native As of react-native 0.11 this module is obsolete. Now you can do something like the follow

Johannes Lumpe 247 Apr 16, 2022
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 371 Jul 25, 2022
null 133 Sep 20, 2022
A splash screen for react-native, hide when application loaded ,it works on iOS and Android.

react-native-splash-screen A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android. C

Devio.org 5.3k Sep 30, 2022
Images etc in Full Screen Lightbox Popovers for React Native

react-native-lightbox Installation yarn add react-native-lightbox Usage navigator property is optional but recommended on iOS, see next section for N

Joel Arvidsson 2.8k Sep 18, 2022
A notification bar alert displayed at the top of the screen for react-native

react-native-message-bar A message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects. Content

Kevin 441 Sep 20, 2022