Problem
I'm trying to setup Deep Linking and it doesn't open to the correct screen specified in my URL. The app opens but always to the current screen instead of the screen specified in the URL.
My app has the following navigation structure and I'm trying to navigate to the Notifications screen when the app opens
- Top level Switch Navigator
- SplashScreen
- AuthLoading Screen
- App (BottomTabNavigator)
- Home
- Profile
- Notifications
- Auth
What I've tried
I've tried setting up a new app and following their documentation and it works properly in the new project but I can't get it to work in my current project. I've also included redux in the new project to test the same environment.
I'm testing by running xcrun simctl openurl booted esportsdeeplink://app/notifications
for iOS and adb shell am start -W -a android.intent.action.VIEW -d “esportsdeeplink://app/notifications” com.benji.esportscompetition
for android.
Both have the same result of opening the app but not navigating to the specified page
Enviornment
- react-native v0.60.4
- react-navigation v3.11.1
- redux v4.0.4
- react-redux v7.1.0
Code I've tried to include all relevant code but cut down some imports and other code to try to be concise. I can post any additional code if you find it to be helpful
Index.js (entry point)
import App from './src/app/App';
const ReactNativeRedux = () => (
<Provider store={store}>
<PersistGate loading={<SplashScreen />} persistor={persistor}>
<PushNotifications />
<App />
</PersistGate>
</Provider>
);
AppRegistry.registerComponent(appName, () => ReactNativeRedux);
App.js
import AppContainer from './Components/BottomNavigation/NavigationRouting';
class App extends React.Component {
render(props) {
const prefix = 'esportsdeeplink://'
console.log('prefix', prefix)
return (
<Fragment>
<View style={{ flex: 1, backgroundColor }}>
<StatusBar translucent backgroundColor="transparent" />
<LoadingSpinner loading={this.props.loading} />
<AppContainer
ref={(navigatorRef) => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
uriPrefix={prefix}
screenProps={{
http,
saveFriendsFnUser: this.saveFriendsFnUser,
signupComplete: this.signupComplete,
}}
/>
</View>
</Fragment>
);
}
}
const mapStateToProps = (state) => ({
loading: state.api.loading,
user: state.user,
math: state.math,
response: state.response,
});
const mapDispatchToProps = (dispatch) => ({
startupRequest: () => {
dispatch(startupRequest());
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(App);
NavigationRouting.js (where my navigators are created)
const BottomTabNav = createBottomTabNavigator(
{
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileStack
},
Notifications: {
screen: Notifications,
navigationOptions: () => ({
tabBarVisible: false
}),
path: 'notifications',
},
},
{
tabBarComponent: CustomTabNav,
initialRouteName: "Home"
}
);
export default createAppContainer(
createSwitchNavigator(
{
SplashScreen,
AuthLoading: AuthLoadingScreen,
App: {
screen: BottomTabNav,
path: 'app',
},
Auth: {
screen: AuthStack,
path: 'auth'
}
}
)
);
Deep Linking Setup
iOS
projectFolder/ios/eSportsCompetition/AppDelegate.m
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
@end
Android
projectFolder/android/app/src/main/AndroidManifest.xml
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize"
android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="esportsdeeplink" />
</intent-filter>
</activity>