react-native-keyboard-tools

Typesafe way to work with keyboard

Table of contents

• Showcase
• Usage
  • KeyboardAwareScrollView
  • useMaskedTextInput
  • KeyboardAwareScrollView and useMaskedTextInput
• KeyboardAwareScrollView props and methods
  • Props
  • Methods
• useMaskedTextInput params
• Credits
• License
• Author

Showcase

Expo Playground

Usage

$ npm install --save react-native-keyboard-tools

or

$ yarn add react-native-keyboard-tools

KeyboardAwareScrollView

import { View, TextInput } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-tools'

export const MyComponent = () => {
  return (
    <KeyboardAwareScrollView>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput />
      </View>
    </KeyboardAwareScrollView>
  )
}

useMaskedTextInput

import { useState } from 'react'
import { View, TextInput } from 'react-native'
import { useMaskedTextInput } from 'react-native-keyboard-tools'

export const MyComponent = () => {
  const [value, setValue] = useState("");
  const { onChangeMaskedText } = useMaskedTextInput({ mask: "+3(99) 9999 9999", onChangeText: setValue });

  return <TextInput onChangeText={onChangeMaskedText} />
}

KeyboardAwareScrollView and useMaskedTextInput

import { View, TextInput } from 'react-native'
import { KeyboardAwareScrollView, useMaskedTextInput } from 'react-native-keyboard-tools'

export const MyComponent = () => {
  const [value, setValue] = useState("");
  const { onChangeMaskedText } = useMaskedTextInput({ mask: "+3(99) 9999 9999", onChangeText: setValue });

  return (
    <KeyboardAwareScrollView>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput onChangeText={onChangeMaskedText} />
      </View>
    </KeyboardAwareScrollView>
  )
}

KeyboardAwareScrollView props and methods

Props

Prop | Description | Type | Default ------ | ------ | ------ | ------ children | Any react node | ReactNode | Required automaticallyAdjustContentInsets | Controls whether OS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar. | Boolean | false restoreScrollOnKeyboardHide | Controls whether library should restore scroll position to the initial value after keyboard become hidden | Boolean | false

Any react-native ScrollView props are also accepted(ScrollViewProps)

Methods

import { View, TextInput } from 'react-native'
import { KeyboardAwareScrollView, KeyboardAwareScrollViewRef } from 'react-native-keyboard-tools'

export const MyComponent = () => {
  const scrollViewRef = useRef<KeyboardAwareScrollViewRef>();

  return (
    <KeyboardAwareScrollView ref={scrollViewRef}>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput />
      </View>
      <View>
        <TextInput onChangeText={onChangeMaskedText} />
      </View>
    </KeyboardAwareScrollView>
  )
}

scrollViewRef.scrollTo: ({ x, y, animated }: { x?: number; y?: number; animated?: boolean }) => void

useMaskedTextInput params

const { onChangeMaskedText } = useMaskedTextInput({ mask, onChangeText });

mask: defined by pattern

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

Example: AAA-9999

onChangeText: (value: string) => void

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

Credits

Inspired by https://github.com/wix/react-native-keyboard-aware-scrollview and https://github.com/benhurott/react-native-masked-text

License

MIT.

Author

Andrii Tiertyshnyi