callstack / callstack/react-native-pager-view

Multiple pages per image in Android

Aperta
#555 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
3.4k
Fork
476
Merge medio
10g 21h
PR unite (30g)
2

Descrizione

## 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione di InlinePhotoGallery e confronta il comportamento su Android con il caso funzionante su iOS, concentrandoti su come PagerView conta ImageBackground e l’Image annidato al suo interno. Riproduci la demo con e senza il wrapper View; il lavoro è completato quando Android tratta ogni immagine e il relativo sfondo come un’unica pagina senza richiedere il wrapper.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, react-native, typescript
Ambito
mobile
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.