Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jul 3, 2024

Conversation

ArturKalach
Copy link
Owner

It is basically workaround for: facebook/react-native#30464, facebook/react-native#31820 (comment) 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"
    />
}


@ArturKalach ArturKalach changed the base branch from master to dev July 3, 2024 20:31
@ArturKalach ArturKalach merged commit a2c7cde into dev Jul 3, 2024
@ArturKalach ArturKalach deleted the feat/text-input-wrapper branch July 3, 2024 20:31
@ArturKalach ArturKalach restored the feat/text-input-wrapper branch July 3, 2024 20:31
ArturKalach added a commit that referenced this pull request Jul 4, 2024
* KeyboardFocusTextInput: text input wrapper for standardize TextInput focusing behavior (#80)

* feat: add text input wrapper

* chore: update readme with example

* feat: update is keyboard connected functionality (#81)

* chore: update version

* fix: revert back privious useKeyboardConnected logic

* chore: update version
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant