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

react-native-keyboard-aware-scroll-view

v0.9.5

Published

A React Native ScrollView component that resizes when the keyboard appears.

Downloads

1,368,996

Readme

react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

Supported versions

  • v0.4.0 requires RN>=0.48
  • v0.2.0 requires RN>=0.32.0.
  • v0.1.2 requires RN>=0.27.2 but you should use 0.2.0 in order to make it work with multiple scroll views.
  • v0.0.7 requires react-native>=0.25.0.
  • Use v0.0.6 for older RN versions.

Installation

Installation can be done through npm or yarn:

npm i react-native-keyboard-aware-scroll-view --save
yarn add react-native-keyboard-aware-scroll-view

Usage

You can use the KeyboardAwareScrollView, KeyboardAwareSectionList or the KeyboardAwareFlatList components. They accept ScrollView, SectionList and FlatList default props respectively and implement a custom high order component called KeyboardAwareHOC to handle keyboard appearance. The high order component is also available if you want to use it in any other component.

Import react-native-keyboard-aware-scroll-view and wrap your content inside it:

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Auto-scroll in TextInput fields

As of v0.1.0, the component auto scrolls to the focused TextInput 😎. For versions v0.0.7 and older you can do the following.

Programatically scroll to any TextInput

In order to scroll to any TextInput field, you can use the built-in method scrollToFocusedInput. Example:

_scrollToInput (reactNode: any) {
  // Add a 'scroll' ref to your ScrollView
  this.scroll.props.scrollToFocusedInput(reactNode)
}
<KeyboardAwareScrollView
  innerRef={ref => {
    this.scroll = ref
  }}>
  <View>
    <TextInput
      onFocus={(event: Event) => {
        // `bind` the function if you're using ES6 classes
        this._scrollToInput(ReactNative.findNodeHandle(event.target))
      }}
    />
  </View>
</KeyboardAwareScrollView>

Programatically scroll to any position

There's another built-in function that lets you programatically scroll to any position of the scroll view:

this.scroll.props.scrollToPosition(0, 0)

Register to keyboard events

You can register to ScrollViewResponder events onKeyboardWillShow and onKeyboardWillHide:

<KeyboardAwareScrollView
  onKeyboardWillShow={(frames: Object) => {
    console.log('Keyboard event', frames)
  }}>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Android Support

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. Check here.

But if you want to use feature like extraHeight, you need to enable Android Support with the following steps:

  • Make sure you are using react-native 0.46 or above.
  • Set windowSoftInputMode to adjustPan in AndroidManifest.xml.
  • Set enableOnAndroid property to true.

Android Support is not perfect, here is the supported list:

| Prop | Android Support | | --------------------------- | ------------------- | | viewIsInsideTabBar | Yes | | resetScrollToCoords | Yes | | enableAutomaticScroll | Yes | | extraHeight | Yes | | extraScrollHeight | Yes | | enableResetScrollToCoords | Yes | | keyboardOpeningTime | No |

API

Props

All the ScrollView/FlatList props will be passed.

| Prop | Type | Description | | --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | | innerRef | Function | Catch the reference of the component. | | viewIsInsideTabBar | boolean | Adds an extra offset that represents the TabBarIOS height. | | resetScrollToCoords | Object: {x: number, y: number} | Coordinates that will be used to reset the scroll when the keyboard hides. | | enableAutomaticScroll | boolean | When focus in TextInput will scroll the position, default is enabled. | | extraHeight | number | Adds an extra offset when focusing the TextInputs. | | extraScrollHeight | number | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | | enableResetScrollToCoords | boolean | Lets the user enable or disable automatic resetScrollToCoords. | | keyboardOpeningTime | number | Sets the delay time before scrolling to new position, default is 250 | | enableOnAndroid | boolean | Enable Android Support |

Methods

Use innerRef to get the component reference and use this.scrollRef.props to access these methods.

| Method | Parameter | Description | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | | getScrollResponder | void | Get ScrollResponder | | scrollToPosition | x: number, y: number, animated: bool = true | Scroll to specific position with or without animation. | | scrollToEnd | animated?: bool = true | Scroll to end with or without animation. | | scrollIntoView | element: React.Element<*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } } | Scrolls an element inside a KeyboardAwareScrollView into view. |

Using high order component

Enabling any component to be keyboard-aware is very easy. Take a look at the code of KeyboardAwareFlatList:

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

export default listenToKeyboardEvents(FlatList)

The HOC can also be configured. Sometimes it's more convenient to provide a static config than configuring the behavior with props. This HOC config can be overriden with props.

/* @flow */

import { FlatList } from 'react-native'
import listenToKeyboardEvents from './KeyboardAwareHOC'

const config = {
  enableOnAndroid: true,
  enableAutomaticScroll: true
}

export default listenToKeyboardEvents(config)(FlatList)

The available config options are:

{
  enableOnAndroid: boolean,
  contentContainerStyle: ?Object,
  enableAutomaticScroll: boolean,
  extraHeight: number,
  extraScrollHeight: number,
  enableResetScrollToCoords: boolean,
  keyboardOpeningTime: number,
  viewIsInsideTabBar: boolean,
  refPropName: string,
  extractNativeRef: Function
}

License

MIT.

Author

Álvaro Medina Ballester <amedina at apsl.net>

Built with 💛 by APSL.