How to use renderLoading?
peterkruty opened this issue · comments
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
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.
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.
Hi @amitava82,
Please open a new ticket. Since this issue is a question with no activity, I'll close it.
Thanks!
<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,
}}
/>
@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).