scale to fit for initalizal size

[jjhesk]

I have checked the function and there is a lack of detection for size. The size of the image will be cropped if the initial loaded size is bigger than the screen and the size of the photoview is set to the size of the screen. here is the source:

'use strict'
import React, {Component} from 'react'
import {
    Animated, ScrollView, StyleSheet,
    TouchableHighlight, Text, Dimensions, ListView, Image,
    StatusBar, AsyncStorage, View
} from 'react-native';
import PhotoView from 'react-native-photo-view';
import {CachedImage} from "react-native-img-cache";
import Toolbar from './../components/Toolbar'
export default class TestLayout extends Component {
    static dimen = Dimensions.get('window');

    render() {
        const full_size = {
            width: TestLayout.dimen.width,
            height: TestLayout.dimen.height,
        }
        return (
            <View style={styles.container_dot}>

                <View style={{
                    position: 'absolute',
                    top: 0, left: 0
                }}>

                    <PhotoView
                        style={[full_size, {
                            backgroundColor:"#DFBBAA",
                            borderColor:"#BBAACC",
                            borderWidth: 5,
                        }]}
                        source={{uri: "https://drscdn.500px.org/photo/34778098/q%3D80_m%3D1500/46f408135fd8e8bba2a588f73fecf693"}}
                        minimumZoomScale={0.5}
                        maximumZoomScale={6}
                        scale={0.5}
                        fadeDuration={5500}
                        showsHorizontalScrollIndicator={false}
                        showsVerticalScrollIndicator={false}
                        androidScaleType="center"
                        onLoadStart={()=>console.log("image loading start")}
                        onLoad={() => console.log("Image loaded!")}
                    />
                </View>
                <Toolbar style={{
                    position: 'absolute',
                    top: 0, left: 0
                }} barType={Toolbar.SINGLE_VIEWER}/>
            </View>)
    }
}
const styles = StyleSheet.create({
    centeringAnimationCircle: {
        alignItems: 'center'
    },
    container_dot: {
        flex: 1,
        width: TestLayout.dimen.width,
    },
    photostatic: {
        position: 'absolute',
        top: 0, left: 0
    }
});

[nielsswinkels]

adding resizeMode={'contain'} seems to help:

<PhotoView resizeMode={'contain'} />

http://facebook.github.io/react-native/docs/image.html#resizemode

[MihaiDamian]

resizeMode doesn't seem to work with PhotoView.

[GuillaumeMunsch]

Is does work for me :)

[richgilbank]

For Android, make sure you're using the androidScaleType prop - the docs demo it using center, but if your sides are being cropped off the image, you likely want fitCenter.

[douglasjunior]

For some reason, some pictures do not fit. The problem only occurs on iOS. :/

Does anyone know if this project is under maintenance? I see a lot of issue unanswered.

[efstathiosntonas]

@douglasjunior prop minimumZoomScale={0.5} seems to change the image size, if you remove it then the image scales/fits correctly. Haven't tested on Android to see if it affects anything.

[douglasjunior]

I'm using minimumZoomScale={1}.

I found the bug and sended a PR #86

[loiclouvet]

Same issue here, @douglasjunior PR does the trick