https://github.com/alkafinance/react-native-keyboard-avoiding-scroll-view

⚛️ React Native ScrollView extension that prevents inputs from being covered by the keyboard
https://github.com/alkafinance/react-native-keyboard-avoiding-scroll-view

keyboard react-native react-native-component

Last synced: 3 months ago
JSON representation

⚛️ React Native ScrollView extension that prevents inputs from being covered by the keyboard

• Host: GitHub
• URL: https://github.com/alkafinance/react-native-keyboard-avoiding-scroll-view
• Owner: alkafinance
• License: mit
• Created: 2019-07-28T10:37:43.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-13T12:50:19.000Z (over 2 years ago)
• Last Synced: 2025-04-13T15:13:29.314Z (3 months ago)
• Topics: keyboard, react-native, react-native-component
• Language: TypeScript
• Homepage:
• Size: 2.9 MB
• Stars: 39
• Watchers: 3
• Forks: 31
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-keyboard-avoiding-scroll-view

[![npm version](https://img.shields.io/npm/v/react-native-keyboard-avoiding-scroll-view.svg)](https://www.npmjs.org/package/react-native-keyboard-avoiding-scroll-view)

[![CircleCI Status](https://img.shields.io/circleci/project/github/alkafinance/react-native-keyboard-avoiding-scroll-view/master.svg)](https://circleci.com/gh/alkafinance/workflows/react-native-keyboard-avoiding-scroll-view/tree/master)

![license: MIT](https://img.shields.io/npm/l/react-native-keyboard-avoiding-scroll-view.svg)

![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

React Native ScrollView extension that prevents inputs from being covered by the keyboard.



## Getting started

`$ npm install react-native-keyboard-avoiding-scroll-view --save`

## Usage

Import `KeyboardAvoidingScrollView`, `KeyboardAvoidingFlatList`, or `KeyboardAvoidingSectionList` and use them like the regular `ScrollView`, `FlatList` or `SectionList` components from React Native core. Internally, these components are wrapped in another custom component called `KeyboardAvoidingContainer`, which is also exported for advanced use cases.

```javascript

import {KeyboardAvoidingScrollView} from 'react-native-keyboard-avoiding-scroll-view';

function MyComponent() {

  return (

    }>

      

      

      

    

  )

}

```

## Props

- [Inherited `ScrollView` props...](https://facebook.github.io/react-native/docs/scrollview.html#props)

  - or [inherited `FlatList` props...](https://facebook.github.io/react-native/docs/flatlist#props)

  - or [inherited `SectionList` props...](https://facebook.github.io/react-native/docs/sectionlist#props)

- [`stickyFooter`](#stickyFooter)

- [`containerStyle`](#containerStyle)

---

# Reference

## Props

### `stickyFooter`

Used to display a fixed view under the scrollable content. Sticky footer is always shown above the keyboard, which could, for example, be the desired behaviour for a submit button.

| Type              | Required |

| ----------------- | -------- |

| `React.ReactNode` | No       |

---

### `containerStyle`

Used to style the container component.

| Type                   | Required |

| ---------------------- | -------- |

| `StyleProp` | No       |

## License

[MIT License](./LICENSE) © Alka, Inc