React-native-gifted-chat: How to use renderLoading?

[peterkruty]

Issue Description

I'm not sure how to use renderLoading(). I assume this can be used when I'm loading chat and retrieving data from backend? But it is unclear how to use it.

Steps to Reproduce / Code Snippets

When I simply use like this:

                renderLoading={() => {
                  return (<Text>Llala</Text>)
                }}

It does not seem to do anything.

Expected Results

?

Additional Information

• React Native version: 0.36.0
• react-native-gifted-chat version: 0.0.10
• Platform(s) (iOS, Android, or both?): iOS

[tk-pivotus]

You can comment out this line to see your what your loading view looks like:
https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.js#L443

Based on the source code, the loading screen is for initial loading the gifted-chat (see L441), rather than loading the backend chat messages. You can write your own loading component on top of the RNGC when fetching.

[amitava82]

Why there is a delay in initializing the component? Even when the messages are available in state, it take a second to render the messages? I'd expect to show without any delay much like whatsapp. Everytime user switch conversation there is a bit delay to render already loaded messages which isn't very good experience.

[brunocascio]

Hi @amitava82,

Please open a new ticket. Since this issue is a question with no activity, I'll close it.

Thanks!

[AGurindapalli]

<GiftedChat
  renderLoading={() =>  <ActivityIndicator size="large" color="#0000ff" />}
  messages={this.state.messages}
  onSend={(messages) => this.onSend(messages)}
  renderComposer= {this.renderComposer}
  inverted={false}
  isAnimated
  messageIdGenerator={this.idGenerator}
  showUserAvatar
  textInputStyle={{ color: this.ActivityThemeCode }}
  user={{
    _id: this.state.ChatData.SenderId,
    name: this.state.ChatData.MessageFrom,
   }}           
 />

[ripern]

@anilgurindapalli That shows a tiny spinner at the top of the chat view for half a second and if I go offline it has the same behaviour meaning views (eg. renderInputToolbar) are loaded even though the chat data never loaded (since being offline).