onLoadEnd is not fired in react-native Image

Question

hi am trying to load an remote image. onLoadStart is hitting but not the onLoadEnd `

<View style={{ paddingTop: 60, paddingBottom: 10 }}>
              {this.state.loading ? (
                <DotIndicator size={25} color={"white"} />
              ) : (
                <Image
                  resizeMode={this.resizeMode}
                  style={[styles.imageStyle, this.tintStyle]}
                  onLoadStart={e => {
                    this.setState({ loading: true });
                  }}
                  onLoadEnd={e => this.setState({ loading: false })}
                  // defaultSource={NoProfile}
                  //  loadingIndicatorSource={require("@images/profile_placeholder.png")}
                  source={this.userImageUri}
                  onError={error => {
                    this.tintStyle = { tintColor: "lightgray" };
                    this.resizeMode = "contain";
                    this.userImageUri = NoProfile;
                  }}
                />
              )}
            </View>

`

EDIT 1

onLoadStart is hit. onLoad is also never being called

does any one have a clue. am new to react. Any help is appreciated. thanks is advance

SOLUTION

Since Vignesh and hong mentioned the image is never there so its on loadEnd will never be called. So instead of loading only image or loader I loaded the loader on top of image. Posting this here as it may be useful for someone at sometime. Once again thanks to Vignesh and hong

<View
              style={{
                padding: 10,
                width: WIDTH - 50,
                height: WIDTH - 25,
                alignSelf: "center"
              }}
            >
              {this.state.loading ? (
                <MaterialIndicator
                  size={50}
                  color={"red"}
                  style={{
                    marginTop: WIDTH / 2,
                    alignSelf: "center"
                  }}
                />
              ) : null}
              <Image
                resizeMode={this.resizeMode}
                style={[styles.imageStyle, this.tintStyle]}
                onLoadStart={e => {
                  this.setState({ loading: true });
                }}
                onLoad={e => {
                  this.setState({ loading: false });
                }}
                onLoadEnd={e => this.setState({ loading: false })}
                // defaultSource={NoProfile}
                //  loadingIndicatorSource={require("@images/profile_placeholder.png")}
                source={this.userImageUri}
                onError={error => {
                  this.tintStyle = { tintColor: "lightgray" };
                  this.resizeMode = "contain";
                  this.userImageUri = NoProfile;
                }}
              />
            </View>

Answer 1

Let's say that the value of this.state.loading was false before the first render.

When the first render happens, this.state.loading ? returns the Image component, onLoadStart is triggered and this.state.loading is set to true.

When the second render happens, this.state.loading is found to be true and this.state.loading ? returns the DotIndicator component. All the hard work done by the Image component during the previous the render is lost. In fact, Image component was never present in that context.

Hence, onLoadingEnd will never be triggered, because Image component never appeared in the second render.

And the DotIndicator will forever go round and round and round... Waiting for it's lost love..