Input toolbar glitches after opening keyboard

[ardaOnal]

Issue Description

Input toolbar glitches after opening keyboard for a bit.

Video:

Steps to Reproduce / Code Snippets

<SafeAreaView style={{ flex: 1 }}>
      <BackButton goBack={() => navigation.goBack()} />
      <View
        style={{
          height: 100,
          position: "absolute",
          alignSelf: "center",
          justifyContent: "center",
          backgroundColor: "transparent",
          alignItems: "center",
          width: "100%",
          borderBottomColor: "gray",
          borderBottomWidth: 1,
        }}
      >
        <Avatar.Image
          source={require("../../../assets/images/posts/avatar.jpeg")}
          style={{ alignSelf: "center" }}
          size={36}
        />
        <Text style={{ fontSize: 12 }}>Hasan Demirkiran</Text>
      </View>
      <GiftedChat
        renderLoading={() => (
          <Background>
            <ActivityIndicator size="large" color="green" />
          </Background>
        )}
        messages={messages}
        onSend={(messages) => onSend(messages)}
        user={{
          _id: 1,
        }}
        alignTop
        placeholder="Type your message here..."
        isTyping
        showAvatarForEveryMessage
        alwaysShowSend
        onPressAvatar={() => Alert.alert("Go to profile")}
        renderAvatarOnTop
        messagesContainerStyle={{
          paddingBottom: 5,
          paddingTop: 100,
        }}
        keyboardShouldPersistTaps="never"
        renderBubble={(props) => {
          return (
            <Bubble
              {...props}
              wrapperStyle={{
                left: {
                  backgroundColor: "#E0E0E0",
                },
              }}
            />
          );
        }}
        renderInputToolbar={(props) => (
          <InputToolbar
            {...props}
            containerStyle={{
              margin: 20,
              marginBottom: 10,
              borderRadius: 10,
              borderTopColor: "transparent",
            }}
            renderSend={(props) => (
              <Send
                {...props}
                containerStyle={{
                  height: "auto",
                  marginRight: 5,
                }}
              />
            )}
          />
        )}
        inverted={messages.length == 0 ? false : true}
        listViewProps={{
          keyboardDismissMode: "on-drag",
        }}
        renderChatEmpty={() => (
          <Background>
            <View
              style={{
                flex: 1,
                alignSelf: "center",
                justifyContent: "center",
                height: 500,
                gap: 20,
              }}
            >
              <Text
                style={{
                  transform: [{ scaleY: -1 }],
                  textAlign: "center",
                  width: 250,
                  fontSize: 14,
                }}
              >
                31 hours ago
              </Text>
              <Avatar.Image
                source={require("../../../assets/images/posts/avatar.jpeg")}
                style={{ alignSelf: "center", transform: [{ scaleY: -1 }] }}
                size={100}
              />
              <Text
                style={{
                  transform: [{ scaleY: -1 }],
                  textAlign: "center",
                  width: 250,
                }}
              >
                You matched with Hasan Demirkiran. Make the first move!
              </Text>
            </View>
          </Background>
        )}
      />
      {/* {Platform.OS === "android" && <KeyboardAvoidingView behavior="padding" />} */}
    </SafeAreaView>

Expected Results

Content of renderChatEmpty should remain where it is. The same doesn't happen when there are messages.

Additional Information

• Nodejs version: 18
• React Native version: 0.73.4
• react-native-gifted-chat version: 2.4.0
• Platform(s) (iOS, Android, or both?): IOS
• TypeScript version: -

[fukemy]

lets use this patch #2493

[ImBeCiliC]

@ardaOnal your video shows that your bottom navigation component is not hiding quick enough and therefore it looks like the input stutters down.

Did you double check why the input is hiding so slowly?

If this issue is about your Expected Result showing renderChatEmpty wrongly please update the video with an empty chat to resemble the false behaviour also in the video.

[fukemy]

pected Result showing renderChatEmpty wrongly please update the video with an empty chat to resemble the false behaviour also in the vid

nope, the main issue is rendering too many component cause lagging. Use animated-keyboard to prevent rendering when keyboard show from GiftedChat instead