← React Native Course13 / 16

Push Notifications & Deep Linking

Bring users back into your app — send push notifications with Expo, and route incoming links and notification taps to the right screen with deep linking.

Ad 728×90

Register for push notifications

Why: push starts with a token — a unique address for this install. Request notification permission, then get the Expo push token and send it to your backend, which uses it to target this device. expo-notifications handles the platform differences.

// npx expo install expo-notifications
import * as Notifications from 'expo-notifications'

async function registerForPush() {
  const { status } = await Notifications.requestPermissionsAsync()
  if (status !== 'granted') return null
  const token = (await Notifications.getExpoPushTokenAsync()).data
  return token   // send this to your server
}

Send a notification

Why: with a token, your backend POSTs to Expo's push service, which delivers to Apple and Google for you. This is the server-side call (shown here as the request shape). You can also schedule LOCAL notifications on-device with no server at all.

// Server-side: POST to Expo's push API
async function sendPush(token: string) {
  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      to: token,
      title: 'Your order shipped',
      body: 'Tap to track it',
      data: { screen: 'Orders', id: 42 },
    }),
  })
}

React to a notification tap

Why: a notification is only useful if tapping it opens the right place. Subscribe to the response listener; the data you attached when sending (a screen name, an id) tells you where to navigate. Clean up the subscription on unmount.

useEffect(() => {
  const sub = Notifications.addNotificationResponseReceivedListener((res) => {
    const data = res.notification.request.content.data
    // navigation.navigate(data.screen, { id: data.id })
  })
  return () => sub.remove()
}, [])

Deep linking

Why: deep links open a specific screen from outside the app — a link in an email, another app, or a notification. You declare a URL scheme and map URL paths to screens; React Navigation can consume this linking config so myapp://orders/42 lands on the right screen.

// In NavigationContainer:
const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Details: 'orders/:id',   // myapp://orders/42  ->  Details { id: 42 }
    },
  },
}

// <NavigationContainer linking={linking}> ... </NavigationContainer>

// npx expo install expo-notifications
import * as Notifications from 'expo-notifications'

async function registerForPush() {
  const { status } = await Notifications.requestPermissionsAsync()
  if (status !== 'granted') return null
  const token = (await Notifications.getExpoPushTokenAsync()).data
  return token   // send this to your server
}

Send a notification

// Server-side: POST to Expo's push API
async function sendPush(token: string) {
  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      to: token,
      title: 'Your order shipped',
      body: 'Tap to track it',
      data: { screen: 'Orders', id: 42 },
    }),
  })
}

React to a notification tap

useEffect(() => {
  const sub = Notifications.addNotificationResponseReceivedListener((res) => {
    const data = res.notification.request.content.data
    // navigation.navigate(data.screen, { id: data.id })
  })
  return () => sub.remove()
}, [])

Deep linking

// In NavigationContainer:
const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Details: 'orders/:id',   // myapp://orders/42  ->  Details { id: 42 }
    },
  },
}

// <NavigationContainer linking={linking}> ... </NavigationContainer>