You Only Get to Ask Once — Implementing a Notification Soft-Ask in Your Rork App to Lift Opt-In

// hooks/useNotificationPermission.ts
import { useCallback, useEffect, useState } from "react";
import * as Notifications from "expo-notifications";
 
type PermState = "loading" | "notDetermined" | "authorized" | "denied";
 
export function useNotificationPermission() {
  const [state, setState] = useState<PermState>("loading");
 
  const refresh = useCallback(async () => {
    const settings = await Notifications.getPermissionsAsync();
    if (settings.granted) {
      setState("authorized");
    } else if (settings.canAskAgain) {
      // canAskAgain === true means we can still show the system prompt
      setState("notDetermined");
    } else {
      setState("denied");
    }
  }, []);
 
  useEffect(() => {
    refresh();
  }, [refresh]);
 
  // The system prompt is fired only here
  const requestSystemPrompt = useCallback(async () => {
    const result = await Notifications.requestPermissionsAsync();
    await refresh();
    return result.granted;
  }, [refresh]);
 
  return { state, refresh, requestSystemPrompt };
}

// components/SoftAskModal.tsx
import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
 
type Props = {
  visible: boolean;
  onAllow: () => void;
  onDefer: () => void;
};
 
export function SoftAskModal({ visible, onAllow, onDefer }: Props) {
  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.backdrop}>
        <View style={styles.card}>
          <Text style={styles.title}>We'll bring you new wallpapers</Text>
          <Text style={styles.body}>
            When wallpapers close to your taste are added, we'll let you
            know right away. Low frequency, and you can turn it off anytime.
          </Text>
          <Pressable style={styles.primary} onPress={onAllow}>
            <Text style={styles.primaryText}>Turn on notifications</Text>
          </Pressable>
          <Pressable style={styles.secondary} onPress={onDefer}>
            <Text style={styles.secondaryText}>Later</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
}
 
const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.45)", justifyContent: "center", padding: 24 },
  card: { backgroundColor: "#fff", borderRadius: 20, padding: 24 },
  title: { fontSize: 20, fontWeight: "700", marginBottom: 8 },
  body: { fontSize: 15, lineHeight: 22, color: "#444", marginBottom: 20 },
  primary: { backgroundColor: "#111", borderRadius: 14, paddingVertical: 14, alignItems: "center" },
  primaryText: { color: "#fff", fontSize: 16, fontWeight: "600" },
  secondary: { paddingVertical: 12, alignItems: "center", marginTop: 4 },
  secondaryText: { color: "#888", fontSize: 15 },
});

// lib/softAskTrigger.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const KEY = "softask.v1";
 
type SoftAskRecord = { deferred: number; lastShownAt: number | null };
 
export async function shouldShowSoftAsk(): Promise<boolean> {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
 
  // After "Later" is tapped twice, stop showing it automatically (don't be noisy)
  if (rec.deferred >= 2) return false;
 
  // If shown within the last 3 days, leave some space
  if (rec.lastShownAt && Date.now() - rec.lastShownAt < 3 * 24 * 60 * 60 * 1000) {
    return false;
  }
  return true;
}
 
export async function recordShown() {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
  rec.lastShownAt = Date.now();
  await AsyncStorage.setItem(KEY, JSON.stringify(rec));
}
 
export async function recordDeferred() {
  const raw = await AsyncStorage.getItem(KEY);
  const rec: SoftAskRecord = raw ? JSON.parse(raw) : { deferred: 0, lastShownAt: null };
  rec.deferred += 1;
  await AsyncStorage.setItem(KEY, JSON.stringify(rec));
}

// inside the save button handler
import { shouldShowSoftAsk, recordShown, recordDeferred } from "../lib/softAskTrigger";
 
function WallpaperDetail() {
  const { state, requestSystemPrompt } = useNotificationPermission();
  const [askVisible, setAskVisible] = useState(false);
 
  const handleSave = async () => {
    await saveWallpaper(); // the actual save
 
    // Only present when undecided and the trigger condition is met
    if (state === "notDetermined" && (await shouldShowSoftAsk())) {
      await recordShown();
      track("softask_shown");       // <- measurement event (1)
      setAskVisible(true);
    }
  };
 
  const handleAllow = async () => {
    setAskVisible(false);
    track("softask_accepted");      // <- measurement event (2)
    const granted = await requestSystemPrompt();
    track(granted ? "os_permission_granted" : "os_permission_denied"); // <- (3)
  };
 
  const handleDefer = async () => {
    setAskVisible(false);
    await recordDeferred();
    track("softask_deferred");
  };
 
  return (
    <>
      {/* screen body omitted */}
      <SoftAskModal visible={askVisible} onAllow={handleAllow} onDefer={handleDefer} />
    </>
  );
}

import * as Linking from "expo-linking";
import { Alert } from "react-native";
 
function promptOpenSettings() {
  Alert.alert(
    "Notifications are off",
    "Turn them on in the Settings app and we can let you know about new arrivals.",
    [
      { text: "Close", style: "cancel" },
      { text: "Open Settings", onPress: () => Linking.openSettings() },
    ]
  );
}

{
  "expo": {
    "android": {
      "permissions": ["POST_NOTIFICATIONS"]
    }
  }
}