react native deeplink

React Native Expo Router Explained | Navigation & Deep Link

by


Deep linking in Expo React Native apps :

It’s been a while we have done a deep link tutorial on flutter now it’s time for a shift towards React native Expo app.

We will implement deep links in react native expo based app and test it as well.


Expo Router explained :

We will be implementing file base navigation system and there by deeplink which is clearly demonstrated in the video tutorial.



Step-by-Step: Setting Up Expo Router :

app.json

The first step is to set a schema such that deep link’s use this to target the app out of all available apps. 

"scheme": "amplifyabhi",

index.js

Add the entry point for the app.

import 'expo-router/entry';


app/index.js

import {View, Text, Button} from "react-native";
import { useRouter } from "expo-router";

export default function Home(){
    const router = useRouter();

    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center"}}>
            <Text style={{ fontSize: 24,}}>Home Page</Text>
            <Button title="Go to DashBoard" onPress={()=> router.push("/dashboard")}/>
        </View>
    );
}

app/_layout.js

import { Stack } from "expo-router";

export default function Layout(){
    return <Stack screenOptions={{ headerShown: true}} />;
}

app/dashboard/index.js

import {View, Text, Button} from "react-native";
import { useRouter } from "expo-router";

export default function Home(){
    const router = useRouter();

    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center"}}>
            <Text style={{ fontSize: 24}}>DashBoard</Text>
            <Button title="Go to Profile" onPress={()=> router.push("/profile")}/>
        </View>
    );
}

app/profile/index.js

import {View, Text, Button} from "react-native";
import { useRouter } from "expo-router";

export default function Home(){
    const router = useRouter();

    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center"}}>
            <Text style={{ fontSize: 24}}>Profile</Text>
            <Button title="Go to DashBoard" onPress={()=> router.push("/dashboard")}/>
        </View>
    );
}

Watch Full Tutorial on YouTube

Expo Router explained in this video tutorial

Leave a Comment