Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Issue] - Hi-res images not loaded in full resolution #21

Closed
crank-chips opened this issue Jun 18, 2023 · 2 comments
Closed

[Issue] - Hi-res images not loaded in full resolution #21

crank-chips opened this issue Jun 18, 2023 · 2 comments

Comments

@crank-chips
Copy link

crank-chips commented Jun 18, 2023

Platforms: iOS, Android (but more noticeable on Android)

ImageViewer doesn't load the hi-res image properly. It's pixelated when zoomed in.
There is an 8k test image can be found by the link: https://i.ibb.co/cyLmJWh/8k-test.png
The same link is used in the code. And when the image is opened in ImageViewer and zoomed in you can see that it's pixelated, but looks sharp in the browser.

hi_res_images.mov

Code:

import {Dimensions, Image, View} from "react-native";
import * as React from "react";
import {ImageViewer, ImageWrapper} from "react-native-reanimated-viewer";
import {useRef} from "react";
import {FlatList} from "react-native-gesture-handler";

const images = Array.from({length: 50}, (_, index) => {
    return {
        thumbNailUri: `https://picsum.photos/id/${index + 10}/980/551`
    };
});

export const TestRNViewer = () => {
    const imageRef = useRef(null);

    return (
        <>
            <ImageViewer
                ref={imageRef}
                doubleTapScale={20}
                maxScale={20}
                data={images.map((el) => ({
                    key: `key-${el.thumbNailUri}`,
                    source: {uri: "https://i.ibb.co/cyLmJWh/8k-test.png"}
                }))}
            />
            <View style={{backgroundColor: "rgb(15, 15, 15)"}}>
                <FlatList
                    data={images}
                    keyExtractor={(item) => item.thumbNailUri}
                    initialNumToRender={5}
                    renderItem={({item, index}) => (
                        <ImageWrapper
                            key={item.thumbNailUri}
                            viewerRef={imageRef}
                            index={index}
                            source={{
                                uri: item.thumbNailUri,
                            }}
                        >
                            <Image source={{uri: item.thumbNailUri,}}
                                   style={{width: Dimensions.get("screen").width, height: 250, marginBottom: 10}}/>
                        </ImageWrapper>
                    )}
                    showsVerticalScrollIndicator={false}
                />
            </View>

        </>
    );
}
@crank-chips crank-chips changed the title [Android, iOS] - Hi-res images not loaded in full resolution [Issue] - Hi-res images not loaded in full resolution Jun 20, 2023
@llr101 llr101 closed this as completed in 40f298e Jul 7, 2023
@llr101
Copy link
Collaborator

llr101 commented Jul 7, 2023

fixed in v1.3.1

@crank-chips
Copy link
Author

@booyeu this is still reproducible on Android.

Screenshot 2023-07-11 at 4 09 39 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants