KeyboardAvoidingView not working properly with flatList and textInput

[SagarAhir]

Description

I have used flatList's footerComponent to render textInput. and I wanted automatic scroll feature on textInput focus so I used KeyboardAvoidingView. but Keyboard automatically closing in android in this scenario. this issue is specific to android, on ios its working as expected

React Native Version

0.70.5

Output of npx react-native info

warn Package @sentry/react-native contains invalid configuration: "dependency.platforms.ios.sharedLibraries" is not allowed,"dependency.hooks" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this. info Fetching system and libraries information... System: OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz Memory: 1.43 GB / 15.52 GB Shell: 5.1.16 - /bin/bash Binaries: Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm Watchman: Not Found SDKs: Android SDK: Not Found IDEs: Android Studio: Not Found Languages: Java: 11.0.18 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.70.5 => 0.70.5 npmGlobalPackages: react-native: Not Found

Steps to reproduce

I have given the expo link which has running code. when I change something from styles then it again working fine.

Snack, code example, screenshot, or link to a repository

expo link: https://snack.expo.dev/@sagarahir/flatlist-simple

code: import React from 'react'; import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, FlatList, } from 'react-native';

const DATA = [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'First Item', }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'Second Item', }, { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'Third Item', }, ];

type ItemProps = { title: string };

const Item = ({ title }: ItemProps) => ( <View style={styles.item}> <Text style={styles.title}>{title}</Text> </View> );

const KeyboardAvoidingComponent = () => { return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}> <FlatList data={DATA} renderItem={({ item }) => <Item title={item.title} />} keyExtractor={(item) => item.id} ListFooterComponent={() => ( <TextInput placeholder="Username" style={styles.textInput} /> )} /> </KeyboardAvoidingView> ); };

const styles = StyleSheet.create({ container: { flex: 1, }, textInput: { height: 41, borderColor: '#000000', borderBottomWidth: 1, marginBottom: 36, marginTop: 350, }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, });

export default KeyboardAvoidingComponent;

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[SvenJonsson]

@SagarAhir Facing this (on RN 0.72.6)! Found a solution?

[Synce]

Same problem. Facing this bug on 0.72.6 with FlatList and FlashList.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.