I have a react native app with the following frameworks
react-native : 0.44.2
react-navigation : 1.0.0-beta.11
redux : 3.6.0
ReactNavigation structure
Root navigator (Stack navigator)
Tab navigator
Tab details (Stack navigator)
Login screen (Stack navigator that is full screen)
I'm trying to create an "in-app custom notification UI" as that's required per the design of the app. I can't use the normal "local/push notification". And since I'm using redux, I've created a custom middleware that handles notification actions.
When a notification action is fired from anywhere in the app, this redux middleware catches it and passes the notification to my NotificationUI component. This all works well.
My issue is with how to show this NotificationUI (with ReactNavigation)?
I need this NotificationUI to be injected from the root (so to speak) so that I don't need to add the NotificationUI for every "screen" that I have for the app.
What is the most elegant way to handle that?
I've tried creating a Higher Order Component out of NotificationUI component and "wrapping" the 'Root navigator' in it, but that results in something like the following. (Notification is the red bar at the bottom). It's stacking on top of each other. But I want one to be in the background and the other to be on the foreground.
This is how I solved it in code:
<Provider store={store}>
<React.Fragment>
<SystemNotificationComponent />
<RootStack />
</React.Fragment>
</Provider>
);
And yes, SystemNotificationComponent should be positioned as 'absolute' of course!
This will show content from SystemNotificationComponent on top of any navigation screens.
Related
I am creating a React native application with the following scenario:
There is a navigation bar at the bottom of the screen, allowing the user to navigate between three main pages. On one of these pages, there is a backdrop with a container overlayed on it with two buttons. Each of these buttons should show open different "pages" in that container, and the navigation bar will be hidden when the user opens one of those "pages". An image is included below.
App layout example
My question is: how is this best implemented in react native?
My original idea was to implement a custom Stack Navigator with createStackNavigator. While this does work, I was wondering if this is a good way to go about it.
One result from using a custom navigator is that the navigation state in the container is also bound to the back button of the device (on Android). However, this is a welcome feature in this case as it makes sense in the navigation flow.
I am using react native navigation v2 by wix. I have a welcome screen with login screen and register. I start the startAuth.js from App.js. There are two tabs with login and register.
But as soon as app starts the componentWillMount methods runs in the register screen but yet i am at login tab.
Why is this happening?
react-native-navigation's Tab does not support lazy loading. But there are two special lifecyle functions where you can put your logic when component appear or disappear on screen
componentDidAppear(): called each time this component appears on screen
componentDidDisappear(): called each time this component disappears from screen
https://wix.github.io/react-native-navigation/docs/screen-lifecycle
There is also a discussion about topic https://github.com/wix/react-native-navigation/issues/1250
I don't know if I am the one getting it wrong. I am working on a project, I use react navigation, and I am using drawer and stack navigator. But when I click on any menu on the drawer 1. The drawer will remain open until the next page appear 2. The menu that I click will remain active until the next screen appear.
I try to check other application performance, they don't perform like that. Is that how react navigation works or am I the one getting it wrong?
Please help because I am new to react native and react navigation.
i came across a post on Fixing common performance problems in React Navigation
i just change the code in componentdidmount method like this
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
// Component is done animating
// Start making any request
});
};
with that my problem is solved but i dont know if is the right way of doing it.
i want to psuh new screen on top off a model in react-navigation
Current Behavior
The react-native Modal is the highest zIndex. All the screens pushed onto the StackNavigator by react-navigation are below it.
react-navigation
Expected Behavior
The new screen should be pushed on top of the react-native Modal
How to reproduce
render a react-native Modal with some boilerplate code, and then on tap button in your custom modal, just run
this.props.navigation.navigate(SCREEN_NAME);
React Navigation Implements the modal on root level. So there is no way to push anything on the top of modal.
If you want to achieve this behavior you might create a stack navigator with mode modal
Here is a link of an expo snack
i am currently working on an App for Android and iOS - i am using react native.
Is there any way to hide the navigation bar dynamically in react-navigation or should i rather switch to react native router flux?
When the user changes to landscape i want to hide the navigation bar, when he goes back to Portrait, i want to show it again.
I know how to change it statically by using {header: null} in the navigation Options, but this does not help me in this case, at least i did not find a way to solve this.
Thanks in advance!
This is sort of a hack but I think you can replace the provided header component from React navigation with your own, then add a redux state that controls its visibility.
Either wrap your screens with a view that contains an onLayout event that will trigger redux action to set the visibility of your custom header.