Как использовать функции renderMessage, renderMessageImage, а также как отображать сообщения не найдены, если объект messages пуст

Я включаю чата реакции-родной-одаренных в моем приложении.

мой код для одаренного чата

     <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}
            /> 

Здесь мне нужно использовать пользовательский рендерер изображений. Я знаю, что мне нужно использовать renderMessageImage, но я не могу найти подходящий пример для достижения этого.

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
                    }

Но это не работает.

и моя другая проблема, если нет никаких сообщений, которые мне нужны, чтобы показать одаренный экран чата, так как сообщения не найдены вместо белого экрана. Как я могу достичь этого два.