react-native-image-viewer
react-native-image-viewer copied to clipboard
Terrible performance after open viewer with gif image
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