How to use renderMessage, renderMessageImage functions and also how to display no messages found if the messages object is empty

Question

I'm integrating react-native-gifted-chat in my application.

my code for gifted chat is

     <GiftedChat
                composerHeight={COMPOSER_HEIGHT}
                minInputToolbarHeight={COMPOSER_HEIGHT}
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={{ _id: this.state.senderUserName }}
                loadEarlier={this.state.loadEarlier}
                isLoadingEarlier={this.state.isLoadingEarlier}
                onLoadEarlier={this.onLoadEarlier}
                placeholder="Type your message"
                renderSend={this.renderSend}
                alwaysShowSend={true}
                renderActions={this.imageSend.bind(this)}
                renderInputToolbar={this.renderInputToolbar}
                renderBubble={this.renderBubble.bind(this)}
                renderMessage={this.renderMessage.bind(this)}
                renderMessageImage={this.renderMessageImage}
                renderAvatar={null}
                inverted={true}
            /> 

Here i need to use custom image renderer. I know i need to use renderMessageImage but i cant able to find proper example to achieve it.

My RenderMessageImage is 

        renderMessage(props) {
           if(this.state.messages.length !==0){
             return <Message {...props} 
             />;
             }else{
               return <View style={{flex:1, backgroundColor:'red'}}>
                 <Text>Hello no data found</Text>
               </View>
                  }
                return null
                    }

but it is not working.

and my another problem is if there is no any messages i need to show the gifted chat screen as no messages found instead of white screen. How can i achieve this two.

i need the screen something like

Answer 1

You can try to remove the flex:1 from your style may be a solution.

EDIT

Use system message, include it in your messages list if messages.length === 0.

EDIT 2

You have to create an overlay, see my example here: https://snack.expo.io/@xcarpentier/gifted-chat

render() {
    return (
      <>
      {this.state.messages.length === 0 && (
        <View style={[
          StyleSheet.absoluteFill,
          {
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            bottom: 50
          }]}>
          <Image 
            source={{ uri: 'https://i.sstatic.net/qLdPt.png' }}
            style={{
              ...StyleSheet.absoluteFillObject,
              resizeMode: 'contain'
            }}
          />
      </View>
      )}
      <GiftedChat
       messages={this.state.messages}
       onSend={(messages) => this.onSend(messages)}
       renderCustomView={this.renderCustomView}
       user={{
         _id: 1,
       }}
       parsePatterns={linkStyle => [
          {
            pattern: /#(\w+)/,
            style: { ...linkStyle, color: 'lightgreen' },
            onPress: props => alert(`press on ${props}`),
          },
        ]}
     />
     </>
    );
  }