React Native Deep Linking - Multiple Paths for single screen

Question

I’m trying to handle multiple deep link paths that should open the same screen in my React Navigation setup.

For example, both of these URLs should open the same ChallengesScreen:

• mydomain.com/challenges
• mydomain.com/challenge

Here’s my current linking config:

config: { 
 screens: { 
 BottomTabs: {
 screens: {
 Challenges: 'challenges',
 }, 
 },
 },
 // ...,
}

ChatGPT recommended me to use:

Challenges: {
 path: ['challenges', 'challenge']
}

But that causes an error:

TypeError: p.split is not a function,

And I can’t find any information about this in the official documentation. Maybe I am overlooking something.

What’s the right way to make multiple URLs (like /challenge and /challenges) open the same screen in React Navigation?

If someone can point me at the right documentation, I'd be more than thankful.

I am using React Native 75.

Have tried putting paths in an array, or adding multiple path objects, but that does not work.

Single path works fine.

• user9371102: because path cannot be an array. it only expects a string per screen. ChatGPT is wrong here lol. Nevertheless, you need a workaround to accomplish this.

Answer 1

You can achieve that using the expo-linking package:

// ...
import * as Linking from "expo-linking"
export default MainStack() {
 const navigation = useNavigation()
 useEffect(() => {
 const handleDeepLink = async ({ url }) => {
 if (
 url === ".../challenge" ||
 url === ".../challenges"
 ) {
 navigation.navigate(...)
 }
 }
 const subscription = Linking.addEventListener("url", handleDeepLink)
 return () => subscription.remove()
 }, [])
}

You can also handle it with React Native's Linking import