0
# React Native Keyboard Aware ScrollView
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-native-keyboard-aware-scroll-view
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install react-native-keyboard-aware-scroll-view`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  KeyboardAwareScrollView,
16
  KeyboardAwareFlatList,
17
  KeyboardAwareSectionList,
18
  listenToKeyboardEvents
19
} from "react-native-keyboard-aware-scroll-view";
20
```
21

22
For CommonJS:
23

24
```javascript
25
const { 
26
  KeyboardAwareScrollView,
27
  KeyboardAwareFlatList,
28
  KeyboardAwareSectionList,
29
  listenToKeyboardEvents
30
} = require("react-native-keyboard-aware-scroll-view");
31
```
32

33
## Basic Usage
34

35
```typescript
36
import React from 'react';
37
import { View, TextInput } from 'react-native';
38
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
39

40
export default function MyForm() {
41
  return (
42
    <KeyboardAwareScrollView
43
      style={{ flex: 1 }}
44
      enableOnAndroid={true}
45
      extraHeight={75}
46
      keyboardOpeningTime={250}
47
      resetScrollToCoords={{ x: 0, y: 0 }}
48
      enableResetScrollToCoords={true}
49
    >
50
      <View style={{ padding: 20 }}>
51
        <TextInput placeholder="Name" />
52
        <TextInput placeholder="Email" />
53
        <TextInput 
54
          placeholder="Message" 
55
          multiline 
56
          numberOfLines={4} 
57
        />
58
      </View>
59
    </KeyboardAwareScrollView>
60
  );
61
}
62
```
63

64
## Architecture
65

66
The library is built around several key components:
67

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

74
## Capabilities
75

76
### Keyboard Aware ScrollView
77

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

80
```typescript { .api }
81
export class KeyboardAwareScrollView extends React.Component<
82
  KeyboardAwareScrollViewProps,
83
  KeyboardAwareState
84
> {
85
  getScrollResponder(): any;
86
  scrollToPosition(x: number, y: number, animated?: boolean): void;
87
  scrollToEnd(animated?: boolean): void;
88
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
89
  scrollToFocusedInput(
90
    reactNode: any,
91
    extraHeight?: number,
92
    keyboardOpeningTime?: number
93
  ): void;
94
  scrollIntoView(
95
    element: React.ReactElement,
96
    options?: ScrollIntoViewOptions
97
  ): Promise<void>;
98
  update(): void;
99
}
100
```
101

102
[ScrollView Component](./scrollview-component.md)
103

104
### Keyboard Aware FlatList
105

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

108
```typescript { .api }
109
export class KeyboardAwareFlatList<ItemT = any> extends React.Component<
110
  KeyboardAwareFlatListProps<ItemT>,
111
  KeyboardAwareState
112
> {
113
  getScrollResponder(): any;
114
  scrollToPosition(x: number, y: number, animated?: boolean): void;
115
  scrollToEnd(animated?: boolean): void;
116
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
117
  scrollToFocusedInput(
118
    reactNode: any,
119
    extraHeight?: number,
120
    keyboardOpeningTime?: number
121
  ): void;
122
  scrollIntoView(
123
    element: React.ReactElement,
124
    options?: ScrollIntoViewOptions
125
  ): Promise<void>;
126
  update(): void;
127
}
128
```
129

130
[FlatList Component](./flatlist-component.md)
131

132
### Keyboard Aware SectionList
133

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

136
```typescript { .api }
137
export class KeyboardAwareSectionList<ItemT = any> extends React.Component<
138
  KeyboardAwareSectionListProps<ItemT>,
139
  KeyboardAwareState
140
> {
141
  getScrollResponder(): any;
142
  scrollToPosition(x: number, y: number, animated?: boolean): void;
143
  scrollToEnd(animated?: boolean): void;
144
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
145
  scrollToFocusedInput(
146
    reactNode: any,
147
    extraHeight?: number,
148
    keyboardOpeningTime?: number
149
  ): void;
150
  scrollIntoView(
151
    element: React.ReactElement,
152
    options?: ScrollIntoViewOptions
153
  ): Promise<void>;
154
  update(): void;
155
}
156
```
157

158
[SectionList Component](./sectionlist-component.md)
159

160
### Higher-Order Component
161

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

164
```typescript { .api }
165
function listenToKeyboardEvents<P>(
166
  WrappedComponent: React.ComponentType<P>
167
): React.ComponentType<P & KeyboardAwareProps>;
168

169
function listenToKeyboardEvents<P>(
170
  options: KeyboardAwareHOCOptions
171
): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P & KeyboardAwareProps>;
172
```
173

174
[Higher-Order Component](./hoc-component.md)
175

176
## Shared Types
177

178
```typescript { .api }
179
interface KeyboardAwareProps {
180
  /** Catches the reference of the component */
181
  innerRef?: (ref: any) => void;
182
  /** Adds an extra offset that represents the TabBarIOS height */
183
  viewIsInsideTabBar?: boolean;
184
  /** Coordinates that will be used to reset the scroll when the keyboard hides */
185
  resetScrollToCoords?: { x: number; y: number };
186
  /** Lets the user enable or disable automatic resetScrollToCoords */
187
  enableResetScrollToCoords?: boolean;
188
  /** When focus in TextInput will scroll the position */
189
  enableAutomaticScroll?: boolean;
190
  /** Enables keyboard aware settings for Android */
191
  enableOnAndroid?: boolean;
192
  /** Adds an extra offset when focusing the TextInputs */
193
  extraHeight?: number;
194
  /** Adds an extra offset to the keyboard */
195
  extraScrollHeight?: number;
196
  /** Sets the delay time before scrolling to new position */
197
  keyboardOpeningTime?: number;
198
  /** Callback when the keyboard will show */
199
  onKeyboardWillShow?: (frames: Object) => void;
200
  /** Callback when the keyboard did show */
201
  onKeyboardDidShow?: (frames: Object) => void;
202
  /** Callback when the keyboard will hide */
203
  onKeyboardWillHide?: (frames: Object) => void;
204
  /** Callback when the keyboard did hide */
205
  onKeyboardDidHide?: (frames: Object) => void;
206
  /** Callback when the keyboard frame will change */
207
  onKeyboardWillChangeFrame?: (frames: Object) => void;
208
  /** Callback when the keyboard frame did change */
209
  onKeyboardDidChangeFrame?: (frames: Object) => void;
210
}
211

212
interface KeyboardAwareState {
213
  keyboardSpace: number;
214
}
215

216
interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {}
217

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

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

222
interface ScrollIntoViewOptions {
223
  getScrollPosition?: (
224
    parentLayout: ElementLayout,
225
    childLayout: ElementLayout,
226
    contentOffset: ContentOffset
227
  ) => ScrollPosition;
228
}
229

230
interface ElementLayout {
231
  x: number;
232
  y: number;
233
  width: number;
234
  height: number;
235
}
236

237
interface ContentOffset {
238
  x: number;
239
  y: number;
240
}
241

242
interface ScrollPosition {
243
  x: number;
244
  y: number;
245
  animated: boolean;
246
}
247

248
interface KeyboardAwareHOCOptions {
249
  enableOnAndroid?: boolean;
250
  contentContainerStyle?: any;
251
  enableAutomaticScroll?: boolean;
252
  extraHeight?: number;
253
  extraScrollHeight?: number;
254
  enableResetScrollToCoords?: boolean;
255
  keyboardOpeningTime?: number;
256
  viewIsInsideTabBar?: boolean;
257
  refPropName?: string;
258
  extractNativeRef?: (ref: any) => any;
259
}
260
```