CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-keyboard-aware-scroll-view

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

React Native Keyboard Aware ScrollView

React Native Keyboard Aware ScrollView provides ScrollView components that automatically handle keyboard appearance by resizing and scrolling to keep focused TextInput fields visible. It offers multiple component variants and a reusable Higher-Order Component (HOC) for enhancing any scrollable component with keyboard awareness.

Package Information

  • Package Name: react-native-keyboard-aware-scroll-view
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install react-native-keyboard-aware-scroll-view

Core Imports

import { 
  KeyboardAwareScrollView,
  KeyboardAwareFlatList,
  KeyboardAwareSectionList,
  listenToKeyboardEvents
} from "react-native-keyboard-aware-scroll-view";

For CommonJS:

const { 
  KeyboardAwareScrollView,
  KeyboardAwareFlatList,
  KeyboardAwareSectionList,
  listenToKeyboardEvents
} = require("react-native-keyboard-aware-scroll-view");

Basic Usage

import React from 'react';
import { View, TextInput } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default function MyForm() {
  return (
    <KeyboardAwareScrollView
      style={{ flex: 1 }}
      enableOnAndroid={true}
      extraHeight={75}
      keyboardOpeningTime={250}
      resetScrollToCoords={{ x: 0, y: 0 }}
      enableResetScrollToCoords={true}
    >
      <View style={{ padding: 20 }}>
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput 
          placeholder="Message" 
          multiline 
          numberOfLines={4} 
        />
      </View>
    </KeyboardAwareScrollView>
  );
}

Architecture

The library is built around several key components:

  • Component Variants: Three ready-to-use components (ScrollView, FlatList, SectionList) with keyboard awareness
  • Higher-Order Component: Reusable HOC that can enhance any scrollable React Native component
  • Cross-Platform Support: iOS and Android compatibility with platform-specific optimizations
  • Automatic Scrolling: Intelligent scrolling to keep focused inputs visible during keyboard events
  • Programmatic Control: Methods for manual scrolling and keyboard event handling

Capabilities

Keyboard Aware ScrollView

A ScrollView component that automatically scrolls to keep focused TextInput fields visible when the keyboard appears.

export class KeyboardAwareScrollView extends React.Component<
  KeyboardAwareScrollViewProps,
  KeyboardAwareState
> {
  getScrollResponder(): any;
  scrollToPosition(x: number, y: number, animated?: boolean): void;
  scrollToEnd(animated?: boolean): void;
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
  scrollToFocusedInput(
    reactNode: any,
    extraHeight?: number,
    keyboardOpeningTime?: number
  ): void;
  scrollIntoView(
    element: React.ReactElement,
    options?: ScrollIntoViewOptions
  ): Promise<void>;
  update(): void;
}

ScrollView Component

Keyboard Aware FlatList

A FlatList component enhanced with keyboard awareness for handling lists with input fields.

export class KeyboardAwareFlatList<ItemT = any> extends React.Component<
  KeyboardAwareFlatListProps<ItemT>,
  KeyboardAwareState
> {
  getScrollResponder(): any;
  scrollToPosition(x: number, y: number, animated?: boolean): void;
  scrollToEnd(animated?: boolean): void;
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
  scrollToFocusedInput(
    reactNode: any,
    extraHeight?: number,
    keyboardOpeningTime?: number
  ): void;
  scrollIntoView(
    element: React.ReactElement,
    options?: ScrollIntoViewOptions
  ): Promise<void>;
  update(): void;
}

FlatList Component

Keyboard Aware SectionList

A SectionList component enhanced with keyboard awareness for sectioned lists with input fields.

export class KeyboardAwareSectionList<ItemT = any> extends React.Component<
  KeyboardAwareSectionListProps<ItemT>,
  KeyboardAwareState
> {
  getScrollResponder(): any;
  scrollToPosition(x: number, y: number, animated?: boolean): void;
  scrollToEnd(animated?: boolean): void;
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
  scrollToFocusedInput(
    reactNode: any,
    extraHeight?: number,
    keyboardOpeningTime?: number
  ): void;
  scrollIntoView(
    element: React.ReactElement,
    options?: ScrollIntoViewOptions
  ): Promise<void>;
  update(): void;
}

SectionList Component

Higher-Order Component

A reusable HOC that can enhance any scrollable React Native component with keyboard awareness.

function listenToKeyboardEvents<P>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentType<P & KeyboardAwareProps>;

function listenToKeyboardEvents<P>(
  options: KeyboardAwareHOCOptions
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P & KeyboardAwareProps>;

Higher-Order Component

Shared Types

interface KeyboardAwareProps {
  /** Catches the reference of the component */
  innerRef?: (ref: any) => void;
  /** Adds an extra offset that represents the TabBarIOS height */
  viewIsInsideTabBar?: boolean;
  /** Coordinates that will be used to reset the scroll when the keyboard hides */
  resetScrollToCoords?: { x: number; y: number };
  /** Lets the user enable or disable automatic resetScrollToCoords */
  enableResetScrollToCoords?: boolean;
  /** When focus in TextInput will scroll the position */
  enableAutomaticScroll?: boolean;
  /** Enables keyboard aware settings for Android */
  enableOnAndroid?: boolean;
  /** Adds an extra offset when focusing the TextInputs */
  extraHeight?: number;
  /** Adds an extra offset to the keyboard */
  extraScrollHeight?: number;
  /** Sets the delay time before scrolling to new position */
  keyboardOpeningTime?: number;
  /** Callback when the keyboard will show */
  onKeyboardWillShow?: (frames: Object) => void;
  /** Callback when the keyboard did show */
  onKeyboardDidShow?: (frames: Object) => void;
  /** Callback when the keyboard will hide */
  onKeyboardWillHide?: (frames: Object) => void;
  /** Callback when the keyboard did hide */
  onKeyboardDidHide?: (frames: Object) => void;
  /** Callback when the keyboard frame will change */
  onKeyboardWillChangeFrame?: (frames: Object) => void;
  /** Callback when the keyboard frame did change */
  onKeyboardDidChangeFrame?: (frames: Object) => void;
}

interface KeyboardAwareState {
  keyboardSpace: number;
}

interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {}

interface KeyboardAwareFlatListProps<ItemT> extends KeyboardAwareProps, FlatListProps<ItemT> {}

interface KeyboardAwareSectionListProps<ItemT> extends KeyboardAwareProps, SectionListProps<ItemT> {}

interface ScrollIntoViewOptions {
  getScrollPosition?: (
    parentLayout: ElementLayout,
    childLayout: ElementLayout,
    contentOffset: ContentOffset
  ) => ScrollPosition;
}

interface ElementLayout {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface ContentOffset {
  x: number;
  y: number;
}

interface ScrollPosition {
  x: number;
  y: number;
  animated: boolean;
}

interface KeyboardAwareHOCOptions {
  enableOnAndroid?: boolean;
  contentContainerStyle?: any;
  enableAutomaticScroll?: boolean;
  extraHeight?: number;
  extraScrollHeight?: number;
  enableResetScrollToCoords?: boolean;
  keyboardOpeningTime?: number;
  viewIsInsideTabBar?: boolean;
  refPropName?: string;
  extractNativeRef?: (ref: any) => any;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-keyboard-aware-scroll-view@0.9.x
Publish Source
CLI
Badge
tessl/npm-react-native-keyboard-aware-scroll-view badge