Content of renderChatEmpty slides down when keyboard is open

[ardaOnal]

Issue Description

Content of renderChatEmpty slides down when keyboard is open.

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]

dont use arrow function like this, try to use like this:

renderChatEmpty={renderChatEmpty}

const renderChatEmpty = () => {
   return <View>...</View>
}

[ardaOnal]

Removing the Background component worked:

const Background = ({ children }: Props) => (
  <ImageBackground
    source={require("../assets/background_dot.png")}
    resizeMode="repeat"
    style={styles.background}
  >
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      {children}
    </KeyboardAvoidingView>
  </ImageBackground>
);

const styles = StyleSheet.create({
  background: {
    flex: 1,
    width: "100%",
    // backgroundColor: "#12372A",
  },
  container: {
    flex: 1,
    padding: "8%",
    marginTop: "3%",
    width: "100%",
    maxWidth: "100%",
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
  },
});