Comments (13)
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.
Now, you can use Ref
to close the modal programmatically.
Please update the react-native-image-modal
to v1.0.12
.
- import
useRef
- import
ImageDetail
type if you use typescript
react-native-image-modal/Example/App.tsx
Line 12 in b5257b1
- define
Ref
react-native-image-modal/Example/App.tsx
Line 34 in b5257b1
- assign
Ref
react-native-image-modal/Example/App.tsx
Line 190 in b5257b1
- close the modal by using
Ref
react-native-image-modal/Example/App.tsx
Line 202 in b5257b1
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.
react-native-image-modal/src/index.tsx
Lines 32 to 33 in 9cd10bc
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.
react-native-image-modal/Example/App.tsx
Lines 154 to 176 in 9cd10bc
Especially, here
react-native-image-modal/Example/App.tsx
Lines 163 to 175 in 9cd10bc
And you can use onClose
to close the modal programmatically.
Next
- Update the react-native-image-modal to v1.0.11
- Add the
hideCloseButton
option. - Add the custom component via
renderFooter
orrenderHeader
. - 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?
react-native-image-modal/Example/App.tsx
Lines 157 to 180 in 318eec7
Could you share your code?
Thanks
from react-native-image-modal.
Related Issues (20)
- android imageModal does not cover statusBar HOT 3
- Add modalRef open method HOT 4
- i can't interative with custom renderFooter HOT 1
- modalImageStyle doesn't works
- Change Request: replace react-native-fast-image by expo-image HOT 2
- question about performance HOT 1
- Bug when closing HOT 6
- New release 3.0.1 ? HOT 2
- Image is blurred when styled with width 0 and height 0 HOT 4
- Big images problem HOT 2
- Use auto height HOT 3
- modalImageResizeMode not working HOT 3
- Android Only - Images when opened are blurry HOT 1
- Add Dependabot
- Add Linter and GitHub actions
- Add test code
- Change husky and lint-staged to Lefthook
- Add CSpell to check typo
- Add Remark linter to check markdown files
- Add Stylelint
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-image-modal.