I setup notification system with firebase and react native. It's working fine, but when i receive notification in any state of app(killed, fore or background) and do click notification push me to home screen. I want to go on notification screen when someone click on notification.
How it will possible?
First, you have to add a Firebase Notification listener at the top-level component. I'll suggest placing it in App.js.
Foreground Listener
Background Listener
After that, You have to navigate to a particular screen with the help of a navigation prop. if you place the listener at App.js then you will not have access to the navigation prop since App.js will return the navigation container.
For that, you have to create one helper function like this navigation without prop
e.g.
export const App = () => {
messaging().setBackgroundMessageHandler(async remoteMessage => {
navigate('Notification'); //navigate to notification screen
});
const unsubscribe = messaging().onMessage(async remoteMessage => {
//generate local notification using your preferred library
//handle navigation
})
return <RootNavigator />;
};
Related
Hello i am Working Push Notification with the help of this https://github.com/zo0r/react-native-push-notification my notification is working fine but i want to navigate the the screen when i tap on notification ! my notifiaction working fine please help me out with any suggestion i used stack navigator in my routes
onNotification: function (notification) {
console.log("NOTIFICATIONss:", notification);
if (notification.userInteraction) {
console.log("Clicked on Notification"). // here i clicked on notification
this.props.navigation.push("Home"). // here i want navigation
}
if (!notification.userInteraction) {
PushNotification.localNotification({
foreground:false,
channelId: notification.channelId,
channelName: "xShare", //
title: notification.title,
message: notification.message,
largeIconUrl: notification.smallIcon,
onOpen: () => { this.props.navigation.navigate("ActiveNeed") },//nothing working
})
notification.finish(PushNotificationIOS.FetchResult.NoData);
}
},`
If your app is opened through clicking on the notification bubble, the navigation props should be unavailable when the onNotification() function runs.
Therefore, please create a navigation reference for the app. You may follow the guidelines by React-Navigation for more details.
https://reactnavigation.org/docs/navigating-without-navigation-prop
You can use the following code for navigation in onNotification() after you added the navigation-reference.
import * as RootNavigation from './path/to/RootNavigation.js';
RootNavigation.navigate('TargetPage', { someParams: 'someValue' });
I'm migrating an old React Native app from 0.57 to 0.62, and just setup navigation with the current React Navigation package. That app contains a global navigation store that registers to Android back button presses and allows me to intercept back operations, no matter where they originate (hardware button or programmatically).
I have a rather weird behavior here, and it seems to be timing-related. In the snippet below, I register a listener with BackHandler, which supresses back button taps and logs a warning. I'll register it in the componentDidMount method.
export class RootComponent extends React.Component {
private initBackButton() {
const onBackPress = () => {
console.warn("BACK BUTTON SUPPRESSED");
return true;
};
BackHandler.addEventListener("hardwareBackPress", onBackPress);
}
public componentDidMount() {
// TODO register back listener
}
public render() {
return (
<NavigationContainer >
<StackNavigatorSetup />
</NavigationContainer>
);
}
}
If I register the listener synchronously, the back button listener fires if I press it at the initial screen of my StackNavigator.
If I navigate to a second screen, the listener does not fire if I press the back button, and I can return back to the start screen. If I press back there again, the listener fires.
Note that I'm declaring the listener in the root component, so that component isn't going anywhere.
public componentDidMount() {
// only works on the start screen
this.initBackButton();
}
Now, the behavior is different if I use a delay:
If I register the same handler with a delay of 1 second, the handler works on any screen
This is not thread-related. If I use a delay that is too short, it again only works on the start screen
public componentDidMount() {
// works on every screen i'll navigate to
PromiseUtil.delay(1000).then(() => this.initBackButton());
}
To be honest, I don't really have a clue what's happening here. BackHandler seems to be ready, but I don't understand why the listener works either global or not depending on the delay. Also, my root component doesn't really change, so I wonder whether React Navigation is messing with me here...
I am working on react native application and my requirement is to launch specific screen on Notification received.
Notification is working fine in all state i.e. Foreground or background.
I am using below library:
react-navigation
#react-native-firebase/messaging
react-native-push-notification
Below is the code for handling notification :
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
let text = {
title: remoteMessage.data.title,
body: remoteMessage.data.body,
}
notif.cancelAll();
notif.localNotif(text);
NavigationService.navigate('Contact', { userName: 'Lucy' })
});
Also wrote a navigation code on notification received method referring
https://reactnavigation.org/docs/4.x/navigating-without-navigation-prop
I can see app navigate to particular screen but its not launching app.
Can anyone help me with this?
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.
I am using React native router-flux for navigation.
From my sidebar, there is a link to navigate to add address Screen.
After the API submission of address details, app redirects to the home screen.
For adding another address, again moved to add address Screen, then without adding an address, just press back button.
On Pressing Back button App redirect to Home screen but my app completely stuck, and I cannot perform any actions.
Here is my code for BackHandler. Please Help
componentDidMount(){
BackHandler.addEventListener('hardwareBackPress', () => this.backAndroid())
}
componentWillUnmount(){
BackHandler.removeEventListener('hardwareBackPress', () => this.backAndroid())
}
backAndroid() {
Actions.drawer1();
return true
}