Pushbase - Push Notification for Expo and React Native

Prerequisite: To enable deep linking, you must define your app’s scheme in the app.json file.

app.json

{
  "expo": {
    // replace this with your app scheme
    "scheme": "myapp"
  }
}

The Pushbase SDK supports deep linking, provided that the route is defined according to your app’s navigation structure. To navigate a user to a specific screen via a notification, include the target route in the notification payload. When deep linking is enabled, the SDK automatically handles routing the user to the specified screen upon interaction.

To illustrate how deep linking works with the Pushbase SDK, consider a travel app that lists hotels across major U.S. cities. Suppose the marketing team wants to send push notifications featuring city-specific discount codes. When a user taps on a notification, the app should automatically navigate to the targeted city and display a list of hotels specific to that location.

To enable this deep linking behavior, the app’s file structure should be organized based on the navigation strategy being used— Expo Router or React Navigation. Each approach requires a different configuration to correctly handle and route deep link URLs to the targeted screen.

Expo Router
React Navigation

Expo Router Project structure

.
└── app/
    ├── _layout.tsx
    ├── destinations/
    │   └── [slug].tsx
    └── index.tsx

destinations/[slug] is a dynamic route, where slug is a unique identifier representing each city’s route.

React Navigation Project structure

.
├── screens/
│   ├── HomeScreen.tsx
│   └── DestinationScreen.tsx
└── App.tsx

Screen route names and configurations in React Navigation are managed using a Stack Navigator

App.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Destination" component={DestinationScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Defining deep links

A deep link to a specific destination screen should follow this format:

destinations/san-francisco - San Francisco
destinations/new-york-city - New York City
destinations/miami - Miami
destinations/washington-dc - Washington DC

All deep links are configured and attached to notifications directly through the Pushbase dashboard. Create a deep link

List of deep links

Assign deep link to a notification

Handle Deep Link Routing

Expo Router
React Navigation

With Expo Router, Pushbase SDK automatically handles deep link navigation when a user taps on a notification that includes an assigned deep link. No extra works needed.

React Navigation’s linking configuration can be used to handle incoming deep links from push notifications.This involves mapping defined deep link routes to their corresponding screen route names within your navigation structure.

Prerequisite: install expo-linking package.

npx expo install expo-linking

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as Linking from "expo-linking";

const Stack = createStackNavigator();

/* Map deep linking route to screen name.*/
const config = {
  screens: {
    // The slug value will be replaced by city value like san-francisco or miami.
    Destination: "destinations/:slug",
  },
};
const linking = {
  prefixes: [prefix],
  config,
};

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Destination" component={DestinationScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

The reason that is necessary to use Linking.createURL is that the scheme will differ depending on whether you’re in the client app or in a standalone app

Having trouble setting up or configuring the SDK? Our support team is here to help — feel free to reach out

Get Started

Deep linking

Defining deep links

Handle Deep Link Routing

Get Started

​Defining deep links

​Handle Deep Link Routing

Defining deep links

Handle Deep Link Routing