ArturKalach / react-native-a11y

A11y Library for RN
MIT License
42 stars 5 forks source link

KeyboardFocusTextInput: text input wrapper for standardize TextInput focusing behavior #80

Closed ArturKalach closed 4 months ago

ArturKalach commented 4 months ago

It is basically workaround for: https://github.com/facebook/react-native/issues/30464, https://github.com/facebook/react-native/issues/31820#issuecomment-2058400787 issues.

KeyboardFocusTextInput

KeyboardFocusTextInput is a TextInput with a view-based wrapper (TextInputWrapperNative). This wrapper helps standardize TextInput focusing behavior and also serves as a workaround for the Tab/Shift+Tab issue in Android.

Props Description
TextInputProps Default TextInput props that are passed to the TextInput
onFocusChange? Event to handle focus change, (e: event.nativeEvent.isFocused) => void
canBeFocused? boolean default true, describe whether component can be focused by keyboard
focusType?: Focus type can be default, auto, or press. Based on investigation, Android and iOS typically have different default behaviors. On Android, the TextInput is focused by default, while on iOS, you need to press to focus. auto is used for automatic focusing, while keyboard focus targets the input. With press, you need to press the spacebar to focus an input.
blurType?: Only for iOS. This defines the behavior for blurring input when focus moves away from the component. By default, iOS allows typing when the keyboard focus is on another component. You can use disable to blur input when focus moves away. (Further investigation is needed for Android.)
containerStyle?: Style property (StyleProp) for wrapper view

Examples

import { KeyboardFocusTextInput } "react-native-a11y";

const App = () => {

  return  <KeyboardFocusTextInput
      style={styles.textInput}
      containerStyle={styles.textInputContainer}
      value={inputValue}
      onChangeText={setInputValue}
      focusType="auto"
      blurType="auto"
    />
}