CODEWITHSUNDEEP
iosreact-nativereact-navigationdeep-linking
Alex DG
Alex DG

Reputation: 1869

React Navigation get Param from deep linking not working

I have configured my router like:

const SwitchRouter = createSwitchNavigator(
  {
    Splash: {
      screen: Launch,
      path: 'hello/:code',
    },
    App: HomeStack,
  },
  {
    initialRouteName: 'Splash',
  }
);

I'm using a link in Safari, which launches my iOS app and then I should get a parameter from this link in my code.

I tried different with links but I was not able to get any parameter from them. Here is what I've tried:

My code which should get this code parementer is in my Launch screen as below:

const code = navigation.getParam('code', 'error');

The code value is always an error, my param here is never found. Am I missing something here? I've been through all the GitHub and documentation of react-navigation I couldn't find a solution working for me.

I read some people have some issue getting their deep linking params in componentDidMount. Apparently they are not available. So my code here in charge of getting my parameter 'code' I tried to use it inside componentDidMount/DidUpdate and even in the render but in all cases I can't get my param.

Upvotes: 1

Views: 5796

Answers (1)

Samir
Samir

Reputation: 11

I figured that you cannot pass deeplink params to the first/initial screen. You have to use a proxy instead:

const SwitchRouter = createSwitchNavigator(
{
    CodeScreen: {
       Screen: Code,
       path: 'code/:code',
    }
    Splash: {
       screen: Launch,
       path: 'hello',
    },
    App: HomeStack,
   },
   {
     initialRouteName: 'Splash',
   }
});



class Code extends Component {

constructor(props) {
    super(props);

    const {navigation} = this.props;
    const code = navigation.getParam('code', false);

    navigation.navigate('hello', {code});

}

render() {
    return (
        <View>

        </View>
    );
}

}

Now you retrieve the 'code' param in your SplashScreen.

Upvotes: 1

Related Questions