Is it possible to add code to callback function for componentWillUnmount that will stop callback from unmounting? I want to provide message to user that says "are you sure you want to quit?"
BackHandler module could solve your issue in android. For ios, you need to add gestureEnabled: false in react navigation props and bind alert function with back button on header.
Related
I have a react native compnent that shows a popup message at the bottom of my mobile screen with data from my API http request. Trying to hide the numeric keyboard to be able to see the popup that is behind the keyboard. Calling keyboard.dismiss() when the API response comes does nothing.
Expecting keyboard to be dismissed while using import { Keyboard } from 'react-native' and calling the keyboard.dismiss() from the API response.
You are calling keyboard.dismiss() from an async () method, that's why the keyboard is not hiding.
You will have to call keyboard.dismiss() from the main thread.
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 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.
AppState.addEventListener('change', ...)
The listener does not getting any call. I'm using StackNavigator to put root screen and the screen with AppState
(Updated) It's been called when I restart the app. But the Component where I use AppState is not yet the active screen
In my case, I just want to get notified when a navigation come back to or leave a screen. So I can simply do this
this.props.navigation.addListener('didFocus', ...);
this.props.navigation.addListener('didBlur', ...);
The problem with AppState still remains
I am new in react-native I have two screens in my stack. Login and Home.
I want to go back to login from a button on home.
I am writing this code
this.props.navigation.navigate('loginScreen')
but in login screen componentWillMount method is not calling. I want to reset my form when user come on login screen from home.
Can anyone help me here?
Thanks in advance.
The this.props.navigation.navigate('loginScreen') don't work because you are now in loginScreen.
If you want to restart page this code isn't good. because have a loop!
correct code:
just when navigate to loginScreen from home use:
this.props.navigation.push('loginScreen')
NOT IN "componentWillMount"
To go back from login from home , you should use this.props.navigation.goBack() if the screen is immidiately before home.
Secondly, you should not use componentWillMount since it is deprecated and will be removed from React 17 onwards. Instead use componentDidMount
Since the component is already mounted therefore it won't call the react lifecycle events componentDidMount again. Therefore you should use the react-navigation listeners didFocus event.
didFocus: the screen focused (if there was a transition, the transition completed)
componentDidMount () {
this._onFocusListener = this.props.navigation.addListener('didFocus', (payload) => {
// Perform the reset action here
});
}
Since your Home and Login Screens are both under the same StackNavigator, when you go from Home back to Login the state stays the same as the component doesn't unmount. The recommended way to solve this is using the SwitchNavigator of react-navigation. Read this very helpful part of the documentation below
https://reactnavigation.org/docs/en/auth-flow.html
You may not be familiar with SwitchNavigator yet. The purpose of
SwitchNavigator is to only ever show one screen at a time. By default,
it does not handle back actions and it resets routes to their default
state when you switch away.
The perfect solution is with this.props.navigation.push('Login'), I tried with SwitchNavigator but it doesn't provide navigationOptions for header.