Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

renderLoading() is not showing activity indicator!

See original GitHub issue

Issue Description

renderLoading prop of rn gifted-chat is not showing activity indicator when it is loading the messages.

Steps to Reproduce / Code Snippets

    <View style={{flex: 1}}>
        <GiftedChat
          renderLoading={() => {                   // <--------------------------------
            console.log('render loading called');
           return(
<ActivityIndicator size="large" color="blue" />                              // <--------------
        );

          }}
          renderSend={this.renderSend}
          renderComposer={this.renderComposer}
          messages={this.state.messages}
          onSend={(messages) => this.onSend(messages)}
          user={{
            _id: this.props.currentUserUID,
            name: this.props.currentDisplayName,
            avatar: this.props.currentUserPhoto,
          }}
          onLoadEarlier={() => {
            console.log('Old messages should be start loading');
          }}
          // isLoadingEarlier={}
          renderAvatar={null}
          renderBubble={this.renderBubble}
        />
          </View>

Expected Results

When messages load from the server it consoles out “render loading called” 2 times but the Activity indicator is not visible to me at that time.

Additional Information

System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.00 GB / 15.43 GB
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.18.2 - /usr/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.1
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.18 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.0 => 0.63.0 
  npmGlobalPackages:
    *react-native*: Not Found

I am facing this issue on Android, although I haven’t tested on IOS.

Any workaround for this, please?

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:5 (1 by maintainers)

Top GitHub Comments

4reactions

axeljeremy7commented, Aug 31, 2020

yeah i have the same issue

3reactions

guiTheretcommented, Mar 14, 2022

Does anyone has a solution on this ?

Top Results From Across the Web

react-native webview loading indicator - Stack Overflow

I like this approach which shows the activity indicator overlayed on the loading Webview so you don't have to wait until the entire...

ActivityIndicator - React Native

Displays a circular loading indicator. Example. Function Component; Class Component. ActivityIndicator Function Component Example.

React Native Show Progress bar While Loading WebView

In this example, we will show the ActivityIndicator while the webpage is loading ... renderLoading={ActivityIndicatorElement} //Want to show the view or not ......

React how to display a loading indicator on fetch calls

=> { /* Begin by setting loading = true, and use the callback function of setState() to make the ajax request. Set loading...

React Native Show Progress bar While Loading WebView

React Native Show Progress bar While Loading WebView. ... StyleSheet, View, ActivityIndicator, } from 'react-native'; //import WebView import { WebView } ...