Mobile: show a scannable QR of the live page on the publish screen
CI / policy (push) Has been cancelled
CI / backend (push) Has been cancelled
CI / profile (push) Has been cancelled
CI / mobile (push) Has been cancelled

After publishing, render a QR of the cardclaws.com/<handle> URL (reusing
QRCodeView) so you can immediately show it for someone to scan → completing the
on-device loop: publish → show QR → scan → AI welcome.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-05 20:35:40 -05:00
co-authored by Claude Opus 4.8
parent fd7a55e809
commit 895ca4993a
+12 -1
View File
@@ -13,8 +13,10 @@ import {
StyleSheet, StyleSheet,
Text, Text,
TextInput, TextInput,
View,
} from "react-native"; } from "react-native";
import { publishToWeb } from "../src/api/ai"; import { publishToWeb } from "../src/api/ai";
import { QRCodeView } from "../src/components/card/QRCodeView";
import { wizardInputStyle } from "../src/components/genwizard/Wizard"; import { wizardInputStyle } from "../src/components/genwizard/Wizard";
import { useLocalCardsStore } from "../src/stores/localCardsStore"; import { useLocalCardsStore } from "../src/stores/localCardsStore";
@@ -105,7 +107,10 @@ export default function PublishScreen() {
{result && ( {result && (
<> <>
<Text style={styles.label}>Your live page</Text> <Text style={styles.label}>Your live page show this to scan</Text>
<View style={styles.qrWrap}>
<QRCodeView value={result} size={220} />
</View>
<Text style={styles.url} selectable> <Text style={styles.url} selectable>
{result} {result}
</Text> </Text>
@@ -144,6 +149,12 @@ const styles = StyleSheet.create({
}, },
ctaBusy: { opacity: 0.8 }, ctaBusy: { opacity: 0.8 },
ctaText: { color: "#fff", fontWeight: "700", fontSize: 17 }, ctaText: { color: "#fff", fontWeight: "700", fontSize: 17 },
qrWrap: {
backgroundColor: "#ffffff",
borderRadius: 16,
padding: 14,
alignSelf: "center",
},
url: { color: "#4da3ff", fontSize: 16 }, url: { color: "#4da3ff", fontSize: 16 },
secondary: { secondary: {
backgroundColor: "#222228", backgroundColor: "#222228",