npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wuye/react-native-keyboard-area

v1.0.1

Published

React Native component that provides a View that always match the height of the keyboard

Downloads

2

Readme

react-native-keyboard-area

This library will address these problems:

  • When set windowSoftInputMode to adjustNothing, the React Native Keyboard events, keyboardDidHide and keyboardDidShow, will stop working (see issue #2852).

  • When Keyboard appear the entire app content will move up (iOS and Android).

  • For chat application than needs to keep the bottom text input in the same position when dismiss the Keyboard and show some actions, the switch will not be that smooth.

Getting started

$ yarn add react-native-keyboard-area

Is recommend to use React Native > 0.60, the autolinking will install this library native RNKeyboard module for iOS and Android.

Introduction

  • On iOS: React Native provides a component called KeyboardAvoidingView, wrap your page with that and it will move up the content when the keyboard appears.

  • On Android: By default in the AndroidManifest.xml we have the windowSoftInputMode set to adjustResize, the entire app content will move up when the keyboard appears so we don't need the KeyboardAvoidingView component.

In both way, the entire page content will move up or down then the Keyboard appear or disappear.

But sometimes we don't need to whole app to move up, the most common example is a Chat application, we might want to switch to a Custom View when the keyboard disappear.

Here comes this Library

This library solve the problem by creating a wrapper component KeyboardArea, this component will adjust his height then the keyboard appear or disappear.

In addition is also possible to control the state with isOpen props or with the exposed open() and close() methods.

Another benefit is that the ReactNaive will not repaint the whole app when the keyboard appears since main view will not change is size.

Real world example: before and after

How it works?

This library have some iOS and Android native code to notify, through an event named KeyboardSizeChanges, the KeyboardArea component when the keyboard height changes.

  • On iOS we just use the UIResponder keyboardWillShowNotification and keyboardWillHideNotification to then emit the event with the current height.

  • On Android we need to set the windowSoftInputMode to adjustNothing, to avoid the keyboard to move up the entire view, then we create a invisible PopupWindow to listen the layout changes and measure the keyboard height.

Usage

Most of the logic is inside the KeyboardArea component, we just need to wrap the content we want to show when the keyboard disappear and then set the isOpen props when we need to show, in follow example case, the ChatActionsInput component.

** this is a simplified version of the above screenshots **

import { KeyboardArea, KeyboardAreaRef } from 'react-native-keyboard-area';

/// ...
keyboardSpacerRef = createRef<KeyboardSpacerRef>();

handleUserClick = () => {
    this.keyboardSpacerRef.current?.close();
}

handleChangeMode = () => {
    this.setState(prev => ({
      inputMode:
        prev.inputMode === ChatInputModes.Actions
          ? ChatInputModes.Text
          : ChatInputModes.Actions,
    }));
}

keyboardAreaHeightChanged = (isOpen: boolean, currentHeight: number) => {
  // Your logic
};

render() {

    return (
        <PageContent>
            <ChatMessageList />
            <ChatTextInput onChangeMode={this.handleChangeMode} />
            <KeyboardSpacer
                ref={this.keyboardSpacerRef}
                isOpen={inputMode === ChatInputModes.Actions}
                onChange={this.keyboardAreaHeightChanged}
            >
                <ChatActionsInput />
            </KeyboardSpacer>
        </PageContent>
    );
}

Android notes

Since on android we might want use adjustResize for the others page, we can use this library setWindowSoftInputMode to dynamically change the SoftInput mode only for the pages that we need, for example:

import { RNKeyboard, SoftInputMode } from 'react-native-keyboard-area';

// Example with react-navigation page focus/blur events

componentDidMount() {
  navigation.addListener('blur', this.componentDidExit);
  navigation.addListener('focus', this.componentDidEnter);
}

componentDidEnter = () => {
  if (Platform.OS === 'android') {
    RNKeyboard.setWindowSoftInputMode(SoftInputMode.SOFT_INPUT_ADJUST_NOTHING,);
  }
};

componentDidExit = () => {
  if (Platform.OS === 'android') {
    RNKeyboard.setWindowSoftInputMode(SoftInputMode.SOFT_INPUT_ADJUST_RESIZE);
  }
};

componentWillUnmount() {
  navigation.removeListener('blur', this.componentDidExit);
  navigation.removeListener('focus', this.componentDidEnter);
}

Credits

For Android all credits goes to Cristian Holdunu and Siebe Brouwer for the PopupWindow idea implementation and to calculate the keyboard height, I just port it in the React Native module system.