pavelbabenko / react-native-awesome-gallery Goto Github PK
View Code? Open in Web Editor NEWPerformant, native-like, and well-customizable gallery for React Native.
License: MIT License
Performant, native-like, and well-customizable gallery for React Native.
License: MIT License
Hi there,
I have the strangest issue to open, first time for me.
On a single iOS device, when opening the gallery, we have a bigger and bigger left margin (or translationY) as we open the gallery to an initialIndex higher and higher:
React Native 0.70.6
Awesome gallery 0.3.5
OS: iOS only (no issue on android)
Device model: iPhone 8 plus, iOS 16.3.1,
The weirdest thing is that on another identicial phone model, identical app version and clean install, we don't have the issue at all.
So I'm fishing here as I didn't see a similar issue on this repo before, without a reproduction, to check wheter if you may have an idea about the issue.
"react-native-gesture-handler": "2.12.0",
"react-native-reanimated": "^2.17.0",
Take care,
Hello!
Thank you for the great library @pavelbabenko!
I really like the code inside and whole functionality, it works perfectly.
I would like to know: Do you have the possibility to implement a loop in Gallery?
I think it will be a great addition.
I also facing the issue when my single tap function calls even when I zoom in and zoom out.
Probably because of conflict PinchGestureHandler and TapGestureHandler between each other.
Can it be two separate actions?
Thanks!
Good day!
import Gallery from 'react-native-awesome-gallery';
import AwesomeGallery, { GalleryRef, RenderItemInfo, } from 'react-native-awesome-gallery';
To find out which import is correct, I tried to run the /example code but I am unable to do so. Upon running yarn install
and npx expo start
in the example folder, I receive
(node:47203) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:47203) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
ERROR in ../src/index.tsx 1:0-67
Module not found: Error: Can't resolve '@babel/runtime/helpers/defineProperty' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'
ERROR in ../src/index.tsx 1:67-132
Module not found: Error: Can't resolve '@babel/runtime/helpers/slicedToArray' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'
ERROR in ../src/index.tsx 1:132-217
Module not found: Error: Can't resolve '@babel/runtime/helpers/objectWithoutProperties' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'
ERROR in ../src/index.tsx:28
Module not found: Can't resolve 'react-native-redash'
26 | } from 'react-native-reanimated';
27 | import { Gesture, GestureDetector } from 'react-native-gesture-handler';
> 28 | import { useVector } from 'react-native-redash';
29 | import { clamp, withDecaySpring, withRubberBandClamp } from './utils';
30 |
31 | const rtl = I18nManager.isRTL;
web compiled with 4 errors
yarn add 'react-native-redash'
doesn't resolve the issue. Neither does resetting cache, deleting node_modules, deleting watchman cache, etc. The IOS render fails with errors from @babel/runtime in a similar fashion.
Has anybody encountered this?
{
"name": "Smilefie",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest ios"
},
"dependencies": {
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"install": "^0.13.0",
"react": "18.2.0",
"react-native": "0.72.3",
"react-native-app-info": "^0.0.6",
"react-native-awesome-gallery": "^0.3.6",
"react-native-camera": "^4.2.1",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.13.3",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.1",
"react-native-screens": "^3.24.0",
"react-native-vector-icons": "^10.0.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.9",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.7",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}
}
However, upon navigating to the AwesomeGallery screen in my app, we see a black screen and no logs to help triage the issue. Would anyone be able to help diagnose and solve this issue?
I will help raise a PR for issue (1) to maintain code consistency between readme.md and /example once we are able to confirm the correct import.
Thanks!
Hey @pavelbabenko
Thank you for a great library. I am happy, that you are maintaining this library and I can use this library in my project.
While I was developing, I noticed few things:
we can make a transition to the next item, once the image scale is greater than 1. I checked, how it looks like in the other apps (Twitter, WhatsApp, messenger )and the image scale needs to be 1 to go to the next page. When the image scale is greater than one (image is zoomed) it sticks to the edge (so offset is clamped to the 0, when the image touch the edge)
it would be nice to have a prop, which could block a vertical gesture when the scale of the image is 1 (when an image is not resized). I did it locally in my project so I could make a PR for that feature. Before I do it, please let me know, if you would like to handle it in your library.
I also implemented setPage
locally and it looks like below :
useImperativeHandle(ref, () => ({
setPage(index: number) {
setIndex(index);
currentIndex.value = index;
translateX.value = index * -(dimensions.width + emptySpaceWidth);
},
}));
ant then you can use it as follow:
galleryRef.current.setPage(index);
And I am not sure if it is a good solution. I was trying to move the below code to the parent component
const [index, setIndex] = useState(initialIndex);
But it did not work very well. Also, It would be nice to have this kind of functionality inside the library
WDYT about my propositions ?
First of all, thank you for developing such a nice library. But I am wondering if this will support dynamically changed data. Thanks!
It seems that react-native-redash
should be placed in dependencies
/peerDependencies
Here is my code:
const customRenderImage = ({item, setImageDimensions}) => { return ( <FastImage onLoad={e => { const {height: h, width: w} = e.nativeEvent.source; setImageDimensions({height: h, width: w}); }} source={{uri: item.uri}} resizeMode={FastImage.resizeMode.contain} style={StyleSheet.absoluteFillObject} /> ); };
My item looks like {
key = "bf9e684f-495e-4427-b170-82504a006eb7",
uri = "file://file:///Users/zijianzhang/Library/Developer/CoreSimulator/Devices/685BDAED-7EDA-4922-A082-56EA73788452/data/Containers/Data/Application/805F046E-2CAC-4C1B-9824-39B44CDB4EA3/tmp/IMG_0111.HEIC"}
Got error JSON value '{
key = "bf9e684f-495e-4427-b170-82504a006eb7";
uri = "file://file:///Users/zijianzhang/Library/Developer/CoreSimulator/Devices/685BDAED-7EDA-4922-A082-56EA73788452/data/Containers/Data/Application/805F046E-2CAC-4C1B-9824-39B44CDB4EA3/tmp/IMG_0111.HEIC";
}' of type NSMutableDictionary cannot be converted to NSString.
Even trying implement the same code as defaultRenderItem does not work and generate the same error. Is there anything I miss? Thank you!
I'm using a renderItem and I added description, but I wanna hide the text when scale is different to 1.
I'm using onScaleStart
and onScaleEnd
and its working, but when I trigger a doubleTap, I don´t have any way to validate inside this event that the scale is 1 or not.
I'm looking for a gallery component that supports all three platforms.
Problem description:
The example project does not build, when yarn ios
command ran
Solution:
callstack/react-native-builder-bob#144
Platform: iOS / Android
Version of react-native-awesome-gallery
: 0.2.0
Steps to reproduce: Pinch to zoom with 2 fingers. Try to move/drag image with two fingers or one finger.
Current behavour: Image will centered in the middle all the time when I use renderItem
prop, you can't move/drag it around while it zoomed. You can't view the top and bottom part of the image.
Expected behavoir: While zoomed in I can move the screen and view the top and bottom part of the image.
Thank you!
In the snapPoint
function we have two loops - that should find the minimum delta. This function looks good, but we can change it to one loop, with the same functionality.
From:
const deltas = points.map((p) => Math.abs(point - p));
const minDelta = Math.min.apply(null, deltas);
To:
let minDelta = Number.MAX_VALUE;
for (let i = 0; i < points.length; i++) {
const newDelta = Math.abs(point - points[i]);
if (newDelta < minDelta) {
minDelta = newDelta;
}
}
Hi! Thanks for this library. It works very well within our project. I've had a few requests from our product team to enable support for resetting transforms (scale) when certain user events occur, such as an orientation change.
It would be extremely helpful if there was a ref API or other mechanism for resetting transforms on demand.
Thanks for taking a look!
Hi, I like this library very much. One thing I'm missing is possibity to set index with animation. Something like in react-native-reanimated-carousel. It would be great to have such a feature.
While this is kind of hard to reproduce, it does happen. Looks like the library is having issues displaying an image after toggling between portrait and landscape while zoomed in. These are the reproduction steps that work consistently for me:
react-native-awesome-gallery
component with 2 or more imagesAny help would be greatly appreciated!
Hi,
While double tapping to zoom or pinch to zoom, on release the focal is being reset at the top part of the image. This happens on both Android and iOS using a 1920x1080 image.
[email protected] on Paper,
gesture [email protected]
[email protected]
[email protected]
The only solution I could find is to set the height on useVector:
const originalLayout = useVector(width, height);
const layout = useVector(width, height);
When height is set to 0, 1st tap on scarecrow, 2nd tap on pipboy, 3rd tap on chair resets the focal between scarecrow and pipboy:
When height is set from props everything is fine:
renderItem, I already know the image dimensions from image object:
const renderItem = ({
item,
setImageDimensions
}: RenderItemInfo<{
blurhash?: string;
height: number;
thumbnailSource: string;
url: string;
width: number;
}>) => {
return (
<CachedImage
blurhash={item.blurhash}
images={item.url}
onLoad={() => {
setImageDimensions({ width: item.width, height: item.height });
}}
resizeMode="contain"
style={StyleSheet.absoluteFillObject}
/>
);
};
When loading a Gallery with a single image, you are still able to swipe to a next image (which does not exist) and then breaks the navigator (unable to swipe back to the first and only image).
Both Tap and LongPress gestures have unnecessary checks. For example, tapGesture
is disabled when onTap
is not provided, so we can add a non-null assertion without checking its value. Similar for rest gestures.
Changes in the tapGesture
:
.onEnd(() => {
'worklet';
if (!isActive.value) return;
if (onTap && !interruptedScroll.value) {
runOnJS(onTap)();
}
interruptedScroll.value = false;
});
.onEnd(() => {
'worklet';
if (!isActive.value) return;
if (!interruptedScroll.value) {
runOnJS(onTap!)();
}
interruptedScroll.value = false;
});
In the doubleTapGesture
:
.onEnd(({ x, y, numberOfPointers }) => {
'worklet';
if (!isActive.value) return;
if (numberOfPointers !== 1) return;
if (onTap && interruptedScroll.value) {
interruptedScroll.value = false;
if (onTap) {
runOnJS(onTap)();
}
return;
}
if (onDoubleTap) {
runOnJS(onDoubleTap)();
}
.onEnd(({ x, y, numberOfPointers }) => {
'worklet';
if (!isActive.value) return;
if (numberOfPointers !== 1) return;
if (onTap && interruptedScroll.value) {
interruptedScroll.value = false;
runOnJS(onTap)();
return;
}
if (onDoubleTap) {
runOnJS(onDoubleTap)();
}
And in the longPress
:
const longPressGesture = Gesture.LongPress()
.enabled(!!onLongPress)
.maxDistance(10)
.onStart(() => {
'worklet';
if (interruptedScroll.value) {
interruptedScroll.value = false;
return;
}
if (onLongPress) {
runOnJS(onLongPress)();
}
});
const longPressGesture = Gesture.LongPress()
.enabled(!!onLongPress)
.maxDistance(10)
.onStart(() => {
'worklet';
if (interruptedScroll.value) {
interruptedScroll.value = false;
return;
}
runOnJS(onLongPress)();
});
Hello, thank you for this amazing gallery!
One thing that I've noticed is that when running the example that you provided, it doesn't seem to have shared element transition when opening and closing. Is there any example on shared element transition like in the gif that is on the main page of this repository?
Thank you for this library!
I am using the library for the image zoom feature and am thankful to the authors that they build it. But I am not able to get work "onSwipeToClose" event but all other events are working for me. I am using it as below. Any help will be appreciated thanks! @pavelbabenko @alantoa
<CustomModal isModalVisible={openZoomViewer} backdropOpacity={1}> <Gallery data={image} hideAdjacentImagesOnScaledImage={true} disableSwipeUp={true} renderItem={renderItem} onSwipeToClose={closeZoomViewer} onDoubleTap={closeZoomViewer} onIndexChange={(newIndex) => { console.log(newIndex); }} style={{ alignSelf: 'center' }} /> </CustomModal>
Hey!
First, thanks for your work, it seems to be an awesome library.
I'm working on an react native application (0.72.x) and I need to use your "Gallery" or "AwesomeGallery" into a modal, but I can't do any interactions on it.
I'm using react native gesture handler ^2.11.0, and react native reanimated ^3.6.1, and I can say that's animated component works on my custom modal, but not on your component.
I tried to copy/paste your example, but It's the same.
The head of my custom modal component:
<Modal
animationType="none"
transparent={true}
visible={visible}
onDismiss={onPressToCloseModal}
style={{width: '100%', flex: 1}}
>
<Pressable
testID="modal_overlay"
onPress={onPressToCloseModal}
style={styles.wrapper}
>
<MotiView
state={animationState}
from={{translateY: height}}
onDidAnimate={closeOnDidAnimate}
style={[styles.wrapper, {backgroundColor: 'transparent'}]}
>
<Pressable
onLayout={onLayoutModalContent}
style={styles.container}
>
{children}
</Pressable>
</MotiView>
</Pressable>
</Modal>
There isn't any position absolute or anything related to position.
Any fix about this one ?
Thanks!
Inside Modal its not working
Please kindly help
you can not move up or down in really tall images, its like the spring animation does not allow you to do.
Hello, this package is awesome. ı want to add opacity transition while swipe to close. ı tried something but the changes ı made doesn't affect the code. How can ı modify the package code ?
I'm using the following dependencies:
"dependencies": {
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-awesome-gallery": "0.3.5",
"react-native-gesture-handler": "^2.4.1",
"react-native-reanimated": "^2.8.0"
},
Once an image is removed from the array, gestures stop being recognised. If you change the removed image position from 0 to say 2, it only locks up when you scroll to index 2 in the image array.
Seems to be a reoccurrence of #19.
import React, {useState} from 'react';
import {Button, View} from 'react-native';
import AwesomeGallery from 'react-native-awesome-gallery';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
const IMAGE_DATA = [
'https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg',
'https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262__340.jpg',
'https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782__340.jpg',
'https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__340.jpg',
];
const App = () => {
const [images, setImages] = useState(IMAGE_DATA);
const removeImage = () => {
setImages(i => i.slice(1));
};
return (
<GestureHandlerRootView style={{flex: 1, backgroundColor: 'red'}}>
<AwesomeGallery
data={images}
keyExtractor={(item, index) => item}
doubleTapInterval={150}
onTap={() => console.log('tap')}
/>
<View style={{position: 'absolute', top: 0, left: 0}}>
<Button onPress={removeImage} title="REMOVE"></Button>
</View>
</GestureHandlerRootView>
);
};
export default App;
Hey, thanks for a great package. Do you plan to support react-native-reanimated v3? Currently, npm install fails because of ^2.x.x
in peer dependencies.
Hi,
What an awesome component you've built!
I've noticed that the old API of react-native-gesture-handler
is still being used.
Do you plan on updating to v2?
Thanks!
This gallery supports zoom which is fantastic and encourages loading large resolution images.
When the images are preloading after gallery opens, there is no indication that the gallery actually opened leading to poor user experience.
It would be great if we could inject a "loading" component.
That do you think please? Thanks!
Hey again!
I'm not using expo image, I don't know if it can be related, but when I've got more than 1 image into my data, it's not showing correctly the gallery content.
My component:
<GestureHandlerRootView>
<AwesomeGallery
data={form.images.map(image => {
return {
uri: `data:image/png;base64,${fromByteArray(
image
)}`,
}
})}
keyExtractor={item => item.uri}
renderItem={renderItem}
initialIndex={0}
numToRender={3}
doubleTapInterval={150}
onIndexChange={() => {
//
}}
onSwipeToClose={() => {
//
setShowGallery(false)
}}
onTap={() => {
//
}}
loop
onScaleEnd={scale => {
if (scale < 0.8) {
//
}
}}
/>
</GestureHandlerRootView>
I'm using the same boilerplate as the example provided, tried a lot of params (played with loop, numToRender, onLoadEnd, onLoad, and more) but same result.
But it's working perfectly when there is only 1 image.
I'm probably missing something, I'm sorry about it...
Have a nice day!
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>
I'm binding onTap this method, when zoom in on the long pic, tap while scrolling, the onTap event is triggered by the scroll event.
<AwesomeGallery
data={params?.images.map((uri) => ({ uri }))}
keyExtractor={(_, i) => `${i}`}
renderItem={({ index, item, setImageDimensions }) =>
renderItem({ index, item, setImageDimensions })
}
initialIndex={params.index}
onIndexChange={onIndexChange}
onSwipeToClose={goBack}
onTap={goBack}
/>
Turn off the onTap event in the scrool event?
(or)
Stop scrolling when tap?
�
Hi, first of all, thanks for making the library, it's very handy.
I'm using 0.3.4, unfortunately tap and double tap gestures are not firing on either iOS or Android.
Example code:
<Gallery
disableTransitionOnScaledImage
ref={galleryRef}
data={images}
onDoubleTap={() => {
//doesn't work
console.log('double tap');
}}
onTap={() => {
//doesn't work
console.log('tap');
}}
onScaleChange={() => {
//works
console.log('scale');
}}
/>
We are working on responsive app that supports different layouts for mobiles and tablets and portrait/landscape orientations. On iPads we present gallery in a native navigation modal, which is not a full screen size, so we have to use onLayout
callback of gallery container and containerDimensions
property:
containerDimensions={{ width: layout.width, height: layout.height }}
This results in incorrect behaviour when containerDimensions changes, for example when changing orientation. I looked around in source code and was able to fix it by simply adding dimensions.width
to useEffect dependencies:
useEffect(() => {
translateX.value = index * -(dimensions.width + emptySpaceWidth);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [windowDimensions, dimensions.width]);
useEffect(() => {
if (index >= data.length) {
const newIndex = data.length - 1;
setIndex(newIndex);
currentIndex.value = newIndex;
translateX.value = newIndex * -(dimensions.width + emptySpaceWidth);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data?.length, dimensions.width]);
So it looks like it is just missing dependencies, but I was wondering why it specifically has eslint-disable-next-line react-hooks/exhaustive-deps rule which would have helped to avoid the issue in the first place.
i
have hd image like size is 1 to 2 mb but on zooming its not visible clear how can i retreive actual image quality but in web its showing actual image quality on zoom
my code:-
import React, {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import Gallery from 'react-native-awesome-gallery';
const SpeechToTextComponent = () => {
const [index, setIndex] = useState(0);
const images = [
'https://d22pqt2na9k0l.cloudfront.net/image/2023/11/11/kka/kol/08/10nov23_pk_kka_kol_8_r1_20231116062003.jpg',
'https://d22pqt2na9k0l.cloudfront.net/image/2023/11/11/kka/kol/08/10nov23_pk_kka_kol_8_r1_20231116062003.jpg',
'https://d22pqt2na9k0l.cloudfront.net/image/2023/11/11/kka/kol/08/10nov23_pk_kka_kol_8_r1_20231116062003.jpg',
'https://d22pqt2na9k0l.cloudfront.net/image/2023/11/11/kka/kol/08/10nov23_pk_kka_kol_8_r1_20231116062003.jpg',
];
const [scale, setScale] = useState(1); // Initial scale
const handleScaleChange = newScale => {
console.log("newScale", newScale);
// Update the scale state
setScale(newScale);
};
return (
<View>
{/* <PrabhatKharbharLogoForLightMode height={130} width={270}/> */}
<Gallery
data={images}
onIndexChange={newIndex => {
console.log(newIndex);
setIndex(newIndex);
}}
key={index?.toString()}
disableTransitionOnScaledImage={true}
hideAdjacentImagesOnScaledImage={true}
onScaleChangeRange={({scale, width, height}) => {
// Adjust width and height according to scale
const adjustedWidth = width * scale;
const adjustedHeight = height * scale;
return {width: adjustedWidth, height: adjustedHeight};
}}
/>
</View>
);
};
export default SpeechToTextComponent;
When performing any gesture to change the image scale, the image seems to always center itself horizontally after the gesture has ended. This is fine when scaling the image to be smaller than the container (scale < 1
), but should not be happening when zooming in (scale > 1
).
Right now this causes the "focus" to shift away from the point that was zoomed into after ending the gesture. For me this issue is happening on Android using the package versions listed below, I was not yet able to test it on an iOS device.
export const ImageScreen = () => {
const source = 'https://homepages.cae.wisc.edu/~ece533/images/cat.png';
return <Gallery data={[source]} />;
}
react-native
: 0.64.0react-native-gesture-handler
: 1.10.3react-native-reanimated
: 2.1.0react-native-awesome-gallery
: 0.1.0 (also on 0.0.9)The description of the library says that it supports an "Infinite list", but I can't figure out how to achieve that.
May someone explain, please?
Platform: Android
Version of react-native
: 0.64.1
Version of react-native-awesome-gallery
: 0.2.2
Steps to reproduce:
Current behavior: Scroll offset for the current "page" is incorrect, rendering multiple gallery items at once. Manually gesturing a swipe will recover the offset.
Expected behavior: Scroll offsets will update and maintain page positions based on the updated screen width/height after an orientation change.
This bug only occurs on Android. iOS behaves as expected.
Thanks for the great library.
Resizable
image could be exposed in a reusable way.Hello! Great work on this library, it's really helping me out a lot!
I have a problem/question, and I'm not sure if it's just my implementation or a limitation of the library.
It seems like images rendered in the gallery are low resolution.
I am using shared element transitions to do something like this:
Feed.tsx
<SharedElement id={`${href}`}>
<MemoizedImage source={href} />
</SharedElement>
Gallery.tsx
const renderItem = ({
item,
setImageDimensions,
}: RenderItemInfo<string>) => {
return (
<SharedElement id={`${item.href}`} style={StyleSheet.absoluteFillObject}>
<Image
source={item.href}
contentFit="contain"
contentPosition="center"
priority="high"
style={{StyleSheet.absoluteFillObject}}
onLoad={(e: ImageLoadEventData) => {
setImageDimensions({
width,
height,
});
}}
/>
</SharedElement>
);
};
export default function ImageScreen(props: ImageScreenProps) {
const { goBack } = props.navigation;
const { params } = props.route;
const gallery = useRef<GalleryRef>(null);
const data = useMemo(() => [params], [params]);
return (
<AwesomeGallery
ref={gallery}
data={data}
renderItem={renderItem}
doubleTapInterval={150}
onSwipeToClose={goBack}
coverScreen={true}
/>
);
}
so, Feed
renders small image thumbnails, and when you click on those thumbnails, it's transitioned to a full-screen modal-like view with AwesomeGallery
.
my MemoizedImage
is a wrapper around Expo-Image. When the image loads, I calculate a "scaled down" size for it (to render it in a post feed at thumbnail dimensions). i.e: if an image is 1000x1000px
, I render it at 200x200px
, for example.
However, when in the Gallery
view, the image is the same resolution as the thumbnail - 200px
- and so zooming in on the image, you do not see much detail.
Any tips on how I can fix this? I'd like the full-sized image in the "Gallery" view.
Error: GestureDetector must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.
"react-native-gesture-handler": "~2.12.0",
Hey, i'm considering using this package in my project. I need to display a carousel of images, with swiping left/right and pinching for zooming.
I already have the actual gallery, using FlashList because i need it to be masonry-style.
So i was wondering if i can open the carousel view of this package directly by clicking an item in my masonry gallery.
btw the package seems nice! Good work.
Hello, thanks for the lib
I gave it a try on and ios and android (version 10) devices and I'd like to report that while it works nice on ios, it does not work on Android.
The issue can be reproduced with the readme sample.
On Android, double-tapping to zoom works, but swiping horizontally to change pictures does not work, and pinch to zoom does not work either.
using RN 64 stable and reanimated 2
Maybe this should be mentioned in the readme. Thanks!
Hi, when I try to delete one of the image in the data array, I am still able to swipe to that index and it is black page. It froze then. I am guessing it is because the length of the array is not updated, any fix? Thanks!
Sometimes it will work when slightly moving into the previous direction first. Sometimes I won't be responsive to anything.
https://user-images.githubusercontent.com/8146736/120997922-e3b90d00-c787-11eb-8910-6662119bc08b.mp4
Hi there,
thanks for this package.
when using SET on this library after navigation to new screen and sliding about 4 to 5 images, the shared image stuck on top.
here is repro:
https://snack.expo.dev/@arasrezaie/github.com-pavelbabenko-react-native-awesome-gallery:example
there's no other way for contacting you @pavelbabenko
but I wanted to Thank you for being a very important part of memos which is a cloud storage for storing your best photos/videos, I started implementing the Gallery from scratch and after 4 days I slowly realized that It was a heavy task to handle gestures for swiping, zooming, pinching and momentum when moving while zooming all together without having huge performance issues. and that library was a really good abstraction that gave me the ability for adding other functionalities like time, share, set as album cover, delete, download and custom video player.
Links:
Repo
Google Play Store
Is there a way to set the scale and position when the image is done loading?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.