react-native-keyboard-textinput

A react native package to provide a versatile and easy to implement solution to the overcomplicated problem of how to handle keyboards on different screens throughout a mobile app.

The package is designed for true separation of concerns when it comes to your screens and keyboard interactions. It also allows much easier handling on accessability and user experience.

Installation

npm i @swithuns/react-native-keyboard-textinput

Usage

Place the handler at your root component, optional to wrap your app in the dismiss handler if you want keyboard to dismiss when user presses outside of inputs and pressables.

import {
  InputKeyboardHandler,
  KeyboardDismissWrapper,
} from "react-native-keyboard-textinput";

export default function App() {
  return (
    <KeyboardDismissWrapper>
      ...rest of app
      <InputKeyboardHandler style={styles.textInputStyle} />
    </KeyboardDismissWrapper>
  );
}

Usage across app

import { TextInput } from "react-native-keyboard-textinput";

<TextInput {...props} />;

Recent updates 1.0.2

-Improved handler for onSubmitEditing to allow local state objects to be handled in the function without any complicated state handling. -Unrendering of textinput closes keyboard. -forwarding of ref to allow ref functions eg: ref.current?.focus()

Future Plans

Additional supportive package that gives custom keyboard sticky inputs, cases to do: -Search keyboard with tags (as seen in example 3) -Chat messanger ui with gif and image upload for users to plugin handlers for. -Short form with check boxes and/or radios and a single textbox.

Please feel free to message me with additional ideas, or look at example 3 for how to implement customs and fire in a PR for me to add to the new package.

[email protected]