dev-yakuza / react-native-image-modal Goto Github PK

Hi, first of all library is great and works smooth.
Now I cam across an issue in the scenario where origin image is round (has border radius) so model image opens complete and in square or rectangle form that's fine too, but when its closing with animation of square and when it reaches origin we see a jerk where model small size image is rectangle and then origin comes with border radius.
For the time being I applied borderRadius to modelImageStyle and it now closes with circle so removes that jerk but issue is that model image now has border radius, attaching ScreenShot for reference.

Fast Image View에 버그가 존재합니다.
따라서 해당 문제를 해결할 방법이 필요합니다.
관련 버그 : DylanVann/react-native-fast-image#623

RN version: 0.63.2
react-native-image-modal version: ^1.0.16

Hi! I'm having this issue only in Android when I press in the image and try to open the modal

And in console the error says:

It's only happening on Android, in iOS works fine. Do you know why it could be? Thanks

Very necessary

On Android.
iOS is working fine.

react-native-image-modal: 2.0
react-native: 0.63
react-native-fast-image: 8.3.4

Hello @dev-yakuza ,

I have a list of images implemented in your library to make posts and in this line I get a memory leak that ends up making the app work badly. I've been trying to fix it and haven't been able to.

https://github.com/dev-yakuza/react-native-image-modal/blob/develop/src/index.tsx#L149

When closing, the image overlaps other blocks from the top and bottom. How can I fix this behavior? I have attached a video.

Is there a way to support custom component for the close button? It would be a nice feature.

• Add CSpell
• Add it to GitHub Actions.

There is no test code. Let's try to add test code.

[2787,"RCTView",1,{"renderToHardwareTextureAndroid":true,"left":"<>","top":"<>","width":"<>","height":"<>","transform":[{"scale":1},{"translateX":0},{"translateY":0}]}] is not usable as a native method argument

Crashes on android (simulator only?).

This is a very nice library but, unfortunately, it has a bug in right-to-left (RTL) devices. This is my scenario:

1. Device language is Arabic (RTL).
2. I have tow images side by side.
3. If I open the left image then close the ImageModal, the image animates to the right spot then adjusts itself to the correct position (left spot), which is funny. The opposite happens when opening and closing the right image. What I expect is closing the modal of any of the images should animate to the correct position.

I would really love to have a solution for this issue as soon as possible. Any quick workaround is also appreciated.

Thanks for this great library!

when styling with
style={{ width: 0, height: 0 }}
The first time I open it, the image will be blurry. The second time I open it, it will display normally. Please help me.
@dev-yakuza

When any image is opened, the quality of the image drops. The image is blurry and doesnt appear right. Currently this issue is only on android, is this being faced by anyone else as well?

• Using latest version of the package
• React native version 0.63.4

Description

Hi there! I am using this package inside my app project. The function is working perfectly inside iOS, while in Android the image is blurred inside the modal when I click the image and open it. Does anyone encounter this issue? How do you solve it? Appreciate any help or suggestion.

Background

Working or not:

✅ iOS simulators
✅ iOS real devices
❌ Android emulators
❌ Android real devices

Codes

<ImageModal resizeMode="contain" source={{ uri: imageUrl }} style={{ height: 100, width: 100 }} />

package.json

...
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-fast-image": "8.3.4",
"react-native-image-modal": "2.0.3",
...

The screenshot

I have this same issue #5, it only happens on Android. I tested on a physical device.

I'm using Expo 36, react-native 0.61 and react-native-image-modal: 1.0.1

I think it's better to use Lefthook instead of husky and lint-staged.

• Ref: https://dev-yakuza.posstree.com/en/linter/lefthook/

I'm trying to use TouchableOpacity of react-native-gesture-handler and the onPress function never work.

With react-native button works, but i need the other component.

i'm using:

• React Native 0.68.1
• react-native-image-modal 2.0.4
• react-native-gesture-handler 2.4.1

I am going to make 40x40 image.

<ImageModal style={{width: 40, height: 40}} />

However, if do this, the quality of the picture becomes extremely poor in modal image like a forced extension of a 40x40 image.

• Can the original image size be 40x40 while maintaining the quality of the modal image?
• And can I set the reziseMode props of the original image and the modal image differently?

Hey, I really like this library and I am currently using it in my react native application.

The thing I want to achieve is to have my Viewable Image with resizeMode cover while the Image Modal to have a different resizeMode, like contain.

is there any possible way to achieve this?

https://image.bada.io/files//crawling/2020/05/13/bhu/47147762_16fab2ff86b1307e9.jpg

size 963kb

can't load..

How can I do?

Right now, the zoom works quite well but can feel counter intuitive when zooming at details not in the image's center.

Desired behavior:
When using pinch-to-zoom, zoom under fingers and allow image panning while holding with two fingers.

Current behavior:
When using pinch-to-zoom, the image zooms at the center of the screen, which is not necessarily where the user has its fingers.

I can't open programmatically, I see close function only, is it possible to add open function too?

For checking new versions of libraries, it's good choice to add the Dependabot.

• Document: https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates

To check PR automatically, Adding Linters(like ESLint) to GitHub Actions is needed.

How do i programmatically close the full screen view without having to tap the X ?
<ImageModal ref = {ref => this.previewBox = ref}...
this.previewBox.close() or something ?

Is it possible to open the modal programmatically, like on clicking a button?

hello guys,

my code:
<ImageModal
resizeMode="cover"
modalImageResizeMode="contain"
overlayBackgroundColor={colors.black}
imageBackgroundColor={colors.primary}
style={{ width: 45, height: 45 }}
modalImageStyle={{ width: 800, height: 800 }}
source={
uri
? { uri: uri }
: require('@assets/images/without-user-profile.jpeg')
}
onLoad={() => setShowShimmer(true)}
/>

what's happening:
my image has 45px of width and height when is outside modal, when I click at the image, it does not open with 800px like I put in modalImageStyle, it continues with 45px, but stretched

I think checking README.md file by Remark lint is good for the clean documents.

• Ref: https://dev-yakuza.posstree.com/en/linter/remark-lint/

Basically, when you have a react-native-image-modal item on a flatlist, there is always the risk that the user would scroll so fast it's almost tapping, and this triggers both opening of the modal, and momentum scrolling of the list.

As a result the item animates back to the wrong position on the list because the list moved while it was fullscreen.

A potentially easy workaround could be exposing a modal close method so the modal could be dismissed when the list scrolls - ideally it wouldn't register both tap and scroll events at the same time (not sure why this happens)

OnClose animation on Adnroid is not smooth. When closing the modal, the close ending position in android device few pixel higher than real location. @dev-yakuza

When can we expect a release on the issue? (#249)
Current version 3.0.0...

Big images continue to show a black screen when clicked on.

My example image is 2 megabytes.
Is there a solution to this?

<FlatList data={item.Fotograflar} horizontal={true} contentContainerStyle={{ gap: 10}} renderItem={(subItem) => { return <ImageModal key={subItem.index} resizeMode='contain' imageBackgroundColor="#000000" style={{ width: imageWidth, height: 300, borderRadius: 10, zIndex: 1, alignSelf: 'center', }} source={{ uri: subItem.item.replace("wwwroot", serverConstants.API_URL).replace(/\\/g, "/") }} /> }} keyExtractor={(subItem, index) => index.toString()} />

I started using your lib and it works perfectly on bare react native.

Sadly, I need to use expo and I found a small bug: When closing the modal, the animation stops a few pixels below the starting point, freezes there a few milliseconds, and teleports to its original position.

See the following GIF:

Steps to reproduce:

• Start a new expo project with expo init
• Copy the code from the example and paste it in your new project App.js (removing jsx related anotations if needed).
• Start the project on emulator or real device with expo start

The same code works perfectly on the same emulator when using only react native and not expo.

Hope you will be able to find a fix!

Hello,

• ERROR Invariant Violation: Tried to register two views with the same name FastImageView
• ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
• ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

i have installed fastimage package with latest version,
and then today i try this package, starting metro as usual and it goes to error

First, thank you for this repo! A few things I've noticed:

1.- When you tap the image, it flickers first
2.- The pinch-to-zoom is still a bit buggy
3.- I'd like to be able to adjust the speed - and perhaps the easing - when you release the image

My goal is to try and replicate the behavior that you get on Apple News. So yes, you're almost there!!

I can't click on Tounchopacity
instead of clicking tounchopacity it is zoomed
<ImageModal
isTranslucent={false}
resizeMode="contain"
imageBackgroundColor={COLORS.background}
overlayBackgroundColor="rgba(0,0,0,0.3)"
source={item.picture_url}
renderFooter={(onClose) => (
<TouchableOpacity
onPress={onClose}
style={{
backgroundColor: '#FFFFFF',
height: 100,
justifyContent: 'center',
alignItems: 'center',
}}>
CloseButton

)}
/>

Hey, tried to use this lib, seemed exactly what I need... but for some reason it is not loading the image...

Here is my code:

<ImageModal
    resizeMode="contain"
    imageBackgroundColor="#000000"
    style={{
     height: 300, borderRadius: 15
}}
    source={{
        uri: converted,
    }}
/>
                                            <Image style={{
                                                    height: 300, borderRadius: 15
                                                }}
                                                source={{
                                                    uri: converted,
                                                }}/> 

Result:

Warning: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

This warning was displayed when i updated expo to version 38.0.0

"expo": "^38.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
"react-native-image-modal": "^1.0.8",

It still works, but it would be nice to fix it. This parameter must have become required in the most recent version of react native.

Image opened in potrait mode does not change to landscape when device rotated.it is locked in potrait mode.

Current behaviour: image clicked in potrait mode take full screen.it remains in potrait even device is rotated.

Expected behaviour: image rotate with the device rotation.

Hi, do you ever test the performance, because i saw each image = (animatedview + modal), it's required more view hierarchy structure.

I have large list of image, display as GridView, if I used react-native-image-modal, does it's took a lot of performance in my situation? Thanks

Hi, I am trying to use modalImageResizeMode, but it doesn't work. It copies the behavior of resizeMode. I believe it's because I am using expo. Do you have any plans to fix it for expo? Thank you.
Here is my code
<ImageModal resizeMode="cover" modalImageResizeMode="contain" imageBackgroundColor="#000000" style={{ width: width, height: 250, }} source={{uri: file.item.path}} />

Let's add Stylelint to check the CSS-in-JS styles.

• Ref: https://dev-yakuza.posstree.com/en/linter/stylelint/

Hi there. How would we go about adding a border radius to the origin image? Seems like something with the background is preventing the entire component from inheriting the radius.

The zoom functionality works flawlessly and much better compared to other image slider libraries available out there

Can you please add the functionality of multiple images

https://drive.google.com/file/d/1SbUa-gSHwUzzOauQY89J5Xdr7QtDGG7a/view?usp=sharing

check this video

is possible to implement border radius more smoothly

please help:

Hello @dev-yakuza,

Is there an option or what is the best way to use auto height ?
We want to show the image at 100% width with height based on the image.