Closed elenydev closed 3 months ago
@elenydev FlatList
under hood renders its own ScrollView
. So your layout will contain two ScrollView
s:
<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?
@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 :(
@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? 👀
https://snack.expo.dev/@eleny/keyboardavoidingview - You can take straight from here - also You can try to play with renderScrollComponent
@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:
Let me know if I can close this issue 👀
@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
@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?
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 :)
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 😊
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