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>

👍 Want to become a master in React Native? Check the React Native Course

Youtube GitHubDownload as Zip

Go back to Projects