callstack / callstack/react-native-pager-view
Multiple pages per image in Android
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
## Environment
- Tested in `5.4.9` and `5.4.15`
- Android
## Description
I have a simple image gallery code that shows images with a blurred version of the image as a background, the problem is the background and the image itself are treated as different pages, besides being the background the parent of the image.
## Reproducible Demo
The buggy code looks like this:
```tsx
import React from 'react';
import { Image, ImageBackground, View } from 'react-native';
import PagerView from 'react-native-pager-view';
type Props = {
imageUrls: string[];
};
const getResizeMode = (url: string) => {
const query = url.split('?')[1];
const params = new URLSearchParams(query);
const width = params.get('width') || '0';
const height = params.get('height') || '0';
return Number(height) >= Number(width) ? 'contain' : 'cover';
};
const InlinePhotoGallery = ({ imageUrls }: Props): JSX.Element => (
{imageUrls.map((imageUrl) => (
//
//
))}
);
export default InlinePhotoGallery;
```
Here is a screencast of that:
https://user-images.githubusercontent.com/804350/167194160-01f517b1-365a-47db-9c7d-710ef25d4088.mp4
You can see in the code there are two commented lines wrapping the `ImageBackground`, that's actually the workaround I've found, with that, everything looks as expected:
https://user-images.githubusercontent.com/804350/167194441-c1555261-8310-479b-bba7-b254199f3422.mp4
Shouldn't this look good without the wrapper? Worth mentioning again, it works perfectly in iOS without the `View` wrapper.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par reproduire InlinePhotoGallery et comparez le comportement sur Android avec le cas fonctionnel sur iOS, en vous concentrant sur la manière dont PagerView compte ImageBackground et l’Image imbriqué qu’il contient. Reproduisez la démo avec et sans le wrapper View ; c’est terminé lorsqu’Android traite chaque image et son arrière-plan comme une seule page sans nécessiter le wrapper.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- android, react-native, typescript
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 45/100