KeyboardAwareScrollView not work in TextInput nested in FlatList component

[elenydev]

Describe the bug
Hey, i'm facing issue with KeyboardAwareScrollView - When im trying to use it above the level of FlatList` it does not work.

Is there any specific way that i should handle it?
Of course, in the renderItem of flat list i does not have only the TextInput, but whole component with textInput in it

[kirillzyusko]

@elenydev FlatList under hood renders its own ScrollView. So your layout will contain two ScrollViews:

<ScrollView> // <- KeyboardAwareScrollView
  <ScrollView> // <- FlatList

And ScrollView rendered by FlatList is simple ScrollView which doesn't have avoiding behavior. In your case you can try to render KeyboardAwareScrollView inside FlatList:

<FlatList
  renderScrollComponent={KeyboardAwareScrollView}
/>

Can you try this and see if it fixes your problem?

[elenydev]

@kirillzyusko thanks for fast reply!

Actually, passing the KeyboardAwareScrollView like You've showed result in

This way it renders the list, but unfortunately it's not solving the issue :(

[kirillzyusko]

@elenydev can you post the code sample here, so that I can run it in my example app and see what exactly is not working? 👀

[elenydev]

https://snack.expo.dev/@eleny/keyboardavoidingview - You can take straight from here - also You can try to play with renderScrollComponent

@kirillzyusko

[kirillzyusko]

@elenydev here is a slightly modified version of your code:

import React from "react";
import { FlatList, TextInput, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

const foo = [...Array(100).keys()];

const KeyboardAvoidingComponent = () => {
  return (
    <View style={{ flex: 1, background: "black" }}>
      <FlatList
        data={foo}
        renderItem={() => (
          <View style={{ width: "100%", height: 50 }}>
            <TextInput
              placeholder="Some input"
              style={{
                color: "blue",
                margin: 20,
                borderColor: "red",
                height: 30,
                borderWidth: 1,
              }}
            />
          </View>
        )}
        renderScrollComponent={(props) => (
          <KeyboardAwareScrollView bottomOffset={10} {...props} />
        )}
      />
    </View>
  );
};

export default KeyboardAvoidingComponent;

KeyboardProvider and other app providers are located in App.tsx so I didn't put them here, but you can find them in example app.

Works like a charm:

flat-list-demo.mp4

Let me know if I can close this issue 👀

[elenydev]

@kirillzyusko Yeah, this way it works, but take a closer look on my example :) you're missing KeyboardAwareScrollView above flat list - and also the input

[kirillzyusko]

@elenydev Ah, you did it with purpose 😅 I thought it was just demonstration of when it works and when not 😅

I think having two nested scroll-views is incorrect layout, because most likely it will break a virtualization of a FlatList (you should receive a warning) -> FlatList will not be able to detect its own size (it'll actually find it, but since it'll be nested in a ScrollView - it will have infinite height so it'll try to render all elements).

In your case If you want to have a blue input on top and all other red inputs in FlatList then you can utilize ListHeaderComponent property and render there blue input, while rendering red inputs in renderItem. In this case you'll have a single ScrollView and will have a blue input.

Does it make sense what I'm saying?

[elenydev]

Works like charm :) Great advice, really appreciate that! I'm learning native version of React, all of those tips are very handful.

Thanks @kirillzyusko , we can close the issue :)

[kirillzyusko]

Nice @elenydev Good luck with learning 😊

If you have any other questions - don't hesitate to open new issues, I'll be happy to answer all questions 😊