Can not zoom, swipe list images when using Modal

[phamhuuan]

react-native: 0.65.1
react-native-awessome-gallery: 0.2.6
react-native-reanimated: 2.2.3

Code

<Modal visible={true}>
	<Gallery
		ref={galleryRef}
		data={props.imageUrls}
		maxScale={10}
		initialIndex={props.defaultIndex}
		onIndexChange={setSelectedImage}
	/>
</Modal>

[ArnabXD]

I am also having the same issue.

• react-native: 0.66
• react-native-awessome-gallery: 0.2.6
• react-native-reanimated: 2.2.3

Reproducible Code

import React, { useState } from 'react';
import { FlatList, Modal, Image, Pressable, Dimensions } from 'react-native';
import { Container } from '../components'; // A View with flex: 1 and flexGrow: 1
import AwesomeGallery from 'react-native-awesome-gallery';

const { width } = Dimensions.get('screen');

const data = new Array(25).fill(
  'https://cdn.stocksnap.io/img-thumbs/960w/business%20meeting-people_QVIEE1UZSX.jpg',
);

export const Gallery = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [initialIndex, setInitialIndex] = useState(0);
  return (
    <Container>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index + item}
        numColumns={3}
        renderItem={({ item, index }) => (
          <Pressable
            onPress={() => {
              setInitialIndex(index);
              setModalVisible(true);
            }}
          >
            <Image
              source={{ uri: item }}
              style={{ height: width / 3, width: width / 3 }}
            />
          </Pressable>
        )}
      />
      <Modal
        visible={modalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <AwesomeGallery
          data={data}
          initialIndex={initialIndex}
          numToRender={10}
          keyExtractor={(item, index) => index + item}
        />
      </Modal>
    </Container>
  );
};

[pavelbabenko]

@phamhuuan Is it Android?
I can't reproduce on iOS

[ArnabXD]

It is on Android ,

[phamhuuan]

@pavelbabenko yes it is on Android.

[phamhuuan]

I have tried with react-native-modal: 13.0.0
AwesomeGallery work correctly when coverScreen={false}. If coverScreen = true, I have the same issue with using Modal from 'react-native'

[kamui545]

You need to wrap the gallery with GestureHandlerRootView if you're using it inside a modal on Android.

import { GestureHandlerRootView } from 'react-native-gesture-handler';

<Modal
  visible={viewerVisible}
  animationType="fade"
  transparent
  onRequestClose={closeViewer}>
  <GestureHandlerRootView style={{ flex: 1 }}>
    <Gallery
      data={images}
      onSwipeToClose={closeViewer}
      onIndexChange={onGalleryIndexChange}
      initialIndex={viewerPhoto}
    />
  </GestureHandlerRootView>
</Modal>

Maybe this could be handled by the library itself? @pavelbabenko

https://docs.swmansion.com/react-native-gesture-handler/docs/#for-library-authors

[pavelbabenko]

Tested on Android with v0.3.0. Everything worked well.
Note: v0.3.0 uses Gesture Handler v2
I'm closing the issue, but if the bug appears, please reopen it again.