meliorence / meliorence/react-native-image-gallery
Image not showing centered while in Landscape mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 717
- Forks
- 298
- PR merge metrics
- No merged PRs in 30d
Description
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]}
/>
)`
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the Gallery orientation change on Android using the supplied component and image data, comparing a locally built Expo SDK app with an APK from Expo's online service. Trace how the Gallery lays out images in landscape mode; done means the image remains vertically centered in the online-build APK without regressing portrait mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, javascript, react, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100