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
```