mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
jjbruntonandClaude Fable 5
6bc4e31719
Bump expo, react, react-native, and all expo-* / react-native-* peers to the SDK 56 line via expo install --fix, adding expo-splash-screen and expo-system-ui for config plugins the SDK split out of core. Bump @bacons/apple-targets, react-native-view-shot, and other native modules to versions compatible with React Native 0.85 and the new architecture. Remove @react-navigation/* direct dependencies and route their hooks through expo-router, which is no longer compatible with react-navigation as of SDK 56. Fix RN 0.85's removed StyleSheet.absoluteFillObject (use absoluteFill) and react-native-view-shot 5.x's ViewShotRef type across call sites. Downgrade eslint-plugin-react-hooks v7's new React Compiler era rules to warnings pending a dedicated refactor, and repair Jest fallout from the jest-expo/reanimated/worklets/expo-media-library bumps. Regenerate the committed ios/ and android/ native projects with `expo prebuild --clean` (required for @bacons/apple-targets 5.x) against the production release channel, and document that requirement. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
import { Image, StyleSheet, Text, View } from "react-native";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import { featureColors, radius, spacing, typography } from "../../../theme";
|
|
|
|
const logo = require("../../../../assets/logo.png");
|
|
|
|
interface QuizResultsShareCardProps {
|
|
scorePercent: number;
|
|
cardWidth: number;
|
|
}
|
|
|
|
/**
|
|
* The card captured for sharing. Deliberately carries only the score, never the
|
|
* question text or answers, so a screenshot cannot leak either partner's content.
|
|
*/
|
|
export function QuizResultsShareCard({ scorePercent, cardWidth }: QuizResultsShareCardProps) {
|
|
return (
|
|
<View style={[styles.card, { width: cardWidth }]}>
|
|
<LinearGradient
|
|
colors={featureColors.quiz.gradient as [string, string]}
|
|
style={styles.gradient}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
>
|
|
<View style={styles.overlay} />
|
|
|
|
<View style={styles.content}>
|
|
<Text style={styles.tagline}>How well do you know each other?</Text>
|
|
<Text style={styles.label}>WE MATCHED ON</Text>
|
|
<Text style={styles.score}>{scorePercent}%</Text>
|
|
</View>
|
|
|
|
<View style={styles.branding}>
|
|
<Image source={logo} style={styles.brandingLogo} />
|
|
<Text style={styles.brandingText}>sauci.app</Text>
|
|
</View>
|
|
</LinearGradient>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
aspectRatio: 0.7,
|
|
borderRadius: radius.xl,
|
|
overflow: "hidden",
|
|
},
|
|
gradient: {
|
|
flex: 1,
|
|
padding: spacing.lg,
|
|
justifyContent: "space-between",
|
|
},
|
|
overlay: {
|
|
...StyleSheet.absoluteFill,
|
|
backgroundColor: "rgba(0, 0, 0, 0.08)",
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
tagline: {
|
|
...typography.subhead,
|
|
color: "rgba(255, 255, 255, 0.85)",
|
|
textAlign: "center",
|
|
marginBottom: spacing.xl,
|
|
},
|
|
label: {
|
|
...typography.caption1,
|
|
fontWeight: "600",
|
|
letterSpacing: 3,
|
|
color: "rgba(255, 255, 255, 0.85)",
|
|
marginBottom: spacing.xs,
|
|
},
|
|
score: {
|
|
...typography.largeTitle,
|
|
fontSize: 64,
|
|
lineHeight: 72,
|
|
fontWeight: "800",
|
|
color: "#ffffff",
|
|
},
|
|
branding: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: spacing.sm,
|
|
},
|
|
brandingLogo: {
|
|
width: 24,
|
|
height: 24,
|
|
resizeMode: "contain",
|
|
},
|
|
brandingText: {
|
|
...typography.subhead,
|
|
color: "#ffffff",
|
|
fontWeight: "600",
|
|
},
|
|
});
|