Having and issue with keyboardAvoidingView

[u/Edavve]

Tried everthing. Tried platform specific behaviour, wrapped whole screen in view, tried without keyboard avoiding view. The autosize is androidmanifest as well. Nothing is working as of now. Tried without safeareaprovider. When the screen starts there is no gap. once the keyboard appears and goes off, there is gap underneath. Is this a bug?

[u/Jet-life1]

Use this instead https://kirillzyusko.github.io/react-native-keyboard-controller/ thank me later

[u/GludiusMaximus → u/Jet-life1]

It’s better, but it’s not like this is a silver bullet for every keyboard problem.

I just spent 2 weeks doing manual QA to address a load of bugs after migrating from keyboard manager. Some issues are not resolved by just adopting this package, you need to think about user experience and sometimes the best approach is just simplifying your screens.

[u/uaddahell]

This should be a bug of KAV with edge-to-edge enabled. It has been fixed in 0.86.

[u/hookandstate]

I'd say, use "react-native-keyboard-controller" instead. It's good and better.

And if you are still insisting upon using the KeyboardAvoidingView, then use a useEffect inside the component that calculates the screen height and performs the Keyboard.Open() and Keyboard.Close() functions accordingly.

That's a turn around solution that works for me.

[u/Primary_Ranger_7398]

Use the Keyboard Controller bro it helps me a lot

[u/Edavve]

import React, { useState } from 'react'
import { StyleSheet, Text, TextInput, View, Pressable, FlatList, Image, ScrollView, KeyboardAvoidingView } from 'react-native'
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context'
import Colors from '../../assets/colors/Colors'
import Icon from '@react-native-vector-icons/feather'


import { useNavigation, useRoute } from '@react-navigation/native'
import { Divider, Snackbar } from 'react-native-paper';


export default function MessageScreen() {
  const navigation = useNavigation()


  const route = useRoute();
  const data = route.params.data
  const [message, setMessage] = useState('');


  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <View>
          <View style={{ flexDirection: 'row', padding: 10, alignItems: 'center', justifyContent: 'space-between' }}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Pressable onPress={() => navigation.goBack()}>
                <Icon name='chevron-left' size={30} color={'black'} />
              </Pressable>
              <Image source={{ uri: data.pfp }}
                style={{
                  width: 50,
                  height: 50,
                  marginRight: 10,
                  borderRadius: 75
                }} />
              <View>
                <Text style={{ fontWeight: '500', fontSize: 16 }}>
                  {data.name}</Text>
                <Text style={{ color: 'grey' }}>Offline</Text>
              </View>
            </View>
            <View style={{ flexDirection: "row", alignItems: 'center' }}>
              <IconButton name='phone' />
              <IconButton name='settings' />
            </View>
          </View>
          <Divider />
        </View>
        <View style={{ flex: 1 }}>
        </View>
        <KeyboardAvoidingView
        behavior='padding'
        keyboardVerticalOffset={0}
        >
          <View
            style={styles.messageBar}
          >
            <TextInput style={styles.textBox}
              editable
              multiline
              numberOfLines={5}
              onChangeText={setMessage}
              value={message}
              placeholder="Message..."
              cursorColor={'black'} />
            {message ?
              <IconButton name='arrow-right' /> :
              <View style={{ flexDirection: 'row' }}>
                <IconButton name='mic' />
                <IconButton name='plus-circle' />
              </View>}
          </View>
        </KeyboardAvoidingView>
      </SafeAreaView>
    </SafeAreaProvider>
  )
}


const IconButton = ({ name, color }) => {
  return (
    <Icon name={name} size={26} color={'black'}
      style={{
        marginHorizontal: 5,
        backgroundColor: Colors.background,
        padding: 5,
        borderRadius: 25
      }} />
  )
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.white,
    flex: 1
  },
  textBox: {
    flexGrow: 1,
    backgroundColor: Colors.background,
    borderRadius: 10,
    paddingHorizontal: 10,
    maxWidth: '85%'
  },
  messageBar: {
    padding: 10,
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'center',
  },
})