I am trying to change the state of my app when the drawer is opened.
onEnter and onOpen don't trigger at all.
I am using a custom NavBar so the hamburger button isn't being displayed but if i swipe left on my IOS device the drawer opens.
So how can i detect when the drawer is open?
You have multiple choices!
Pass this.props.open and check this on componentWillReceiveProps and after that :
Actions.refresh({key: "drawer", open: true})
Same issue is here
Some more data that is good for your problem here
Drawer in router flux provided by React Navigation so it's better that you see this documentation
react native router flux drawer added in v4 so maybe have a some bug now!
Use another drawer (I recommended to you this)
Related
I set deep link in my app.
So there is a website can open my app with schema.
I know user can just click the ios navigator to go back.
But I want to know is any way that I can put my button function in my app's screen just like the ios navigator ?
In componentDidMount set
BackHandler.addEventListener('hardwareBackPressCheckpointOverview', this.backPressed);
here this.backPressed is the function which contains your goback functionality.
then in componentWillUnmount you remove the event listener
BackHandler.removeEventListener('hardwareBackPressCheckpointOverview', this.backPressed);
I am using react-navigation v5 and have the navigation arranged like this -
<DrawerNavigator>
<TabNavigator>
<StackNavigator/>
</TabNavigator>
</DrawerNavigator>
I want to disable Drawer swipe action in one Tab/Stack. In earlier versions, it was achieved through drawerLockMode: 'locked-closed', option but its not there in v5. There is option called swipeEnabled in DrawerNavigator option and I couldnt use it inside stack/tab navigator. How to achieve this feature in v5?
Let's say I have a ProductScreen component that renders info about a product as well as a list of other similar products. When clicking on a similar product, a navigation is done from ProductScreen ==> ProductScreen with different params/key.
The problem I'm facing is that I want to do something on the React Navigation focus event (for example, scroll to top)
navigation.addListener('didFocus', () => {
console.log('didFocus')
scrollToTop()
})
I see the log the first time the component renders, but when doing a navigation from ProductScreen ==> ProductScreen, the didFocus event doesn't seem to be firing again so the component isn't scrolled to the top. In fact, none of the lifecycle events (willFocus, didFocus, willBlur, didBlur) seem to be firing.
Is there any way to be able to use react navigation lifecycle events when navigating from component X to component X with different params? Thanks!
You're navigating to the same screen so it's normal that didFocus doesn't fire, since the screen was already focused.
If you want to react to params change, you can use componentDidUpdate/useEffect to compare previous params with the new params and do what you need to do.
If you want to navigate to a new screen, you can use push instead of navigate
Ex- I have two components A and B. I need to refresh component A after navigating from component B.
componentDid Mount doesn't work because A is already mounted.
How to achieve this. I am using react navigation to navigate from B->A
You can either use NavigationEvents from react-navigation or can pass a callback which will trigger on navigation.goBack().
Check this snack : Temporary Link
You can add a listener for the same in react native.
There are total 4 listners for the same.
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
Try the below code
componentDidMount(){
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.warn('didFocus ', payload);
# just write your code/call a method here which you want to execute when the app comes from a component
this.handleRefresh()
}
);
}
Dont forget to remove it when it is done.
componentWillMount(){
didFocusSubscription.remove();
}
More you can read here. Thanks :)
I have implemented firebase cloud messaging in my app successfully. But when a new notification appears, my app should open and then redirect to the notifications page from app.js.
The app is showing log info when the notification is clicked but when I try this.props.navigator.push("Notification"); in that function, it shows an error undefined is not an object(evaluating this.props.navigation.push)
I am guessing this is because I haven't yet initialised my stacknavigator but I don't know this for sure. I am using react-navigation in my app.
Here is the function in my app.js that gets called when the notification is clicked.
const notificationOpen = await firebase.notifications().getInitialNotification();
if (notificationOpen) {
const { title, body } = notificationOpen.notification;
console.log('getInitialNotification:');
this.props.navigator.push("Notification");
}
Also, the navigation code is not working even in my render function in app.js so I think props is not initialised in app.js.
Can anyone help me fix this and land me to the notification page?
Considering you have a route called Notification in your stack navigator and also your app.js has access to the navigator's navigation prop, then you might want to use this.props.navigation.navigate('Notification') in case you are using react-navigation.
The problem with your code is this.props.navigation doesn't have any method called push so it will surely give an undefined error. To know more about navigation prop consider going through this doc.