Skip to content

Faradey27/react-native-keyboard-tools

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

Typesafe way to work with keyboard

platforms npm npm

github issues github closed issues


Table of contents


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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published