Add a custom image or custom background color as chat background

Question

I am using react-native-gifted-chat, I want to add a background image (or at least a background color) for the chat but I cannot seem to find the prop. Can someone help?

My current implementation is

    <GiftedChat
      messages={messagesState}
      onSend={(message: IMessage[]) => onSend(message)}
      user={{
        _id: 1,
      }}
      renderAvatarOnTop
      isTyping={mutationLoading}
      onInputTextChanged={debouncedOnInputTextChanged}
      listViewProps={{
        onEndReached: onFetchMore,
      }}
    />
    

Answer 1

messageContainerStyle={{backgroundColor: 'red'}} // add this prop in gifted Chat

Answer 2

You can use <ImageBackground> component from react-native.

Example Usage:

<ImageBackground resizeMode='cover' imageStyle={{ opacity: 0.07 }} source={require('../../../assets/chatBackground.png')} style={{ flex: 1 }}>    
    <GiftedChat ...props/>
</ImageBackground >