callstack / callstack/react-native-pager-view
Multiple pages per image in Android
- 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
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