Keyboard avoiding view not setting the right height

[EvanAndersen]

I have a problem where, only on android, when i click in the message input, it will push the input way to high and then as soon as i start to type, it readjusts and is at the correct height for the keyboard.

Here is the chat code.

`import "react-native-gesture-handler";
import {
StyleSheet,
Text,
View,
Pressable,
KeyboardAvoidingView,
Platform,
Dimensions,
StatusBar,
Keyboard,
} from "react-native";
import { useHeaderHeight } from "@react-navigation/elements";

import React, { useState, useContext, useEffect } from "react";
import Header from "../components/Header";
import { StreamChat } from "stream-chat";
import { SafeAreaView } from "react-native-safe-area-context";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import { ChatContext } from "../../contexts/ChatContext";
import {
Channel,
Chat,
MessageInput,
MessageList,
OverlayProvider,
ChannelList,
Thread,
} from "stream-chat-expo";
import { Ionicons } from "@expo/vector-icons";
import { getAuth } from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { db } from "../../firebase";
import { UserContext } from "../../contexts/UserContext";
import ChatProfileView from "../components/ChatProfileView";

const client = StreamChat.getInstance(api-key);
const auth = getAuth();

const ChatScreen = () => {
const { channel, setChannel } = useContext(UserContext);
const [chatContactVisible, setChatContactVisible] = useState(false);
const [chatContactToView, setChatContactToView] = useState({});
const [thread, setThread] = useState(null);
const [userName, setUserName] = useState(null);
const [chatName, setChatName] = useState(null);
const [chatId, setChatId] = useState(null);
const [keyboardHeight, setKeyboardHeight] = useState(0);

const headerHeight = useHeaderHeight();

useEffect(() => {
if (!client.user) {
getStreamUserToken().then((userToken) => {
client.connectUser(
{
id: auth.currentUser.uid,
},
userToken.data
);
console.log("loggeduserin- login");
});
}
}, []);

const clearChannel = () => {
setChannel();
setChatName();
setChatContactToView();
};
const clearThread = () => {
setThread(null);
};

useEffect(() => {
console.log(channel);
}, [channel, setChannel]);

const theme = {
messageList: {
container: {
backgroundColor: "white",
},
},
channelPreview: {
container: { backgroundColor: "white" },
},
};

useEffect(() => {
async function getUserNames() {
const userRef = doc(db, "users", auth.currentUser.uid);
const docSnap = await getDoc(userRef);
if (docSnap.exists()) {
const info = docSnap.data();
setUserName(info.firstName);
}
}
getUserNames();
}, []);

const getUserData = async () => {
const userRef = doc(db, "users", chatId);
const docSnap = await getDoc(userRef);
if (docSnap.exists()) {
const info = docSnap.data();
setChatContactToView(info);
console.log(info);
}
};

useEffect(() => {
if (channel) {
if (userName === channel.data.memberOne) {
setChatName(channel.data.memberTwo);
setChatId(channel.data.memberTwoId);
console.log("---------- id set");
console.log(channel.data.memberTwoId);
} else {
setChatName(channel.data.memberOne);
setChatId(channel.data.memberOneId);
console.log("---------- id set now");
console.log(channel.data.memberTwoId);
}
}
}, [channel, setChannel]);

const CustomPreviewTitle = ({ channel }) => {
if (userName === channel.data.memberOne) {
return {channel.data.memberTwo};
} else {
return {channel.data.memberOne};
}
};

const openChatContact = () => {
getUserData()
.then(setChatContactVisible(true), console.log("opened"))
.catch((err) => {
alert("User no longer exists :(");
});
};

const filters = { members: { $in: [auth.currentUser.uid] } };

return (
<ChatContext.Provider
value={{
chatContactVisible,
setChatContactVisible,
chatContactToView,
setChatContactToView,
}}

<SafeAreaView
style={{
flexDirection: "column",
backgroundColor: "white",
flex: 1,
}}

    {channel ? (
      <Channel
        channel={channel}
        thread={thread}
        threadList={!!thread}
        keyboardBehavior={"padding"}
        keyboardVerticalOffset={0}
      >
        <View
          style={{
            justifyContent: "space-between",
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <View
            style={{
              marginLeft: 10,
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Pressable onPress={clearChannel}>
              <Ionicons
                name="arrow-back-sharp"
                size={30}
                color="black"
              />
            </Pressable>
            <Pressable onPress={openChatContact}>
              <Text
                style={{
                  color: "black",

                  fontSize: 20,
                  marginLeft: 10,
                }}
              >
                {chatName}
              </Text>
            </Pressable>
          </View>

          {thread ? (
            <Pressable
              style={{
                marginRight: 15,
              }}
              onPress={clearThread}
            >
              <Text style={{ color: "#3b55d9" }}>Close thread</Text>
            </Pressable>
          ) : (
            <></>
          )}
        </View>
        {thread ? (
          <Thread />
        ) : (
          <>
            <MessageList onThreadSelect={setThread} />
            <MessageInput />
          </>
        )}
      </Channel>
    ) : (
      <View style={styles.scroll}>
        <ChannelList
          onSelect={setChannel}
          filters={filters}
          PreviewTitle={CustomPreviewTitle}
          style={theme}
        />
      </View>
    )}
  </Chat>
  {chatContactVisible ? <ChatProfileView /> : <></>}
</SafeAreaView>

); };

export default ChatScreen;

const styles = StyleSheet.create({
container: {
flex: 1,

flexDirection: "column",
backgroundColor: "white",
},
scroll: {
flex: 9,
},
});
`

Here is the header component

`import { StyleSheet, Text, View, Pressable } from "react-native";
import React, { useState, useEffect, useContext } from "react";
import { auth } from "../../firebase";
import { useNavigation } from "@react-navigation/core";
import { Ionicons } from "@expo/vector-icons";
import { StreamChat } from "stream-chat";
import { UserContext } from "../../contexts/UserContext";

import { getDocs, query, where, collection } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { db } from "../../firebase";

import { LikesContext } from "../../contexts/LikesContext";
import ProfileView from "./Likes";

const client = StreamChat.getInstance("2gayu2kzmu3r");

const Header = (props) => {
const [likesVisible, setLikesVisible] = useState(false);
const { tempLikesArray, setTempLikesArray } = useContext(UserContext);

const navigation = useNavigation();
const handleSignOut = () => {
auth
.signOut()
.then(async () => {
navigation.replace("Login");
await client.disconnectUser();
console.log("User disconnected");
})
.catch((error) => alert(error.mesage));
};

const openLikes = () => {
setLikesVisible(true);
};

return (
<LikesContext.Provider
value={{
likesVisible,
setLikesVisible,
}}

{props.screenName}
<View style={{ flexDirection: "row" }}>
<Pressable
style={{ justifyContent: "center", marginRight: 15 }}
onPress={openLikes}

0
? styles.likeBubbleVisible
: styles.likeBubbleInvisible,
]}

<Pressable
style={{ justifyContent: "center", marginRight: 15 }}
onPress={handleSignOut}

{likesVisible ? : <></>}

</LikesContext.Provider>
);
};

export default Header;

const styles = StyleSheet.create({
header: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
backgroundColor: "white",
width: "100%",

justifyContent: "space-between",
marginTop: 10,
},
logoText: {
alignSelf: "center",
fontSize: 30,
color: "#3b55d9",
marginLeft: 20,
fontFamily: "Inter_900Black",
},
logoutButton: {
alignSelf: "center",
},
image: {
width: 20,
height: 20,
alignSelf: "center",
marginRight: 20,
},
likeBubbleVisible: {
width: 5,
height: 5,
borderRadius: 10,
backgroundColor: "blue",
position: "absolute",
display: "flex",
top: 2,
left: 0,
},
likeBubbleInvisible: {
width: 5,
height: 5,
backgroundColor: "blue",
position: "absolute",
display: "none",
top: 2,
left: 0,
},
});
`

[415brian]

I had this problem too. I was able to fix by changing to this in my app.config.js:

softwareKeyboardLayoutMode: "resize"