Mobile | Tue May 09 202311,950 views
Tutorial Keyboard Avoiding View
Hello friend!
In this video we learn how to use KeyboardAvoidingView
with React Native
Example
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Text style={styles.title}>Chat GPT</Text>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : undefined}
keyboardVerticalOffset={60}
>
<FlatList
data={conversation}
renderItem={({ item }) => <MessageBubble {...item} />}
keyExtractor={(_, index) => index.toString()}
contentContainerStyle={{ paddingHorizontal: 10, gap: 10 }}
/>
<Input />
</KeyboardAvoidingView>
</View>
</SafeAreaView>
Links
Go back to Projects