Skip to content
This repository has been archived by the owner on Jul 20, 2021. It is now read-only.

Deeplink with react-navigation will fail due to prefix returned by expo Linking #27

Closed
foloinfo opened this issue Apr 25, 2019 · 2 comments

Comments

@foloinfo
Copy link

Hi.

I'm currently working on test project and found that deep link with react-navigation will fail because Linking.makeUrl('/') is returning exp://192.168.1.../ and not http://192.168.1... .
Also, Linking.makeUrl('/') will return the url with current path, so it become useless I think.
ex: accessing http://192.168.1.116:19006/somepath will return prefix of exp://192.168.1.116:19006/somepath.

Because of these, react-navigation cannot retrieve path and always render root navigator.

In other words, if I directly set prefix to http://192.168.1.116:19006/ it is working.

Not working
(from Deep linking · React Navigation)

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = Expo.Linking.makeUrl('/');
// const prefix = Expo.Linking.makeUrl('/').replace('exp', 'http') // this didn't work
// const prefix = 'http://192.168.1.116:19006/somepath/' // this didn't work too

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

Working

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = 'http://192.168.1.116:19006/';

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

I'm not sure if it's a right place to report, please let me know if there is a better repo for this matter.

By the way I was pretty surprised that expo with web configuration actually works well at this moment.
I'm looking forward to use SDK33.

@Karsens
Copy link

Karsens commented Jul 13, 2019

Hey @foloinfo , did you find a solution to process links for web on Expo SDK33?

@foloinfo
Copy link
Author

@EAT-CODE-KITE-REPEAT Here is my current setup for SDK33 (non-alpha)
I used to use createAppContainer and createStackNavigator from react-navigation but since sdk33 released it was not working anymore. So I switched to use @react-navigation/core and @react-navigation/web.
It doesn't have createStackNavigator and Drawer support, so I'm using createSwitchNavigator and wrote own Drawer component. It seems like there are some minor issues, but basic behavior and deeplink is working.

AppNavigator.js

import React from 'react'
import { createSwitchNavigator } from '@react-navigation/core'
import { createBrowserApp } from "@react-navigation/web"
import { Linking } from 'expo'

const prefix = Linking.makeUrl('/')
const AppNavigator = createBrowserApp(createSwitchNavigator({
  Landing: {
    screen: LandingScreen,
    path: '/'
  },
  Login: {
    screen: LoginScreen,
    path: 'login'
}
}, {
  initialRouteName: 'Landing',
  backBehavior: 'history'
}))
export default () => <AppNavigator uriPrefix={prefix} />

package.json

    "@react-navigation/core": "^3.4.2",
    "@react-navigation/web": "1.0.0-alpha.9",

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants