KeyboardAvoidingView with FlatList performance issue

[andreibahachenka]

Describe the bug
Hey guys, I have a very basic setup from the examples in the repository, I've attached the video with the performance
Performance is not smooth while using KeyboardAvoidingView with FlatList

Would appreciate If anybody can help with fixing it

Code snippet

const reversedMessages = new Array(100).fill(0)

const RenderItem = ({ item, index }: any) => {
		return (
			<View key={index}>
				<Text>{index}</Text>
			</View>
		)
	}

	return (
		<View style={styles.screenContainer}>
			<KeyboardAvoidingView
				behavior="padding"
				keyboardVerticalOffset={headerHeight}
				style={styles.container}
			>
				<FlatList
					inverted
					contentContainerStyle={styles.contentContainer}
					data={reversedMessages}
					initialNumToRender={15}
					renderItem={RenderItem}
				/>
				<Input />
			</KeyboardAvoidingView>
		</View>
	)
}

const styles = StyleSheet.create() => ({
	screenContainer: {
		backgroundColor: 'white,
		flex: 1,
	},
	container: {
		flex: 1,
	},
	contentContainer: {
		justifyContent: 'flex-start',
		flexGrow: 1,
	},
}))

To Reproduce
Steps to reproduce the behavior:

just copy the code and look at the performance

Expected behavior
Smooth animation for FlatList

Screenshots

Screen.Recording.2025-03-20.at.2.24.03.PM.mov

Smartphone (please complete the following information):
I use Expo SDK 52

• Desktop OS: MacOS 15.3.1
• Device: Simulator iPhone 16 Pro
• OS: 18.0
• RN version: 0.76.6
• RN architecture: fabric
• JS engine: Hermes
• Library version: ^1.16.7

Additional context
Add any other context about the problem here.

[kirillzyusko]

@andreibahachenka have you tried to use translate-with-padding mode?

[andreibahachenka]

@kirillzyusko yes I have, and I found two issues there

1. it doesn't animate the content when the keyboard opens (after sometimes it does)
2. if you have some "sticky header view" the content from the FlatList is shown in the header when the keyboard opens
   I'm attaching the video

Screen.Recording.2025-03-20.at.2.50.21.PM.mov

[andreibahachenka]

the structure with the header looks like:

and if I put View (headerContainer) inside the KeyboardAvoidingView then the whole header will be dissappeared while the keyboard opens

<View style={styles.screenContainer}>
                          <View style={styles.headerContainer}>
				<Text>Header</Text>
			</View>
			<KeyboardAvoidingView
				behavior="translate-with-padding"
				keyboardVerticalOffset={headerHeight}
				style={styles.container}
			>
				<FlatList
					inverted
					contentContainerStyle={styles.contentContainer}
					data={reversedMessages}
					initialNumToRender={15}
					renderItem={RenderItem}
				/>
				<Input />
			</KeyboardAvoidingView>
		</View>

[kirillzyusko]

@andreibahachenka do you use multiline input? On RN 0.78 I don't see such problem, animation always works on keyboard appearance 🤷‍♂

Regarding header - can you try to specify zIndex so that it always shown on top of the list? I think it should fix the problem 🤞

But regarding initial problem described in the issue - yes, unfortunately that problem exist. On paper arch it was less noticeable, on fabric it's more visible. I opened issue in reanimated repository: software-mansion/react-native-reanimated#6854

Current workaround is to specify invertStickyHeaders={false} (it should reduce amount of state updates/layout re-calculations), but in my case it didn't improve performance significantly 😔

This is why I added translate-with-padding mode, but it has its own limitations...

P. S. regarding the missing first frame - you can try to patch the lib:

react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts

Lines 91 to 93 in e1a4cc4

	if (OS === "android") {
	translate.value = e.progress;
	}

Remove if-statement here, i. e. leave only translate.value = e.progress;

react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts

Lines 84 to 86 in e1a4cc4

	if (OS === "ios") {
	translate.value = e.progress;
	}

Remove if-block completely (i. e. together with translate.value = e.progress;).

And it should give you more performant animations (basically you will opt-out of default CoreAnimations and will animate each frame on your own). In simulator animation can be slightly desynchronized, but on real device it should have frame-in-frame animation.

[andreibahachenka]

thanks, @kirillzyusko
unfortunately it didn't help
tried setting zIndex: 9999 for headerContainer and no change, FlatList content still shows when the keyboard opens (by the way, it happens only with behavior="translate-with-padding")

about the first frame:
when I make changes in the library [react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts] the first frame(animation) appears, but performance becomes exactly the same as with behavior="padding" (so the performance isn't the best one)

invertStickyHeaders={false} - I didn't notice any changes

[kirillzyusko]

tried setting zIndex: 9999 for headerContainer and no change, FlatList content still shows when the keyboard opens (by the way, it happens only with behavior="translate-with-padding")

Okay, that problem is not reproducible in example app. It can be due to the fact, that I use header from react-navigation. You can check how that header is created (in react-navigation code) and replicate it in your code. I'm using plain stack navigator and I don't think that type of navigator uses native primitives for header (though I may be mistaken).

when I make changes in the library [react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts] the first frame(animation) appears, but performance becomes exactly the same as with behavior="padding" (so the performance isn't the best one)

Okay, this is indeed strange. I have to check out your code and modify example to confirm that 🙂

[kirillzyusko]

tried setting zIndex: 9999 for headerContainer and no change, FlatList content still shows when the keyboard opens (by the way, it happens only with behavior="translate-with-padding")

@andreibahachenka I dig deeper in the codebase. You need to specify overflow: 'hidden' for your container that surround ScrollView. Try to wrap KeyboardAvoidingView with additional View and set overflow: 'hidden' there. It should fix the problem 🤞

when I make changes in the library [react-native-keyboard-controller/src/components/KeyboardAvoidingView/hooks.ts] the first frame(animation) appears, but performance becomes exactly the same as with behavior="padding" (so the performance isn't the best one)

Can you attach a video? Do you use simulator or real device? Can you try to capture a video on a real device? Can you also paste here a modified code so that we both sure that we are on the same page?

[andreibahachenka]

@kirillzyusko thank you
I had to step away from this and changed the approach, but will come back later, but from what I can say overflow hidden didn't do the trick for me

in order no to duplicate, below the issue I faced
jpudysz/react-native-unistyles#729

it seems that react-native-keyboard-controller might conflict with those packages as well

the issue that is directly related to react-native-keyboard-controller package:
when I click on textinput inside bottomsheet in its top position it flicks. But the interesting thing is that when I remove KeyboardProvider from my root file, flick disappears

Screen.Recording.2025-04-17.at.12.01.27.AM.mp4

[kirillzyusko]

from what I can say overflow hidden didn't do the trick for me

Here is an example when it works fine 🙂

react-native-keyboard-controller/example/src/screens/Examples/ReanimatedChatFlatList/index.tsx

Lines 32 to 35 in 82f76e4

	<SafeAreaView style={{ flex: 1, backgroundColor: "#3A3A3C", overflow: "hidden" }} edges={["top"]}>
	<View style={{flex: 1, overflow: "hidden"}}>
	<KeyboardAvoidingView
	behavior="translate-with-padding"

in order no to duplicate, below the issue I faced

It seems like it is a problem of unistyles + bottom-sheet?

the issue that is directly related to react-native-keyboard-controller package:
when I click on textinput inside bottomsheet in its top position it flicks. But the interesting thing is that when I remove KeyboardProvider from my root file, flick disappears

So only adding KeyboardProvider makes that bug to appear? 🤔 In #923 are you describing the same issue?

[andreibahachenka]

I’m not sure if #923 is the same or not, but at least you can check it since it has repository to reproduce