can we pass invitation code in url in react native?

Question

I'm trying to signup User in React Native. There are 2 steps to do it When I enter the info of user Like (FirstName, LastName, and email), the User got a link in his/her mail. When the User is clicking on this link, its redirecting to New Signup Page with two more fields Like Password and Address. I want to send a inviation code to a user through a link. How can we send invitation code along with app link and how to handle this when user open app??

Answer 1

I am not sure if I understand your query completely but, you would need to use react-native-branch or react-navigation-linking.

Please follow through with the documents to get a roadmap.

Answer 2

In such case what we have done is we have added invitation code in custom URL like below

testapp://singup/invite/abc123456

and completed android and ios native setups

next in app

import { Linking } from "react-native"


  React.useEffect(() => {
    Linking.addEventListener("url", _handleDeepLinkURL)
    return () => {
      Linking.removeEventListener("url", _handleDeepLinkURL)
    }
  }, [])

  const _handleDeepLinkURL= async ({ url }) => {
   let inviteCode = parseUrlForCode(url)
   let validation = await api.validate(inviteCode,userEmail)
  }

Answer 3

Let's break down the problem into sub-problems.

1. Deep link and Universal Linking

Register your app for the deep link with custom myapp://path/to/resource and universal link https:yourcompany.com/path/to/ressource.

Note: Apple required domain name ownership verification for universal linking.

React Native CLI - https://venturedevs.com/en/blog/implementing-deep-linking-react-native-apps/

Expo - https://docs.expo.dev/guides/linking/

2. Sending verification code to email.

Logic to send email should be handled on the backend or using third-party mail services like sendGrid.

Assume that the user receives an email with a verification link like https://auth.yoursecret-server.com/myapp?authCode=35467809876

3. Deep link to the code verification screen

React Navigation has first-class support for deep linking, I recommend it for handling screen-based deep linking. Consult their documentation for further. https://reactnavigation.org/docs/deep-linking