loadingIndicatorSource is android only?

[darrenchiu]

I took a look in the source code after failing to set the loadingIndicatorSource for iOS, and found that in the ios code doesn't seem to use loadingIndicatorSource parameter. So I guess this is not supported for iOS?

just a suggestion, I have been using this to do image loading indicator, maybe it's a good idea to use their image view for this purpose? https://github.com/oblador/react-native-image-progress

or it might be just I am doing wrongly in passing in the parameter...

[acodercc]

Also want to use react-native-image-progress

[alwx]

Thanks for a suggestion. Probably it is a good idea to include react-native-image-progress as a dependency to make loadingIndicatorSource available on both Android and iOS. Will try to take a look during this week.

[u-kan]

I'm using loadingIndicatorSource with android and I got warning.

Warning: Failed prop type: Invalid prop `loadingIndicatorSource` supplied to `PhotoView`.

in PhotoView (created by ItemBody)
    in ItemBody (created by CellRenderer)
    in RCTView (created by View)
    in View (created by Container)
    in Container (created by CellRenderer)
    in RCTView (created by View)
    in View (created by CellRenderer)
    in CellRenderer (created by VirtualizedList)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in AndroidSwipeRefreshLayout (created by RefreshControl)
    in RefreshControl (created by VirtualizedList)
    in ScrollView (created by VirtualizedList)
    in ....... 

this is the exact code about PhotoView I'm using . Am I missing something?

  <PhotoView
    loadingIndicatorSource={() => <Spinner />}
    source={{ uri: originalUri }}
    style={styles.imageModalStyle}
    minimumZoomScale={0.5}
    maximumZoomScale={3}
    androidScaleType="center"
    resizeMode={'contain'}
  />

Thanks for reading!!

[efstathiosntonas]

@alwx any ETA for react-native-image-progress ?

Thanks

[anhtuank7c]

Any update?

[anhtuank7c]

I researched and found the way to implement any kind of loading indicator.

Implement 2 callback function as below to toggle show/hide overlay view with spinner inside.

onLoadStart
onLoadEnd

[JiboStore]

@anhtuank7c how did you do that? mind to share? new to javascript and react-native here...

[anhtuank7c]

@JiboStore

import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import PhotoView from 'react-native-photo-view';
import * as Progress from 'react-native-progress';
import material from '../../theme/variables/material';

export default class Item extends React.Component {
  static propTypes = {
    item: PropTypes.object.isRequired
  };

  state = {
    loaded: false
  };

  shouldComponentUpdate({ item }, { loaded }) {
    return this.state.loaded !== loaded || this.state.item !== item;
  }

  render() {
    const { item } = this.props;
    return (
      <View>
        <PhotoView
          source={{ uri: item.full }}
          showsVerticalScrollIndicator
          showsHorizontalScrollIndicator
          scale={1}
          minimumZoomScale={1}
          maximumZoomScale={3}
          fadeDuration={100}
          androidZoomTransitionDuration={100}
          onLoadEnd={() => this.setState({ loaded: true })}
          androidScaleType="fitCenter"
          style={{
            width: material.deviceWidth,
            height: material.deviceHeight,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#000'
          }}
        />
        {!this.state.loaded && (
          <View style={styles.overlay}>
            <Progress.CircleSnail
              size={50}
              color={['#FF5900', '#fff', material.primaryColor]}
              thickness={3}
            />
          </View>
        )}
      </View>
    );
  }
}

const styles = {
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  }
}

[ashokkumar88]

@anhtuank7c If will failed to load then how to handle the error?

[anhtuank7c]

@ashokkumar88 I guess you can implement onError as well but api seem doesn't support. hum...

https://github.com/alwx/react-native-photo-view#properties

[ashokkumar88]

But when I am adding the onError it is throwing error "unsupported top level event "photoViewError" dispatched.

[pzw224]

loadingIndicatorSource is ios only now?