Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-native-keyboard-tools

A list of components, tools and hooks that help to work with the keyboard in react-native

Demo and playground

Expo Playground

Features

KeyboardAwareScrollView

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

useMaskedTextInput

A React hook to mask an input using.

Installation

Installation can be done through npm or yarn:

npm i react-native-keyboard-tools --save
yarn add react-native-keyboard-tools

Usage

KeyboardAwareScrollView example

import { KeyboardAwareScrollView } from 'react-native-keyboard-tools'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
  <View>
    <TextInput />
  </View>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

useMaskedTextInput example

import { TextInput } from 'react-native'
import { useMaskedTextInput } from 'react-native-keyboard-tools'
const MyComponent = () => {
  const [value, setValue] = useState("");
  const { onChangeMaskedText } = useMaskedTextInput({ mask: "+3(99) 9999 9999", onChangeText: setValue });

  return <TextInput onChangeText={onChangeMaskedText} />
}

useMaskedTextInput params

mask: defined by pattern

  • 9 - accept digit.
  • A - accept alpha.
  • S - accept alphanumeric.
  • * - accept all, EXCEPT white space.

Ex: AAA-9999

onChangeText: (value: string) => void

useMaskedTextInput result

onChangeMaskedText: (value: string, rawValue: string) => void;

License

MIT.

Author

Andrii Tiertyshnyi

Inspired

By https://github.com/wix/react-native-keyboard-aware-scrollview

By https://github.com/benhurott/react-native-masked-text

About

A list of components and tools that help to work with the keyboard in react-native.

Resources

License

Releases

No releases published

Packages

No packages published