Closing the full modal about react-native-image-modal HOT 13 CLOSED

Hey! Thanks for getting back so quick!
By far this is the best library that fills all my other requirements.
I know i just have to call _close() in the ImageDetail file somehow so i could make a local copy of this and modify it a little but unfortunately i dont know shit about typescripts, so I'm stuck for now. :(

from react-native-image-modal.

This is my view requirement btw.
So i need to be able to close the full-screen view if the user clicks on any of the buttons i made on the bottom.

from react-native-image-modal.

I am so sorry to hear that you stuck in typescript 😭

And I got your point. it's very important that the user makes the custom close button.
So I'll add it asap 👍

from react-native-image-modal.

Hi @vrgimael ✋

Thanks for your opinions and for reporting the bug. 🙇‍♂️

I will add the ref and disabled props and I think it will solve the bug with scrolling.
You can disable and enable the opening model feature when the user scrolls the list. 🤔

I will add them asap! 🚀

Thanks

from react-native-image-modal.

@vrgimael

Now, you can use Ref to close the modal programmatically.

Please update the react-native-image-modal to v1.0.12.

1. import useRef
   

   react-native-image-modal/Example/App.tsx

   Line 1 in b5257b1

   import React, {useState, useRef} from 'react';

2. import ImageDetail type if you use typescript
   

   react-native-image-modal/Example/App.tsx

   Line 12 in b5257b1

   import ImageModal, {ImageDetail} from 'react-native-image-modal';

3. define Ref
   

   react-native-image-modal/Example/App.tsx

   Line 34 in b5257b1

   const element = useRef<ImageDetail>(null);

4. assign Ref
   

   react-native-image-modal/Example/App.tsx

   Line 190 in b5257b1

   modalRef={element}

5. close the modal by using Ref
   

   react-native-image-modal/Example/App.tsx

   Line 202 in b5257b1

   element.current?.close();

I hope you can solve the problem with this update!

Thanks

from react-native-image-modal.

Hi @KinanKazmi

First, Thanks for using this library.

Unfortunately, this library doesn't support closing the modal programmatically, now.

But I will try to add it!

from react-native-image-modal.

Thanks :)
Waiting for the update.

from react-native-image-modal.

I checked my source code, and I found that it actually has the customize feature.

I just forgot them. 😅
But it doesn't have a feature that hides the default closing button, so I added and you can use it on v1.0.11

Example

And I added the example about how to add the custom component with the close feature.

Especially, here

And you can use onClose to close the modal programmatically.

Next

1. Update the react-native-image-modal to v1.0.11
2. Add the hideCloseButton option.
3. Add the custom component via renderFooter or renderHeader.
4. Use the onClose function to close the modal programmatically.

I hope this can solve your issue.

Thanks

from react-native-image-modal.

It works! thanks a ton :)

by the way hideCloseButton doesn't hide the X.
But i want to keep it, so its not a problem for me
Cheers!

from react-native-image-modal.

by the way hideCloseButton doesn't hide the X.

Could you update the react-native-image-modal version(v1.0.11)?

But i want to keep it, so its not a problem for me

Great! 👍 I will close this issue.

Thanks

from react-native-image-modal.

Do you know if it would be difficult to simply add a ref so we could close the modal programatically? This would be even better as the modal might need to be closed according to other events, not only touches on the UI.

What I'm thinking is a glitch when you quickly flick through an image modal item on a flatlist and this triggers both momentum scroll and opening of the modal. As a result, the modal closes in the wrong position on the list (because it moved with momentum).

Any thoughts would be appreciated!

from react-native-image-modal.

I add a custom close button but I can't close the image

version "react-native-image-modal": "^2.0.4"

    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 41.46 MB / 16.00 GB
    Shell: 5.9 - /usr/local/bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/Downloads/GIT/app_frontend/node_modules/.bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    Watchman: 2022.09.12.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 29, 31, 32, 33
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-33 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0
    react-native: 0.70.1 => 0.70.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found```

from react-native-image-modal.

Hi, @artsztu27

Did you see the example?

Could you share your code?

Thanks

from react-native-image-modal.