callstack / callstack/react-native-pager-view

Multiple pages per image in Android

Ouverte
#555 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.