Comments (11)
I really wouldn't use RN's <Modal>
component unless you are building a hybrid application and you need to grab the full screen. It works outside React Navigation's awareness of screen presentation, and is likely to result in strange bugs when working with this library.
@yaronlevi, What would this alternate modal style look like? We can either get one added to the library if it is a super standard component across several platforms- (please provide references!). Or we can add a way for you to customize the appearance of a standard modal stack.
from react-navigation.
IMO there is an usecase using a screen modal would be better than RN's <Modal>
. I have an app which has many screens. Each screen has many <TextInput>
sending request to the API and getting responses. Everytime they get responses, I would like to show a popup in case the <TextInput>
data is invalid and some error messages. Instead of rendering RN's <Modal />
every screen, I'd love calling a modal screen.
this is an example about style: http://browniefed.com/blog/react-native-easy-overlay-modal-with-navigator/
from react-navigation.
The standard Modal
in React Native works fine here.
from react-navigation.
I think android support for the vertical modal animation makes a lot of sense for consistency between your app, regardless of what platform it's on. When you want to make something that feels more like a modal and breaks the horizontal flow of your stack navigator, you slide up, regardless of platform.
Is there a technical reason behind why this isn't possible or is it about preserving what's typical on Android? I thought the underlying animation library abstracted this stuff so it's the same code on both platforms??
Also, who really follows all these style guides anyway? Most great apps are completely custom. For example, who makes apps for iOS that are white, gray and blue, besides Apple.
from react-navigation.
And also forgot to mention that React Navigation looks like an amazing works, and it is the missing piece we've been all waiting for (-:
(+ the website and docs are top notch)
from react-navigation.
Ok, I also see that StackNavigatorConfig has a 'modal' mode. And it also states that android is currently not supported. Are there any plans on supporting it on android?
from react-navigation.
I have no idea on that, but you can simply use the standard React Native Modal
in a screen as follows. Supported in both iOS and Android.
<Modal
animationType="slide"
visible={this.state.visible || somethingElse}
>
<Text>Hello World</Text>
</Modal>
This should slide over other content in the component. I've done this inside a TabNavigation earlier today and it works just fine.
from react-navigation.
@ericvicenti Are you aware of any particular reason why the same modal animation as the one used for iOS can't be exposed? Unless I'm mistaken, it seems that implementing a slide up/down animation on Android (triggered by setting mode
to modal
) would do the job.
As for the look and feel, this demo from Material design's official guidelines looks good to me :-)
from react-navigation.
I see that it likely is possible on Android:
So can't it just be at the user's discretion whether he uses react-navigation
to create an iOS style modal on Android, rather than force everyone to have to go make a dialog just for Android.
Another idea is to export the TransitionConfigs, which my view is that should be done in addition. As it is, unless I'm mistaken, you can't get access to the different configs, as it's not exported
but if you could, you could just set the transitionConfig
of the StackNavigatorConfig
to whatever you want. I played with the interpolation options with the old RN Navigator
and came up with some nice stuff. So it would be nice to get access to this and as well as the things like CardStackStyleInterpolator. That way we can all make our own.
Lastly, the next step I see is allowing you to specifying transitionConfig
and mode
in the screenOptions
, i.e. per screen. Are these things the maintainers want?
- per screen options:
mode
,transitionConfig
- exported animation tools:
CardStackStyleInterpolator
,TransitionConfigs
, etc - modal option for Android
from react-navigation.
Pinging OP @yaronlevi since this issue is quite old and related to an old version of the lib. If no answer I'll close in 7 days.
from react-navigation.
Hi there @yaronlevi,
In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.
If you are still having the issue (especially if it's a bug report) please open a new issue that uses the new Issue Template to provide some more details to help us solve it.
from react-navigation.
Related Issues (20)
- Header height not getting calculated in pageY value for components in new architecture HOT 3
- Incorrect pageY value when only using default header of react navigation stack in new architecture HOT 3
- v7 Navigating back randomly causes NAVIGATE action to be dispatched instead of GO_BACK HOT 2
- Possible EventEmitter memory leak detected HOT 1
- Pressable interaction issue with StackNavigator on iPhone Xs + new architecture HOT 8
- 7.0.0-alpha.15 @react-navigation/material-top-tabs - tabBarIcons are not showing. HOT 4
- Adjust the margin of the bottom menu bar HOT 3
- DRAWER ENCERRA O APLICATIVO HOT 10
- Sometimes duplicate tab bar labels appear in bottom tabs HOT 1
- unmountOnBlur shows white screen randomly when switchint tabs HOT 2
- useHeaderHeight changes several times when orientation changes HOT 3
- Navigate into page, increase RAM, navigate back and RAM stays high HOT 1
- When using frosted glass stack to jump in Android mode, ReactNavigation will experience lag and frosted glass will reset HOT 5
- Weird transition in navigation HOT 2
- Invariant Violation: requireNativeComponent: "RNSModalScreen" was not found in the UIManager. HOT 15
- [Bridgeless] [RN 0.74] Event cannot be both direct and bubbling: topFocus HOT 4
- Strange flicker when you scroll up a modal with NativeStack in iOS
- Ripple effect shown twice after clicking one time on material top tab after new architecture enabled. HOT 3
- onStateChange called after screen's mount (useEffect) HOT 6
- MaterialTopTabNavigator Icon Layout Shifting HOT 4
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-navigation.