chrisandClaude Opus 5.5
3568b71e90
- Redesign matching the web: album-art backdrops, Reanimated equalizer, spinning live ring, drifting ambient background, gradient buttons with spring press feedback and haptics, Space Grotesk headings, animated feed (enter + layout transitions); fix invisible tab labels - Four-step onboarding for new accounts: which app you listen with (sets where songs open), the matching share setup, find friends (search, scan, invite), and a featured song. Skippable; stored server-side - QR codes: My code (share link) and an in-app scanner (camera only, no microphone permission) - Spotify setup via Last.fm or ListenBrainz with guided linking; Android shares Spotify automatically through the phone reader - New logo as app icon, adaptive/monochrome icon and splash - app.config.ts allows cleartext only for local http:// test builds Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
20 lines
868 B
TypeScript
20 lines
868 B
TypeScript
import { useMemo } from 'react';
|
|
import { View } from 'react-native';
|
|
import Svg, { Path, Rect } from 'react-native-svg';
|
|
import { qrShape } from '@musicshare/shared';
|
|
|
|
/** Black-on-white QR code (scanners need the contrast) with the standard 4-module quiet zone. */
|
|
export function QrCode({ value, size = 240 }: { value: string; size?: number }) {
|
|
const shape = useMemo(() => qrShape(value), [value]);
|
|
const quiet = 4;
|
|
const total = shape.size + quiet * 2;
|
|
return (
|
|
<View accessible accessibilityLabel={`QR code for ${value}`} style={{ width: size, height: size, borderRadius: 16, overflow: 'hidden' }}>
|
|
<Svg width={size} height={size} viewBox={`${-quiet} ${-quiet} ${total} ${total}`}>
|
|
<Rect x={-quiet} y={-quiet} width={total} height={total} fill="#ffffff" />
|
|
<Path d={shape.path} fill="#000000" />
|
|
</Svg>
|
|
</View>
|
|
);
|
|
}
|