Built-in image size management feasible?

[hardcodet]

Wouldn't it make sense to provide the component with the capabilities to just show an image in contain mode without having to specify its size, and have it initially just match the container's size? That would probably the case in 95+ % of all cases, not?

[dhcmega]

Image component from RN needs WxH, otherwise, it will not show the image.

[dhanababum]

Hi, Can you give a chance to remove overflow: Hidden, because I need to see full image, otherwise it is showing cropped image https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.style.ts#L6

[brycehanscomb]

@dhanababum I suggest you create a Pull Request if you want that change implemented; @ascoders is welcoming of outside contributions 👍

[darriuk]

My workaround for this was to load the image first inside the render function, making sure the Image component has an onLayout handler passed in its props, then once the dimensions are known (using onLayout's event.nativeEvent.layout.width), insert the ImageZoom component into the render function using the newly discovered dimensions.

[dhcmega]

@darriuk your solution sound really good. Can you paste an example or it will be too much code? Thanks.

[darriuk]

Yeah no probs. My code works out the image aspect ratio from the width and height, so that the image always fill the entire screen width and has a dynamic height depending on its aspect ratio.

constructor(props){
    super(props);
    this.state={
        imageHeight:0
    };
}

/**
 * Handle the initial Image onLayout event
 * @param {SyntheticEvent} event
 */
handleOnLayout = (event) =>{
    let w = event.nativeEvent.layout.width;
    let h = event.nativeEvent.layout.height;
    let ratio = w/h;
    this.setState({
        imageHeight: Dimensions.get('window').width / ratio
    })
}

render() {
    let file = require("path/to/image/file");
    let screenWidth = Dimensions.get('window').width;
    let screenHeight = Dimensions.get('window').height;
    return (
        <View 
            style={{
                width:'100%',
                height:'100%'
            }}
        >

            {this.state.imageHeight === 0 ? 
                <Image 
                    style={{opacity:0}}
                    onLayout={this.handleOnLayout}
                    source={file}
                />
            :
                <ImageZoom 
                    cropWidth={screenWidth}
                    cropHeight={screenHeight}
                    imageWidth={screenWidth}
                    imageHeight={this.state.imageHeight}
                >
                    <Image 
                        style={{
                            width:screenWidth,
                            height:this.state.imageHeight
                        }}
                        source={file}
                    />
                </ImageZoom>
            }
        </View>
    );
}