Closed
Description
Description
When using <KeyboardAwareScrollView>
from react-native-ui-lib on Android (Expo SDK 52, React Native 0.76.6, RNUILib 7.20.3), the keyboard-aware behavior does not work: the view does not scroll to keep inputs visible, and inputs at the bottom remain hidden behind the keyboard.
Related to
- Components
- Demo
- Docs
- Typings
Steps to reproduce
-
Create a new Expo project (SDK 52).
-
Install
[email protected]
and its peer dependencies (react-native-gesture-handler
,react-native-reanimated
,react-native-safe-area-context
). -
In App.js, import and render:
import 'react-native-gesture-handler';
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { View, TextField, Incubator } from 'react-native-ui-lib';
const { KeyboardAwareScrollView } = Incubator;
export default function App() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<KeyboardAwareScrollView contentContainerStyle={{ flexGrow: 1, padding: 20 }}>
<View flex>
<TextField
onChangeText={handleChange('addressLine1')}
value={values.addressLine1}
/>
<TextField
onChangeText={handleChange('addressLine2')}
value={values.addressLine2}
/>
<TextField
onChangeText={handleChange('addressLine3')}
value={values.addressLine3}
/>
<TextField
onChangeText={handleChange('addressLine4')}
value={values.addressLine4}
/>
<TextField
onChangeText={handleChange('addressLine5')}
value={values.addressLine5}
/>
<TextField
onChangeText={handleChange('addressLine6')}
value={values.addressLine6}
/>
</View>
</KeyboardAwareScrollView>
</GestureHandlerRootView>
);
}
Screenshots/Video
IMG_3201.MOV
Environment
Expo SDK: 52.0.24
React Native: 0.76.6
react-native-ui-lib: 7.20.3
react-native-gesture-handler: 2.x
react-native-reanimated: 3.x
react-native-safe-area-context: 4.x
Affected platforms
Android