callstack / callstack/react-native-pager-view

Multiple pages per image in Android

Abierto
#555 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
3.4k
Forks
476
Merge medio
10 d 21 h
PR fusionados (30 d)
2

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción de InlinePhotoGallery y compara el comportamiento en Android con el caso funcional en iOS, centrándote en cómo PagerView cuenta ImageBackground y el Image anidado en su interior. Reproduce la demo con y sin el wrapper View; se considera terminado cuando Android trata cada imagen y su fondo como una sola página sin requerir el wrapper.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, react-native, typescript
Área
mobile
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.