ascoders / react-native-image-viewer

🚀 tiny & fast lib for react native image viewer pan and zoom
MIT License
2.44k stars 577 forks source link

Terrible performance after open viewer with gif image #400

Open micheilsgrey opened 4 years ago

micheilsgrey commented 4 years ago

I am new to react, picked this library to show user my images from the internet. And the problem I notice is that all lagging very much if I using gif images. I used a custom image component as react-native-fast-image because without it all app starting drop in fps very much, dropping from 60 fps sometimes down to 5. If I open a browser with the normal image as first to show everything working fine, but if the first image from the collection by index picked as a gif all collection with browser lagging now.

my code :

import { View, StatusBar, Text, Image } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import { MainStackParamList } from '../../../screens/main/MainNavigator';
import { RouteProp } from '@react-navigation/native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { IImageInfo } from 'react-native-image-zoom-viewer/built/image-viewer.type';
import images from 'assets/images';
import FastImage from 'react-native-fast-image';

type PicturesBrowserNavigationProp = StackNavigationProp<MainStackParamList>;

type PicturesBrowserRouteProp = RouteProp<
  MainStackParamList,
  'ModalPicturesBrowser'
>;

export type PicturesBrowserProps = {
  navigation: PicturesBrowserNavigationProp;
  route: PicturesBrowserRouteProp;
};

export class PicturesBrowser extends React.Component<PicturesBrowserProps, {}> {
  _renderImage = (props: any) => {
    return <FastImage {...props} />;
  };
  _renderIndicator = () => <View></View>;
  _renderHeader = (currentIndex: number, pics: IImageInfo[]) => {
    return (
      <View style={{ height: 50, backgroundColor: 'white' }}>
        <Text>{`${currentIndex + 1}/${pics.length}`}</Text>
      </View>
    );
  };
  _renderArrowLeft = () => <Image source={images.arrowLeft} />;
  render() {
    const { pictures, index } = this.props.route.params;
    return (
      <View style={{ flex: 1 }}>
        <StatusBar backgroundColor="black" barStyle="light-content" />
        <ImageViewer
          imageUrls={pictures}
          backgroundColor={'black'}
          renderHeader={(currentIndex) =>
            this._renderHeader(currentIndex, pictures)
          }
          enableSwipeDown
          onCancel={this.props.navigation.goBack}
          renderImage={(props) => this._renderImage(props)}
          renderIndicator={this._renderIndicator}
          index={index}
        />
      </View>
    );
  }
}

UPDATE: I notice actually that if I open first images no matter what format all working ok in browser with normal fps but if I open the last image or in the middle no matter gif or normal image the performance dropping drastically.

UPDATE2: All these issues happening only on android devices and simulator on iPhone everything working fine no matter I use standard Image component or using react-native-fast-image

demo: https://streamable.com/l6hykb