title: React Native Deep Linking Only Works on 2nd Click
body: <p><strong>Issue</strong>: I am trying to direct user to reset password page from email using deep linking, but the first click on the link takes me to the previous state of the app, and only on second click the link takes me to the reset password page.</p>
  <p><strong>Issue Update</strong>: The current behaviour is that I can go to the correct screen on first click, however, the screen from previous app state is still the first screen I see, and it lingers around for 2 seconds before it goes to the correct screen.</p>
  <p>Here's my code:</p>
  <pre><code>class NavigationWrapper extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        token: null,
        route: null
      }
      this.handleDeepLink = this.handleDeepLink.bind(this)
      this.navigatorRef = navigatorRef
    }
  
    componentDidMount() {
      Linking.getInitialURL().then(url =&gt; {
        const { route, token } = unpackLink(url)
        this.setState({ route, token })
      })
      Linking.addEventListener('url', this.handleDeepLink)
    }
  
    componentDidUpdate() {
      if (!this.props.loggedIn &amp;&amp; this.state.token) {
        const token = this.state.token
        this.setState(
          { token: null },
          () =&gt; this.props.tokenLogin(token)
        )
      }
    }
  
    componentWillUnmount() {
      Linking.removeEventListener('url', this.handleDeepLink)
    }
  
    handleDeepLink(e) {
      const { route, token } = unpackLink(e.url)
      this.setState({ route, token })
    }
  
    render() {
      return &lt;NavigationContainer ref={this.navigatorRef}&gt;&lt;RootStack /&gt;&lt;/NavigationContainer&gt;
    }
  }
  
  </code></pre>
  <p><strong>Edit</strong>:
  The navigation part is handled by the following code:</p>
  <pre><code>&lt;AppMainStack.Navigator headerMode={'none'}&gt;
        {!!firstLogin ?
        &lt;&gt;
          {!acceptedPrivacyPolicy ? &lt;AppMainStack.Screen name={'Legal'} component={Legal} /&gt; : null}
          &lt;AppMainStack.Screen name={'ChangePassword'} component={ChangePassword} /&gt;
        &lt;/&gt;
        :
        &lt;&gt;
          &lt;AppMainStack.Screen name={'AppTabs'} component={AppTabs} /&gt;
          &lt;AppMainStack.Screen name={'Login'} component={Login} /&gt;
          &lt;AppMainStack.Screen name={'ForgotPassword'} component={ForgotPassword} /&gt;
        &lt;/&gt;
      }
      &lt;/AppMainStack.Navigator&gt;
  </code></pre>
  <p><code>firstLogin</code> is set in the reducer:</p>
  <pre><code>case authTypes.PASSWORD_RESET_EMAIL.SUCCESS:
        return {
          ...initialState,
          passwordChanged: false,
          emailSent: true,
          firstLogin: true,
        }
  </code></pre>
  <p>and the saga that handles the request:</p>
  <pre><code>export function* sendEmail() {
    try {
      yield takeEvery(
        authTypes.PASSWORD_RESET_EMAIL.REQUEST,
        resetPassword
      )
    } catch (err) {
      console.warn('error', err)
    }
  }
  
  function* resetPassword(action) {
    yield makeApiRequest(
      authTypes.PASSWORD_RESET_EMAIL,
      `forgot-password`,
      '',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email: action.username })
      },
      false,
      { email: action.username }
    )
  }
  </code></pre>