Skip to content

KeyboardAwareScrollView not working on Android #3729

Closed
@EvgenMart

Description

@EvgenMart

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

  1. Create a new Expo project (SDK 52).

  2. Install [email protected] and its peer dependencies (react-native-gesture-handler, react-native-reanimated, react-native-safe-area-context).

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    buga bug in one of the components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions