Simple way to create a pop-up window with react-native?
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
- Use an
Alertwindow and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area. - Using some promising-looking component which is very beta like
react-native-popupwindowis not really an option either. - Use a
modalcomponent which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option. - However, some people say that you should rather use
Overlayand use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
- Transparent overlay in React Native
react-native react-native-android react-native-ios
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
add a comment |
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
- Use an
Alertwindow and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area. - Using some promising-looking component which is very beta like
react-native-popupwindowis not really an option either. - Use a
modalcomponent which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option. - However, some people say that you should rather use
Overlayand use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
- Transparent overlay in React Native
react-native react-native-android react-native-ios
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
1
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02
add a comment |
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
- Use an
Alertwindow and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area. - Using some promising-looking component which is very beta like
react-native-popupwindowis not really an option either. - Use a
modalcomponent which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option. - However, some people say that you should rather use
Overlayand use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
- Transparent overlay in React Native
react-native react-native-android react-native-ios
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
The goal is a simple and clean implementation to build a pop-up window similar to the search-filters from the YouTube-App, see picture. Tapping on the half-transparent border should close the pop-up. The same pop-up is supposed to be called from several screens (within nested navigation-structures) and just give back the choices to the respective screen.
I did quite some search and documentation reading, so I seem to have the following four options:
- Use an
Alertwindow and heavily modifying the alert message, but this option does not allow me to cancel by clicking on the transparent area. - Using some promising-looking component which is very beta like
react-native-popupwindowis not really an option either. - Use a
modalcomponent which claims to be a simple way to present content above an enclosing view. According to How to dim a background in react native modal? and Tap outside of modal to close modal (react-native-modal)" this seems to be a possible option. - However, some people say that you should rather use
Overlayand use Modal only as a last resort.
Please advice which of the solutions you tested in real life. What do you suggest? Maybe there is even an easier solution?
Related question(s) here on StackOverflow:
- Transparent overlay in React Native
react-native react-native-android react-native-ios
react-native react-native-android react-native-ios
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
edited Nov 23 '18 at 12:50
B--rian
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
asked Nov 23 '18 at 12:42
B--rianB--rian
137220
137220
1
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02
add a comment |
1
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02
1
1
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02
add a comment |
2 Answers
2
active
oldest
votes
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
add a comment |
I am using very good alternative.
npm i react-native-easypopup
You can try and let me know if it helps.
answered Feb 9 at 5:53
skwjdhskwjdh
113
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446933%2fsimple-way-to-create-a-pop-up-window-with-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
add a comment |
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
add a comment |
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
Modal is totally your way to go.
My personal choice would be https://github.com/react-native-community/react-native-modal which has the best performances and flexibility overall.
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
answered Nov 23 '18 at 22:21
Hugo LaplaceHugo Laplace
1669
1669
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
add a comment |
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
1
1
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
I don't know why to use a library and make your app heavy when you can easily implement this with simple several lines of code.
– Samitha Nanayakkara
Nov 24 '18 at 16:12
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
Again, it has better performances and more features included. It is part of the well-known react-native-community libraries.
– Hugo Laplace
Nov 24 '18 at 17:04
1
1
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
I have no doubt about react native community libraries. But for such a small use of modal, why should you use a feature rich library?
– Samitha Nanayakkara
Nov 24 '18 at 17:06
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
It seems always good to show an exhaustive solution, according to me !
– Hugo Laplace
Nov 24 '18 at 17:08
add a comment |
I am using very good alternative.
npm i react-native-easypopup
You can try and let me know if it helps.
answered Feb 9 at 5:53
skwjdhskwjdh
113
add a comment |
I am using very good alternative.
npm i react-native-easypopup
You can try and let me know if it helps.
answered Feb 9 at 5:53
skwjdhskwjdh
113
add a comment |
I am using very good alternative.
npm i react-native-easypopup
You can try and let me know if it helps.
answered Feb 9 at 5:53
skwjdhskwjdh
113
I am using very good alternative.
npm i react-native-easypopup
You can try and let me know if it helps.
answered Feb 9 at 5:53
skwjdhskwjdh
113
answered Feb 9 at 5:53
skwjdhskwjdh
113
answered Feb 9 at 5:53
skwjdhskwjdh
113
answered Feb 9 at 5:53
skwjdhskwjdh
113
113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446933%2fsimple-way-to-create-a-pop-up-window-with-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Seriously you can use a modal for this purpose. It is really easy and can implement what you want without any problem. Also can call it using redux and with dynamic content.
– Samitha Nanayakkara
Nov 23 '18 at 14:15
@SamithaNanayakkara Thanks for the hint, I am still curious on comments on the other options.
– B--rian
Nov 23 '18 at 15:02