Comments (7)
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
from react-native-awesome-gallery.
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>
);
};
from react-native-awesome-gallery.
@phamhuuan Is it Android?
I can't reproduce on iOS
from react-native-awesome-gallery.
It is on Android ,
from react-native-awesome-gallery.
@pavelbabenko yes it is on Android.
from react-native-awesome-gallery.
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'
from react-native-awesome-gallery.
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.
from react-native-awesome-gallery.
Related Issues (20)
- Buggy behavior while changing from portrait to landscape on zoomed in images HOT 3
- Add loading component HOT 1
- Suggestion: set index with animation HOT 2
- translateX offset, image disappear on pan HOT 4
- Resizable image
- Bug: gallery does not work if using containerDimensions prop value changes HOT 1
- react-native-reanimated v3 support HOT 2
- Images rendering at lower resolution with SharedElement transition HOT 5
- Unable to run the example code, or use this module in my own app. Also, the sample code and /example code have different imports HOT 12
- Error: GestureDetector must be used as a descendant of GestureHandlerRootView HOT 1
- Swiping Transition HOT 2
- Remove unnecessary checks HOT 4
- Replace 2 loops by one HOT 1
- Example shared element transition HOT 2
- ^0.3.8 - Interactions not working into a modal component HOT 2
- ^0.3.8 Wrong positions when more than 1 image HOT 10
- Question: can I get access to current scale without use events?
- how to retrain actual image quality on zoom image
- Not working HOT 2
- Infinite list? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-awesome-gallery.