0
# KeyboardAwareScrollView Component
1

2
The KeyboardAwareScrollView is a ScrollView component that automatically handles keyboard appearance by scrolling to keep focused TextInput fields visible. It extends React Native's ScrollView with additional keyboard awareness capabilities.
3

4
## Capabilities
5

6
### Component Class
7

8
A ScrollView component enhanced with keyboard awareness functionality.
9

10
```typescript { .api }
11
/**
12
 * A ScrollView component that automatically scrolls to keep focused TextInput fields visible
13
 * when the keyboard appears. Extends ScrollView with keyboard-aware behavior.
14
 */
15
export class KeyboardAwareScrollView extends React.Component<
16
  KeyboardAwareScrollViewProps,
17
  KeyboardAwareState
18
> {
19
  getScrollResponder(): any;
20
  scrollToPosition(x: number, y: number, animated?: boolean): void;
21
  scrollToEnd(animated?: boolean): void;
22
  scrollForExtraHeightOnAndroid(extraHeight: number): void;
23
  scrollToFocusedInput(
24
    reactNode: any,
25
    extraHeight?: number,
26
    keyboardOpeningTime?: number
27
  ): void;
28
  scrollIntoView(
29
    element: React.ReactElement,
30
    options?: ScrollIntoViewOptions
31
  ): Promise<void>;
32
  update(): void;
33
}
34

35
interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {}
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import React from 'react';
42
import { View, TextInput, StyleSheet } from 'react-native';
43
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
44

45
// Basic usage
46
export function BasicForm() {
47
  return (
48
    <KeyboardAwareScrollView style={styles.container}>
49
      <View style={styles.form}>
50
        <TextInput placeholder="First Name" style={styles.input} />
51
        <TextInput placeholder="Last Name" style={styles.input} />
52
        <TextInput placeholder="Email" style={styles.input} />
53
        <TextInput placeholder="Phone" style={styles.input} />
54
      </View>
55
    </KeyboardAwareScrollView>
56
  );
57
}
58

59
// Advanced configuration
60
export function AdvancedForm() {
61
  return (
62
    <KeyboardAwareScrollView
63
      style={styles.container}
64
      enableOnAndroid={true}
65
      enableAutomaticScroll={true}
66
      extraHeight={100}
67
      extraScrollHeight={50}
68
      keyboardOpeningTime={250}
69
      resetScrollToCoords={{ x: 0, y: 0 }}
70
      enableResetScrollToCoords={true}
71
      viewIsInsideTabBar={false}
72
      onKeyboardWillShow={(frames) => console.log('Keyboard will show', frames)}
73
      onKeyboardWillHide={(frames) => console.log('Keyboard will hide', frames)}
74
    >
75
      <View style={styles.form}>
76
        <TextInput placeholder="Username" style={styles.input} />
77
        <TextInput placeholder="Password" secureTextEntry style={styles.input} />
78
        <TextInput 
79
          placeholder="Comments" 
80
          multiline 
81
          numberOfLines={4} 
82
          style={[styles.input, styles.multiline]} 
83
        />
84
      </View>
85
    </KeyboardAwareScrollView>
86
  );
87
}
88

89
const styles = StyleSheet.create({
90
  container: { flex: 1 },
91
  form: { padding: 20 },
92
  input: { 
93
    borderWidth: 1, 
94
    borderColor: '#ccc', 
95
    padding: 10, 
96
    marginBottom: 15,
97
    borderRadius: 5 
98
  },
99
  multiline: { height: 100 }
100
});
101
```
102

103
### Get Scroll Responder
104

105
Gets the underlying ScrollView's scroll responder for advanced scroll operations.
106

107
```typescript { .api }
108
/**
109
 * Get the underlying ScrollView's scroll responder
110
 * @returns The scroll responder instance
111
 */
112
getScrollResponder(): any;
113
```
114

115
### Scroll to Position
116

117
Programmatically scrolls to a specific position in the ScrollView.
118

119
```typescript { .api }
120
/**
121
 * Scroll to specific position with or without animation
122
 * @param x - The x coordinate to scroll to
123
 * @param y - The y coordinate to scroll to
124
 * @param animated - Whether to animate the scroll (default: true)
125
 */
126
scrollToPosition(x: number, y: number, animated?: boolean): void;
127
```
128

129
**Usage Example:**
130

131
```typescript
132
import React, { useRef } from 'react';
133
import { Button } from 'react-native';
134
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
135

136
export function ScrollableForm() {
137
  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
138

139
  const scrollToTop = () => {
140
    scrollViewRef.current?.scrollToPosition(0, 0, true);
141
  };
142

143
  const scrollToBottom = () => {
144
    scrollViewRef.current?.scrollToPosition(0, 1000, true);
145
  };
146

147
  return (
148
    <>
149
      <KeyboardAwareScrollView ref={scrollViewRef}>
150
        {/* Form content */}
151
      </KeyboardAwareScrollView>
152
      <Button title="Scroll to Top" onPress={scrollToTop} />
153
      <Button title="Scroll to Bottom" onPress={scrollToBottom} />
154
    </>
155
  );
156
}
157
```
158

159
### Scroll to End
160

161
Scrolls to the end of the ScrollView content.
162

163
```typescript { .api }
164
/**
165
 * Scroll to end with or without animation
166
 * @param animated - Whether to animate the scroll (default: true)
167
 */
168
scrollToEnd(animated?: boolean): void;
169
```
170

171
### Android Extra Height Scroll
172

173
Android-specific method for scrolling with additional height offset.
174

175
```typescript { .api }
176
/**
177
 * Android-specific scroll method with extra height offset (Android only)
178
 * @param extraHeight - Additional height to add to the scroll offset
179
 */
180
scrollForExtraHeightOnAndroid(extraHeight: number): void;
181
```
182

183
### Scroll to Focused Input
184

185
Scrolls to a specific focused TextInput field.
186

187
```typescript { .api }
188
/**
189
 * Scroll to a specific focused input field
190
 * @param reactNode - The React node handle of the input to scroll to
191
 * @param extraHeight - Additional height offset (optional)
192
 * @param keyboardOpeningTime - Custom keyboard opening delay (optional)
193
 */
194
scrollToFocusedInput(
195
  reactNode: any,
196
  extraHeight?: number,
197
  keyboardOpeningTime?: number
198
): void;
199
```
200

201
**Usage Example:**
202

203
```typescript
204
import React, { useRef } from 'react';
205
import { TextInput, findNodeHandle } from 'react-native';
206
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
207

208
export function ManualScrollForm() {
209
  const scrollViewRef = useRef<KeyboardAwareScrollView>(null);
210
  const textInputRef = useRef<TextInput>(null);
211

212
  const handleFocus = () => {
213
    const node = findNodeHandle(textInputRef.current);
214
    if (node && scrollViewRef.current) {
215
      scrollViewRef.current.scrollToFocusedInput(node, 100, 250);
216
    }
217
  };
218

219
  return (
220
    <KeyboardAwareScrollView ref={scrollViewRef}>
221
      <TextInput
222
        ref={textInputRef}
223
        placeholder="Focus me"
224
        onFocus={handleFocus}
225
      />
226
    </KeyboardAwareScrollView>
227
  );
228
}
229
```
230

231
### Scroll Into View
232

233
Scrolls a React element into view with customizable positioning.
234

235
```typescript { .api }
236
/**
237
 * Scrolls an element into view with customizable positioning
238
 * @param element - The React element to scroll into view
239
 * @param options - Configuration options for scroll positioning
240
 * @returns Promise that resolves when scrolling is complete
241
 */
242
scrollIntoView(
243
  element: React.ReactElement,
244
  options?: ScrollIntoViewOptions
245
): Promise<void>;
246

247
interface ScrollIntoViewOptions {
248
  getScrollPosition?: (
249
    parentLayout: ElementLayout,
250
    childLayout: ElementLayout,
251
    contentOffset: ContentOffset
252
  ) => ScrollPosition;
253
}
254
```
255

256
### Update
257

258
Manually triggers scrolling to the currently focused input field.
259

260
```typescript { .api }
261
/**
262
 * Manually trigger scroll to currently focused input
263
 * Useful for updating scroll position after layout changes
264
 */
265
update(): void;
266
```
267

268
## Props
269

270
The KeyboardAwareScrollView accepts all standard ScrollView props plus the KeyboardAwareProps interface:
271

272
```typescript { .api }
273
interface KeyboardAwareScrollViewProps extends KeyboardAwareProps, ScrollViewProps {
274
  // Inherits all ScrollView props (style, contentContainerStyle, etc.)
275
  // Plus all KeyboardAwareProps (see main documentation)
276
}
277
```
278

279
## Platform Support
280

281
- **iOS**: Full support for all features
282
- **Android**: Requires `enableOnAndroid={true}` and `windowSoftInputMode="adjustPan"` in AndroidManifest.xml for full functionality