@testernest/react-native 0.1.1

package/src/native.ts

@@ -0,0 +1,69 @@
+import { NativeModules, Platform } from 'react-native';
+
+export type InitOptions = {
+  publicKey: string;
+  baseUrl?: string;
+  enableLogs?: boolean;
+};
+
+export type DebugSnapshot = Record<string, any>;
+
+type NativeTesternest = {
+  init(options: InitOptions): Promise<void>;
+  track(name: string, properties?: Record<string, any> | null): void;
+  flush(): Promise<void>;
+  setCurrentScreen(screen: string | null): void;
+  connectTester(code6: string): Promise<void>;
+  disconnectTester(): Promise<void>;
+  getDebugSnapshot(): Promise<DebugSnapshot>;
+  isConnected(): Promise<boolean>;
+};
+
+const LINKING_ERROR =
+  `The package '@testernest/react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({
+    ios: "- You have run 'pod install'\n",
+    default: '- You have rebuilt the app after installing the package\n',
+  }) +
+  '- You are not using Expo Go\n';
+
+const Testernest = NativeModules.Testernest as NativeTesternest | undefined;
+
+function getModule(): NativeTesternest {
+  if (!Testernest) {
+    throw new Error(LINKING_ERROR);
+  }
+  return Testernest;
+}
+
+export function init(options: InitOptions): Promise<void> {
+  return getModule().init(options);
+}
+
+export function track(name: string, properties?: Record<string, any>): void {
+  getModule().track(name, properties ?? null);
+}
+
+export function flush(): Promise<void> {
+  return getModule().flush();
+}
+
+export function setCurrentScreen(screen: string | null): void {
+  getModule().setCurrentScreen(screen);
+}
+
+export function connectTester(code6: string): Promise<void> {
+  return getModule().connectTester(code6);
+}
+
+export function disconnectTester(): Promise<void> {
+  return getModule().disconnectTester();
+}
+
+export function getDebugSnapshot(): Promise<DebugSnapshot> {
+  return getModule().getDebugSnapshot();
+}
+
+export function isConnected(): Promise<boolean> {
+  return getModule().isConnected();
+}

package/src/testernestConnectPrompt.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { connectTester, init, isConnected } from './native';
+
+export type TesternestConnectPromptProps = {
+  publicKey: string;
+  baseUrl?: string;
+  enableLogs?: boolean;
+  title?: string;
+  subtitle?: string;
+  appName?: string;
+  showSkipButton?: boolean;
+  autoInit?: boolean;
+  forceVisibleToken?: number;
+};
+
+const styles = {
+  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'center', padding: 24 },
+  card: { backgroundColor: '#fff7ec', borderRadius: 16, padding: 20 },
+  title: { fontSize: 20, fontWeight: '700', color: '#1f1b16' },
+  subtitle: { marginTop: 8, fontSize: 14, color: '#4b3f35' },
+  appName: { marginTop: 6, fontSize: 14, fontWeight: '600', color: '#4b3f35' },
+  input: {
+    marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#d4c2ae',
+    borderRadius: 10,
+    padding: 10,
+    backgroundColor: '#fff',
+  },
+  error: { marginTop: 8, color: '#b00020', fontSize: 13 },
+  buttonRow: { flexDirection: 'row', marginTop: 16 },
+  skipButton: { flex: 1, marginRight: 8, padding: 12, borderRadius: 10, backgroundColor: '#efe0d1' },
+  skipText: { textAlign: 'center', color: '#4b3f35', fontWeight: '600' },
+  connectButton: { flex: 1, marginLeft: 8, padding: 12, borderRadius: 10, backgroundColor: '#1f6d5f' },
+  connectText: { textAlign: 'center', color: '#fff', fontWeight: '700' },
+};
+
+export function TesternestConnectPrompt({
+  publicKey,
+  baseUrl,
+  enableLogs = false,
+  title = 'Connect Tester',
+  subtitle = 'Enter your 6-digit code to connect.',
+  appName,
+  showSkipButton = true,
+  autoInit = true,
+  forceVisibleToken,
+}: TesternestConnectPromptProps) {
+  const [visible, setVisible] = useState(false);
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  const dismissedRef = useRef(false);
+
+  const isSixDigit = useMemo(() => /^\d{6}$/.test(code.trim()), [code]);
+
+  useEffect(() => {
+    dismissedRef.current = false;
+  }, [publicKey, baseUrl]);
+
+  useEffect(() => {
+    let active = true;
+    if (!autoInit || !publicKey) {
+      return undefined;
+    }
+    (async () => {
+      try {
+        await init({ publicKey, baseUrl, enableLogs });
+        const connected = await isConnected();
+        if (active && !connected && !dismissedRef.current) {
+          setVisible(true);
+        }
+      } catch (e) {
+        if (active) {
+          setError(e instanceof Error ? e.message : String(e));
+          setVisible(true);
+        }
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [publicKey, baseUrl, enableLogs, autoInit]);
+
+  useEffect(() => {
+    if (!forceVisibleToken || forceVisibleToken <= 0) {
+      return;
+    }
+    dismissedRef.current = false;
+    setError(null);
+    setCode('');
+    setVisible(true);
+  }, [forceVisibleToken]);
+
+  const handleSkip = () => {
+    dismissedRef.current = true;
+    setVisible(false);
+  };
+
+  const pollConnected = () => {
+    const startedAt = Date.now();
+    const interval = setInterval(async () => {
+      try {
+        const connected = await isConnected();
+        if (connected) {
+          clearInterval(interval);
+          dismissedRef.current = true;
+          setVisible(false);
+          setConnecting(false);
+          return;
+        }
+      } catch (e) {
+        clearInterval(interval);
+        setConnecting(false);
+        setError(e instanceof Error ? e.message : String(e));
+        return;
+      }
+      if (Date.now() - startedAt > 8000) {
+        clearInterval(interval);
+        setConnecting(false);
+        setError('Unable to connect. Check the code and try again.');
+      }
+    }, 400);
+  };
+
+  const handleConnect = async () => {
+    if (connecting) return;
+    if (!isSixDigit) {
+      setError('Enter a 6-digit code.');
+      return;
+    }
+    setError(null);
+    setConnecting(true);
+    try {
+      await connectTester(code.trim());
+      pollConnected();
+    } catch (e) {
+      setConnecting(false);
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <Modal transparent visible={visible} animationType="fade" onRequestClose={handleSkip}>
+      <View style={styles.backdrop}>
+        <View style={styles.card}>
+          <Text style={styles.title}>{title}</Text>
+          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+          {appName ? <Text style={styles.appName}>{appName}</Text> : null}
+          <TextInput
+            style={styles.input}
+            value={code}
+            onChangeText={setCode}
+            placeholder="123456"
+            keyboardType="number-pad"
+          />
+          {error ? <Text style={styles.error}>{error}</Text> : null}
+          <View style={styles.buttonRow}>
+            {showSkipButton ? (
+              <TouchableOpacity style={styles.skipButton} onPress={handleSkip}>
+                <Text style={styles.skipText}>Not now</Text>
+              </TouchableOpacity>
+            ) : null}
+            <TouchableOpacity style={styles.connectButton} onPress={handleConnect}>
+              <Text style={styles.connectText}>{connecting ? 'Connecting...' : 'Connect'}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}