Package Exports

react-native-keyboard-tools

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-keyboard-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-keyboard-tools

Typesafe way to work with keyboard

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

Showcase

Expo Playground

Usage

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

$ 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