Onboarding with Deferred Deep Linking<\/a>.<\/p>\n\n\n\nasync function checkReferralOnFirstLaunch() {\n const deferred = await Tolinku.checkDeferredLink();\n\n if (deferred === null) return null;\n\n const params = deferred.params;\n\n if (params.ref) {\n return {\n referrerId: params.ref,\n referrerName: params.referrer_name,\n rewardAmount: params.reward || '$10',\n campaignId: params.campaign_id,\n source: 'deep_link',\n };\n }\n\n return null;\n}\n<\/code><\/pre>\n\n\n\nFallback: Manual Referral Code Entry<\/h3>\n\n\n\n
For the 20-40% of users where deferred deep linking can't match the click to the install, provide a manual code entry option:<\/p>\n\n\n\n
function ReferralCodeEntry({ onSubmit }) {\n const [code, setCode] = useState('');\n\n return (\n <View>\n <Text>Have a referral code? Enter it here.<\/Text>\n <Input\n placeholder="e.g., SARAH-2024"\n value={code}\n onChange={setCode}\n \/>\n <Button onPress={() => onSubmit(code)}>Apply Code<\/Button>\n <LinkButton onPress={() => navigation.navigate('DefaultOnboarding')}>\n Skip\n <\/LinkButton>\n <\/View>\n );\n}\n<\/code><\/pre>\n\n\n\nPlace this on the first onboarding screen so users who weren't matched automatically can still get credit.<\/p>\n\n\n\n
The Referred User Onboarding Flow<\/h2>\n\n\n\nStep 1: Acknowledge the Referrer<\/h3>\n\n\n\n
The first screen should confirm the referral and set expectations:<\/p>\n\n\n\n
function ReferralWelcome({ referral }) {\n return (\n <Screen>\n <Avatar source={referral.referrerAvatar} \/>\n <Heading>\n {referral.referrerName} invited you to [App]\n <\/Heading>\n <RewardBadge amount={referral.rewardAmount} \/>\n <Text>\n Sign up and complete your first [action] to claim your\n {' '}{referral.rewardAmount} reward.\n <\/Text>\n <Button onPress={() => navigation.navigate('QuickSignUp')}>\n Get Started\n <\/Button>\n <\/Screen>\n );\n}\n<\/code><\/pre>\n\n\n\nKey elements:<\/p>\n\n\n\n
\n- Referrer's name (and avatar if available)<\/li>\n
- The reward amount and how to claim it<\/li>\n
- A clear CTA to start the signup<\/li>\n<\/ul>\n\n\n\n
Step 2: Streamlined Account Creation<\/h3>\n\n\n\n
Referred users are motivated. Keep the signup form minimal:<\/p>\n\n\n\n
function ReferralSignUp({ referral }) {\n return (\n <Form onSubmit={createAccount}>\n <Input label="Email" autoFocus \/>\n <Input label="Password" type="password" \/>\n\n <RewardReminder>\n {referral.rewardAmount} will be credited after your first [action].\n <\/RewardReminder>\n\n <Button type="submit">Create Account<\/Button>\n\n <SocialSignUp>\n <GoogleButton \/>\n <AppleButton \/>\n <\/SocialSignUp>\n\n <Terms \/>\n <\/Form>\n );\n}\n<\/code><\/pre>\n\n\n\nWhat to skip for referred users:<\/p>\n\n\n\n
\n- "How did you hear about us?" (you already know)<\/li>\n
- Feature tours (the referrer already explained the app)<\/li>\n
- Category\/preference selection (show this later)<\/li>\n<\/ul>\n\n\n\n
Step 3: Guide to the Qualifying Action<\/h3>\n\n\n\n
The referral reward depends on a qualifying action (first purchase, first deposit, first post). The onboarding should point directly to it:<\/p>\n\n\n\n
function ReferralActivation({ referral, qualifyingAction }) {\n return (\n <Screen>\n <ProgressIndicator\n label={`Complete your first ${qualifyingAction.label} to earn ${referral.rewardAmount}`}\n progress={0}\n \/>\n\n <ActionCard\n title={qualifyingAction.title}\n description={qualifyingAction.description}\n ctaText={qualifyingAction.ctaText}\n onPress={() => navigation.navigate(qualifyingAction.screen)}\n \/>\n\n <Text style={styles.secondary}>\n Your reward will be credited within 24 hours of completing this step.\n <\/Text>\n <\/Screen>\n );\n}\n<\/code><\/pre>\n\n\n\nStep 4: Reward Confirmation<\/h3>\n\n\n\n
After the qualifying action, confirm the reward immediately:<\/p>\n\n\n\n
function RewardConfirmation({ referral, reward }) {\n return (\n <Screen>\n <SuccessAnimation \/>\n <Heading>You earned {reward.amount}!<\/Heading>\n <Text>\n Thanks to {referral.referrerName}'s referral, {reward.amount} has been\n added to your account.\n <\/Text>\n <Text style={styles.secondary}>\n {referral.referrerName} earned a reward too.\n <\/Text>\n <Button onPress={() => navigation.navigate('Home')}>\n Start Exploring\n <\/Button>\n <\/Screen>\n );\n}\n<\/code><\/pre>\n\n\n\nReward Visibility Throughout Onboarding<\/h2>\n\n\n\n
The reward is the referred user's primary motivator. Keep it visible at every step:<\/p>\n\n\n\n
Progress Indicators<\/h3>\n\n\n\nfunction ReferralProgress({ currentStep, totalSteps, rewardAmount }) {\n return (\n <View style={styles.progressBar}>\n <View style={styles.steps}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <StepDot key={i} completed={i < currentStep} \/>\n ))}\n <\/View>\n <Text style={styles.rewardText}>\n {currentStep < totalSteps\n ? `${rewardAmount} reward after signup`\n : `${rewardAmount} earned!`}\n <\/Text>\n <\/View>\n );\n}\n<\/code><\/pre>\n\n\n\nPersistent Banner<\/h3>\n\n\n\n
Show a subtle banner during onboarding that reminds the user about the reward:<\/p>\n\n\n\n
function ReferralBanner({ referral, dismissed, onDismiss }) {\n if (dismissed) return null;\n\n return (\n <Banner style={styles.referralBanner}>\n <Text>{referral.rewardAmount} reward waiting for you<\/Text>\n <CloseButton onPress={onDismiss} \/>\n <\/Banner>\n );\n}\n<\/code><\/pre>\n\n\n\nHandling Edge Cases<\/h2>\n\n\n\nReferrer No Longer Active<\/h3>\n\n\n\n
The person who referred the user may have deleted their account or been suspended:<\/p>\n\n\n\n
async function resolveReferrer(referrerId) {\n const referrer = await getUser(referrerId);\n\n if (referrer === null || referrer.status === 'suspended') {\n return {\n name: 'A friend',\n avatar: null,\n rewardStillValid: true, \/\/ Honor the reward regardless\n };\n }\n\n return {\n name: referrer.firstName,\n avatar: referrer.avatarUrl,\n rewardStillValid: true,\n };\n}\n<\/code><\/pre>\n\n\n\nAlways honor the reward even if the referrer's account is no longer active. The referred user shouldn't be penalized.<\/p>\n\n\n\n
Existing User Taps Referral Link<\/h3>\n\n\n\n
A user who already has an account taps a referral link:<\/p>\n\n\n\n
function handleReferralLinkForExistingUser(user, referralData) {\n if (user.referredBy) {\n \/\/ Already referred by someone\n showToast('You already have an account with a referral applied.');\n return;\n }\n\n \/\/ Allow applying referral to existing account (within grace period)\n const accountAge = Date.now() - user.createdAt;\n const GRACE_PERIOD = 7 * 24 * 60 * 60 * 1000; \/\/ 7 days\n\n if (accountAge < GRACE_PERIOD) {\n applyReferralToExistingAccount(user.id, referralData.referrerId);\n showToast(`Referral from ${referralData.referrerName} applied!`);\n } else {\n showToast('Referral codes can only be applied to new accounts.');\n }\n}\n<\/code><\/pre>\n\n\n\nReward Program Has Changed<\/h3>\n\n\n\n
If the reward terms changed between when the link was shared and when the user signs up:<\/p>\n\n\n\n
async function getApplicableReward(referralData) {\n const linkReward = referralData.rewardAmount; \/\/ What was promised in the link\n const currentReward = await getCurrentReferralReward(); \/\/ Current program terms\n\n \/\/ Honor whichever is more favorable to the user\n if (parseFloat(linkReward) > parseFloat(currentReward.amount)) {\n return { amount: linkReward, source: 'link_promise' };\n }\n\n return { amount: currentReward.amount, source: 'current_program' };\n}\n<\/code><\/pre>\n\n\n\nHonoring the promised reward builds trust. If the program changed, the user should never get less than what was advertised in the link they clicked.<\/p>\n\n\n\n
Referral Onboarding vs. Standard Onboarding<\/h2>\n\n\n\nWhat to Keep<\/h3>\n\n\n\n
Even for referred users, some onboarding steps are still necessary:<\/p>\n\n\n\n
\n- Account creation<\/strong>: Always required (but streamlined)<\/li>\n
- Permissions<\/strong>: Push notifications, location (if needed for core features)<\/li>\n
- Legal<\/strong>: Terms of service, privacy policy acceptance<\/li>\n
- Core setup<\/strong>: Anything required for the app to function (e.g., connecting a bank account for a finance app)<\/li>\n<\/ul>\n\n\n\n