dev-yakuza/react-native-image-modal

the simple image modal for React Native

Hi there 👋

react-native-image-modal's Issues

MemoryLeak in flatList

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

Add CSpell to check typo

• Add CSpell
• Add it to GitHub Actions.

Custom Close Button Component

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

ResizeMode for Modal Image

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?

Quickly flicking on a modal item on list causes momentum zoom glitch

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)

android imageModal does not cover statusBar

please help:

Fast Image 버그로 인한 Issue

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

Image in modal is blur in Android

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

Can it do picture carousel

Very necessary

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

[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?).

i can't interative with custom renderFooter

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

about image style size and resizeMode

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?

.

can't load a big image

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

size 963kb

can't load..

How can I do?

Almost there

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!!

Animation problem on Expo

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!

[Android] Malformed calls from JS: field sizes are different

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

Image orientation

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.

Change Request: replace react-native-fast-image by expo-image

Open modal programmatically

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

Image not rendering?

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:

Add modalRef open method

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

Use auto height

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.

RTL Support

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!

modalImageStyle doesn't works

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

Styling issue for model image

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.

Add Remark linter to check markdown files

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/

Origin Image Border Radius

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.

Malformed calls from JS: field sizes are different

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

Add Stylelint

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

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

Add Linter and GitHub actions

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

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

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.

Add test code

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

is possible to fix border radius

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

check this video

is possible to implement border radius more smoothly

Cannot interact with renderHeader and renderFooter

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

)}
/>

Zoom under fingers

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.

modalImageResizeMode not working

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}} />

question about performance

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

Android Only - Images when opened are blurry

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

Change husky and lint-staged to Lefthook

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

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

Multiple image slider

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

Animated node with tag *** does not exists

On Android.
iOS is working fine.

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

Invariant Violation: Tried to register two views with the same name FastImageView

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

Add Dependabot

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

OnClose animation on Adnroid is not smooth

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

Closing the full modal

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 ?