Image not showing centered while in Landscape mode

[JamesGDiaz]

Hi there. When I change the device orientation in Android, the image im trying to show is moved downwards, as if there was a margin on top of it moving everything down. This does not happen in Portrait mode.

As a sidenote, I'm using Expo, and if I build it locally using the Expo SDK, this issue is not present, this is only present if I build an APK using Expo's online service.

Here's a link to a screenshot of the behaviour: https://imgur.com/a/nW4mdM3

This is my code: `componentDidMount() { console.log('SlideshowScreen shown, callerId: ${this.state.callerId}'); console.log('OrientationStatus: ${this.state.OrientationStatus}');

    //Allow rotation
    Expo.ScreenOrientation.allowAsync(Expo.ScreenOrientation.Orientation.ALL_BUT_UPSIDE_DOWN);
}

componentWillUnmount() {
    //Disallow rotation
    Expo.ScreenOrientation.allowAsync(Expo.ScreenOrientation.Orientation.PORTRAIT_UP);
}

render() {
    const dataSource = [
        [ //when the user presses Derechos Humanos
            { source: require('../assets/slides/derechos_humanos/1.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/derechos_humanos/2.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/derechos_humanos/3.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/derechos_humanos/4.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/derechos_humanos/5.jpg'), dimensions: { width: 1920, height: 1080 } },
        ],
        [ //when the user presses Normatividad
            { source: require('../assets/slides/normatividad/1.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/2.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/3.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/4.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/5.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/6.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/normatividad/7.jpg'), dimensions: { width: 1920, height: 1080 } },
        ],
        [
            { source: require('../assets/slides/facilidades_acceso/1.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/2.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/3.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/4.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/9.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/10.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/11.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/facilidades_acceso/12.jpg'), dimensions: { width: 1920, height: 1080 } },

        ],
        [
            { source: require('../assets/slides/factibilidad/1.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/factibilidad/2.jpg'), dimensions: { width: 1920, height: 1080 } },
        ],
        [
            { source: require('../assets/slides/redes_de_apoyo/1.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/2.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/3.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/4.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/5.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/6.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/7.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/8.jpg'), dimensions: { width: 1920, height: 1080 } },
            { source: require('../assets/slides/redes_de_apoyo/9.jpg'), dimensions: { width: 1920, height: 1080 } },
        ]
    ]

    return (
        <Gallery
            style={{ flex: 1, backgroundColor: 'black' }}
            initialPage={0}
            //initial image to show
            images={dataSource[this.state.callerId]}
        />
    )`

[shubham1164]

Have u found the solution? please help me with a similar issue