Comments (9)
Here's
First configure your deep links and install react-native-firebase
Then, in some starting point of you app, start creating the channel for firebase.
// bootstrap.js
import firebase from 'react-native-firebase'
let channel = new firebase.notifications.Android.Channel('main', 'main', firebase.notifications.Android.Importance.Max)
firebase.notifications().android.createChannel(channel)
Later in the route where you control the access (can be the root view), I've a dedicate object for route as root point.
// config/router.js
import firebase from 'react-native-firebase'
const DEEPLINK_ROUTE = 'myapp://myroute/'
// define the path for the view
let Stack = StackNavigator(
// .....
MyRoute: {
path: 'myroute/:id',
screen: require('@components/views/myroute').default
},
)
// helper function to local notifications
let notify = function (notif) {
let local = new firebase.notifications.Notification()
.setNotificationId('main')
.setTitle(notif._title)
.setBody(notif._body)
.setData(notif._data)
.setSound('default')
if (Platform.OS === 'android') {
local
.android.setChannelId('main')
.android.setAutoCancel(true)
.android.setDefaults(firebase.notifications.Android.Defaults.All)
.android.setBadgeIconType(firebase.notifications.Android.BadgeIconType.Small)
.android.setCategory(firebase.notifications.Android.Category.Recommendation)
}
firebase.notifications().displayNotification(local)
}
@inject('user', 'notifications')
@observer
export default class Router extends React.Component {
constructor (props) {
super(props)
// foreground push notifications
firebase.notifications().onNotification(async notif => {
console.log('onNotification', notif)
// save the notification on phone
this.props.notifications.save(notif._data)
notify(notif)
// set badge number
// let badge = await firebase.notifications().getBadge()
// await firebase.notifications().setBadge(badge + 1)
})
// opened notification
firebase.notifications().onNotificationOpened(opened => {
console.log('onNotificationOpened', opened)
this.props.notifications.save(opened.notification._data)
// go to campaign
Linking.openURL(`${DEEPLINK_ROUTE}${opened.notification._data.id}`)
})
}
async componentWillMount () {
// initial, pending notification
let pending = await firebase.notifications().getInitialNotification()
if (pending) {
console.log('getInitialNotification', pending)
this.props.notifications.save(pending.notification._data)
// go to campaign
Linking.openURL(`${DEEPLINK_ROUTE}${pending.notification._data.id}`)
await firebase.notifications().removeAllDeliveredNotifications()
}
}
render () {
if (this.props.user.logged === null) {
return <Loading />
}
if (!this.props.user.logged) {
return <Login />
}
return <Stack ref={nav => (this.navigator = nav)} />
}
}
Hope to help 🍻
from react-navigation.github.io.
seems like a decent use case to have documentation for
from react-navigation.github.io.
@shekharskamble I've been like 2 months looking for this :/
Did you find any solution?
from react-navigation.github.io.
@frangeris https://reactnavigation.org/docs/navigating-without-navigation-prop.html
from react-navigation.github.io.
@frangeris - combination of deeplink & react-native-fcm (FCM.on event in home screen), pass screen property in the notification and route based on that. Thats how I achieved it still not done 100% tough
from react-navigation.github.io.
any help please .... @frangeris
from react-navigation.github.io.
Sorry for delay @dekemega
I get this working but using react-native-firebase, if intersted let me know, I'll prepare some snippets...
from react-navigation.github.io.
yes i would like to learn more about that .. thank you mr. @frangeris
from react-navigation.github.io.
I know this is quite old but it seems even more relevant with v5. I would love to see some documentation on how to handle push notifications while the app is in the background and the user is logged out (using the new auth flow).
from react-navigation.github.io.
Related Issues (20)
- Stack navigator for each tab code example warning HOT 1
- Inconsistent TypeScript behavior with optional arguments in useNavigation
- Request for a sandbox environment for React Navigation
- Found screens with the same name nested inside one another HOT 2
- React Navigation logo has multiple control points
- In "Help" page witgh presentation set value to "transparentModal", I want push one new Page of name "Profile", How shuld i do?
- [email protected] -> Compiling JS failed .... invalid expression Buffer
- Improve/Update React-Navigation SVGs
- Remove 'make me a sandwich' references from documentation .mov
- Most of the react navigation examples on snack are not working HOT 2
- Use Deep Link, occur error
- React-native physical iOS devices not showing images
- NavigationContainer: initialRouteName: Issue with TypeScript
- Group Component Information HOT 2
- Nested navigation Snack Expample NOT FOUND
- Missing import on multiple-drawers
- Modal example issue - `RNSScreen` must be a function HOT 1
- Broken outbound URL HOT 1
- Remove mention of deprecated 'jest-native' in docs
- How to use the Drawer.CollapsedItem component with react-navigation/drawer
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.github.io.