Travel Scrapbook Collage App UI Design in Expo

import { Inter_400Regular, Inter_500Medium, Inter_600SemiBold } from '@expo-google-fonts/inter';
import { PlayfairDisplay_700Bold } from '@expo-google-fonts/playfair-display';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    PlayfairDisplay_700Bold,
  });

  if (!fontsLoaded) return null;

  return <Stack screenOptions={{ headerShown: false }} />;
}

import { Image } from 'expo-image';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

const accent = '#D8F36A';

export default function MainScreen() {
  return (
    <Screen background="#FFFFFF" statusBar="dark">
      <View style={{ flex: 1 }}>
        <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
          <Defs>
            <RadialGradient id="glow4" cx="50%" cy="0%" rx="120%" ry="60%" fx="50%" fy="0%">
              <Stop offset="0%" stopColor="#5a3a4c" />
              <Stop offset="45%" stopColor="#3e2833" />
              <Stop offset="100%" stopColor="#2a1b23" />
            </RadialGradient>
          </Defs>
          <Rect width="100%" height="100%" fill="url(#glow4)" />
        </Svg>
        <View
          style={{
            height: 50,
            paddingVertical: 0,
            paddingHorizontal: 30,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}
        />
        <View
          style={{
            paddingTop: 24,
            paddingBottom: 0,
            paddingHorizontal: 20,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}>
          <View style={{ alignItems: 'center', gap: 10, flexShrink: 1, flexDirection: 'row' }}>
            <Image
              source={{ uri: asset('a77a77d7e2.jpg') }}
              contentFit="cover"
              accessibilityLabel="Mariana"
              style={{
                width: 40,
                height: 40,
                borderRadius: '50%',
                borderWidth: 2,
                borderColor: 'rgba(255,255,255,0.55)',
              }}
            />
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_500Medium',
                fontSize: 15,
                color: '#f3e9ef',
              }}>
              Hello, Mariana
            </Text>
          </View>
          <View style={{ gap: 10, flexShrink: 1, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications"
              style={{
                width: 44,
                height: 44,
                borderRadius: '50%',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.18)',
                backgroundColor: 'rgba(255,255,255,0.07)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#ffffff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
                <Path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Messages"
              style={{
                width: 44,
                height: 44,
                borderRadius: '50%',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.18)',
                backgroundColor: 'rgba(255,255,255,0.07)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#ffffff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
                <Path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
              </Svg>
            </Pressable>
          </View>
        </View>
        <View style={{ marginTop: 46, alignItems: 'center', gap: 8 }}>
          <Text
            style={{
              margin: 0,
              fontFamily: 'PlayfairDisplay_700Bold',
              fontSize: 34,
              color: '#ffffff',
              letterSpacing: 0.3,
            }}>
            Japan
          </Text>
          <Text
            style={{
              margin: 0,
              fontFamily: 'Inter_400Regular',
              fontSize: 13,
              color: 'rgba(255,255,255,0.72)',
            }}>
            Jan 14 — Jan 22 · 24 highlights
          </Text>
          <View style={{ alignItems: 'center', gap: 8, flexDirection: 'row' }}>
            <View style={{ flexShrink: 1, flexDirection: 'row' }}>
              <Image
                source={{ uri: asset('8ddbafb926.jpg') }}
                contentFit="cover"
                style={{
                  width: 23,
                  height: 23,
                  borderRadius: '50%',
                  borderWidth: 1.5,
                  borderColor: '#3e2833',
                }}
              />
              <Image
                source={{ uri: asset('b8dc454dc4.jpg') }}
                contentFit="cover"
                style={{
                  width: 23,
                  height: 23,
                  borderRadius: '50%',
                  borderWidth: 1.5,
                  borderColor: '#3e2833',
                  marginLeft: -7,
                }}
              />
              <Image
                source={{ uri: asset('2a5c783113.jpg') }}
                contentFit="cover"
                style={{
                  width: 23,
                  height: 23,
                  borderRadius: '50%',
                  borderWidth: 1.5,
                  borderColor: '#3e2833',
                  marginLeft: -7,
                }}
              />
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Inter_400Regular',
                fontSize: 13,
                color: 'rgba(255,255,255,0.8)',
              }}>
              35 friend match
            </Text>
          </View>
        </View>
        <Image
          source={{ uri: asset('7750c39e71.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            left: -240,
            top: 292,
            width: 262,
            height: 392,
            borderRadius: 32,
          }}
        />
        <Image
          source={{ uri: asset('01951ba61b.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            left: 368,
            top: 292,
            width: 262,
            height: 392,
            borderRadius: 32,
          }}
        />
        <Image
          source={{ uri: asset('aa0ed97e21.jpg') }}
          contentFit="cover"
          accessibilityLabel="Neon street in Shibuya at night"
          style={{
            position: 'absolute',
            left: 60,
            top: 278,
            width: 270,
            height: 420,
            borderRadius: 46,
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.14)',
            boxShadow: '0 28px 56px rgba(10,4,8,0.5)',
          }}
        />
        <View
          style={{
            position: 'absolute',
            left: 20,
            right: 20,
            bottom: 34,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}>
          <View
            style={{
              alignItems: 'center',
              gap: 4,
              padding: 6,
              borderRadius: 999,
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.16)',
              backgroundColor: 'rgba(255,255,255,0.07)',
              flexShrink: 1,
              flexDirection: 'row',
            }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Home"
              style={{
                width: 46,
                height: 46,
                borderRadius: '50%',
                borderWidth: 0,
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#ffffff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Trips, selected"
              style={{
                width: 46,
                height: 46,
                borderRadius: '50%',
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.22)',
                backgroundColor: 'rgba(255,255,255,0.16)',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#ffffff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Rect x="7" y="3" width="10" height="18" rx="2.5" />
                <Path d="M3 6v12" />
                <Path d="M21 6v12" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Favorites"
              style={{
                width: 46,
                height: 46,
                borderRadius: '50%',
                borderWidth: 0,
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#ffffff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z" />
              </Svg>
            </Pressable>
          </View>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Add highlight"
            style={{
              width: 58,
              height: 58,
              borderRadius: '50%',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.16)',
              backgroundColor: 'rgba(255,255,255,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke={accent}
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M12 5v14" />
              <Path d="M5 12h14" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';

const accent = '#D8F36A';

export default function CollageScreen() {
  return (
    <Screen background="#1d1219" statusBar="light">
      <View style={{ flex: 1 }}>
        <Image
          source={{ uri: asset('aa0ed97e21.jpg') }}
          contentFit="cover"
          style={{
            position: 'absolute',
            left: -80,
            top: -80,
            width: 550,
            height: 1004,
            filter: 'blur(48px) saturate(0.9) brightness(0.58)',
          }}
        />
        <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
          <LinearGradient
            colors={['rgba(30,16,24,0.5)', 'rgba(30,16,24,0.1)', 'rgba(20,12,18,0.55)']}
            locations={[0, 0.45, 1]}
            start={{ x: 0.5, y: 0 }}
            end={{ x: 0.5, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
          <LinearGradient
            colors={[
              'rgba(22,12,18,0.55)',
              'rgba(22,12,18,0)',
              'rgba(22,12,18,0)',
              'rgba(22,12,18,0.55)',
            ]}
            locations={[0, 0.4, 0.6, 1]}
            start={{ x: 0, y: 0.5 }}
            end={{ x: 1, y: 0.5 }}
            style={StyleSheet.absoluteFill}
          />
        </View>
        <View
          style={{
            height: 50,
            paddingVertical: 0,
            paddingHorizontal: 30,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}
        />
        <View
          style={{
            paddingTop: 12,
            paddingBottom: 0,
            paddingHorizontal: 20,
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/')}
            style={{
              width: 44,
              height: 44,
              borderRadius: '50%',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.18)',
              backgroundColor: 'rgba(255,255,255,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#ffffff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="m15 18-6-6 6-6" />
            </Svg>
          </Pressable>
          <View style={{ alignItems: 'center', gap: 3, flexShrink: 1 }}>
            <Text
              style={{
                margin: 0,
                fontFamily: 'Inter_600SemiBold',
                fontSize: 17,
                color: '#ffffff',
              }}>
              Japan
            </Text>
            <Text
              style={{
                margin: 0,
                fontFamily: 'Inter_400Regular',
                fontSize: 12,
                color: 'rgba(255,255,255,0.72)',
              }}>
              32.5k likes · 24 highlights
            </Text>
          </View>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Add to collage"
            style={{
              width: 44,
              height: 44,
              borderRadius: '50%',
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.18)',
              backgroundColor: 'rgba(255,255,255,0.07)',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke={accent}
              strokeWidth="2"
              strokeLinecap="round">
              <Path d="M12 5v14" />
              <Path d="M5 12h14" />
            </Svg>
          </Pressable>
        </View>
        <Text
          style={{
            position: 'absolute',
            left: 58,
            top: 186,
            margin: 0,
            fontFamily: 'Inter_400Regular',
            fontSize: 7,
            color: 'rgba(255,255,255,0.55)',
            lineHeight: 10.5,
          }}>
          ラーメン横丁 東京・新宿 夜の一杯
        </Text>
        <Image
          source={{ uri: asset('a507517a89.jpg') }}
          contentFit="cover"
          accessibilityLabel="Ramen shop with red lanterns"
          style={{
            position: 'absolute',
            left: 98,
            top: 172,
            width: 82,
            height: 132,
            borderRadius: 7,
            transform: [{ rotate: '2deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.45)',
          }}
        />
        <Image
          source={{ uri: asset('6a186a953e.jpg') }}
          contentFit="cover"
          accessibilityLabel="Bowl of tonkotsu ramen"
          style={{
            position: 'absolute',
            left: 32,
            top: 252,
            width: 108,
            height: 78,
            borderRadius: 7,
            transform: [{ rotate: '-5deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.5)',
          }}
        />
        <Image
          source={{ uri: asset('518ee1004b.png') }}
          contentFit="fill"
          style={{
            position: 'absolute',
            left: 160,
            top: 232,
            width: 40,
            transform: [{ rotate: '14deg' }],
          }}
        />
        <View
          style={{
            position: 'absolute',
            left: 86,
            top: 320,
            alignItems: 'center',
            gap: 4,
            paddingVertical: 3,
            paddingLeft: 4,
            paddingRight: 9,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.2)',
            flexDirection: 'row',
          }}>
          <Image
            source={{ uri: asset('6a186a953e.jpg') }}
            contentFit="cover"
            style={{ width: 14, height: 14, borderRadius: '50%' }}
          />
          <Text
            style={{
              fontFamily: 'Inter_400Regular',
              fontSize: 10,
              color: '#ffffff',
              flexShrink: 1,
            }}>
            slurpy ramen
          </Text>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 290,
            top: 214,
            width: 26,
            height: 9,
            backgroundColor: 'rgba(150,190,255,0.75)',
            transform: [{ rotate: '-38deg' }],
            borderRadius: 1,
          }}
        />
        <Image
          source={{ uri: asset('529b57b3ec.jpg') }}
          contentFit="cover"
          accessibilityLabel="Feeding a deer in Nara Park"
          style={{
            position: 'absolute',
            left: 318,
            top: 176,
            width: 66,
            height: 104,
            borderRadius: 7,
            transform: [{ rotate: '3deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.45)',
          }}
        />
        <Text
          style={{
            position: 'absolute',
            left: 316,
            top: 272,
            paddingVertical: 2,
            paddingHorizontal: 7,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.2)',
            fontFamily: 'Inter_400Regular',
            fontSize: 8,
            color: '#ffffff',
          }}>
          Nara 奈良
        </Text>
        <Image
          source={{ uri: asset('069948b159.jpg') }}
          contentFit="cover"
          accessibilityLabel="Tatami tea room with matcha"
          style={{
            position: 'absolute',
            left: 16,
            top: 430,
            width: 60,
            height: 58,
            borderRadius: 7,
            transform: [{ rotate: '-3deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.45)',
          }}
        />
        <Text
          style={{
            position: 'absolute',
            left: 84,
            top: 436,
            margin: 0,
            fontFamily: 'Inter_400Regular',
            fontSize: 7,
            color: 'rgba(255,255,255,0.5)',
            lineHeight: 10.5,
          }}>
          抹茶 京都の朝
        </Text>
        <Text
          style={{
            position: 'absolute',
            left: 50,
            top: 488,
            paddingVertical: 2,
            paddingHorizontal: 8,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.2)',
            fontFamily: 'Inter_400Regular',
            fontSize: 9,
            color: '#ffffff',
          }}>
          Tea time
        </Text>
        <Image
          source={{ uri: asset('2b453d8083.jpg') }}
          contentFit="cover"
          accessibilityLabel="Torii gate in Lake Ashi with Mount Fuji"
          style={{
            position: 'absolute',
            left: 226,
            top: 382,
            width: 112,
            height: 148,
            borderRadius: 8,
            boxShadow: '0 12px 28px rgba(0,0,0,0.45)',
          }}
        />
        <Image
          source={{ uri: asset('54c0ac64c9.jpg') }}
          contentFit="cover"
          accessibilityLabel="Woman in red kimono"
          style={{
            position: 'absolute',
            left: 330,
            top: 374,
            width: 32,
            height: 52,
            borderRadius: 5,
            transform: [{ rotate: '4deg' }],
            boxShadow: '0 6px 14px rgba(0,0,0,0.45)',
          }}
        />
        <Image
          source={{ uri: asset('c9c36ea091.png') }}
          contentFit="fill"
          style={{ position: 'absolute', left: 340, top: 426, width: 26 }}
        />
        <View
          style={{
            position: 'absolute',
            left: 190,
            top: 424,
            alignItems: 'center',
            gap: 3,
            paddingVertical: 2,
            paddingLeft: 5,
            paddingRight: 7,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.2)',
            flexDirection: 'row',
          }}>
          <Svg
            width="9"
            height="9"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#FFD66B"
            strokeWidth="2.4"
            strokeLinecap="round">
            <Circle cx="12" cy="12" r="4" />
            <Path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
          </Svg>
          <Text
            style={{
              fontFamily: 'Inter_400Regular',
              fontSize: 8,
              color: '#ffffff',
              flexShrink: 1,
            }}>
            24°
          </Text>
        </View>
        <Image
          source={{ uri: asset('839d30c1a0.jpg') }}
          contentFit="cover"
          accessibilityLabel="Snow-capped Mount Fuji"
          style={{
            position: 'absolute',
            left: 178,
            top: 474,
            width: 86,
            height: 64,
            borderRadius: 7,
            transform: [{ rotate: '-4deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.5)',
          }}
        />
        <Text
          style={{
            position: 'absolute',
            left: 252,
            top: 526,
            paddingVertical: 3,
            paddingHorizontal: 10,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.22)',
            fontFamily: 'Inter_500Medium',
            fontSize: 11,
            color: '#ffffff',
          }}>
          Fuji 富士
        </Text>
        <Text
          style={{
            position: 'absolute',
            left: 40,
            top: 646,
            paddingVertical: 2,
            paddingHorizontal: 6,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.2)',
            fontFamily: 'Inter_400Regular',
            fontSize: 8,
            color: '#ffffff',
          }}>
          10:26
        </Text>
        <Text
          style={{
            position: 'absolute',
            left: 176,
            top: 622,
            margin: 0,
            fontFamily: 'Inter_400Regular',
            fontSize: 10,
            color: 'rgba(255,255,255,0.75)',
            letterSpacing: 2,
          }}>
          ⁺ ˚ ✦ · ✧ ˚
        </Text>
        <Image
          source={{ uri: asset('bd270f828d.jpg') }}
          contentFit="cover"
          accessibilityLabel="3D cat billboard in Shinjuku"
          style={{
            position: 'absolute',
            left: 76,
            top: 620,
            width: 116,
            height: 138,
            borderRadius: 7,
            transform: [{ rotate: '-2deg' }],
            boxShadow: '0 12px 26px rgba(0,0,0,0.5)',
          }}
        />
        <Image
          source={{ uri: asset('5531c740a7.png') }}
          contentFit="fill"
          style={{
            position: 'absolute',
            left: 56,
            top: 716,
            width: 36,
            transform: [{ rotate: '-18deg' }],
          }}
        />
        <Text
          style={{
            position: 'absolute',
            left: 116,
            top: 748,
            paddingVertical: 3,
            paddingHorizontal: 10,
            borderRadius: 999,
            backgroundColor: 'rgba(28,16,24,0.72)',
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.22)',
            fontFamily: 'Inter_500Medium',
            fontSize: 11,
            color: '#ffffff',
          }}>
          kawaii neko
        </Text>
        <Image
          source={{ uri: asset('54c0ac64c9.jpg') }}
          contentFit="cover"
          contentPosition={{ left: '50%', top: '30%' }}
          accessibilityLabel="Kimono at Fushimi Inari"
          style={{
            position: 'absolute',
            left: 290,
            top: 648,
            width: 78,
            height: 84,
            borderRadius: 7,
            transform: [{ rotate: '3deg' }],
            boxShadow: '0 10px 24px rgba(0,0,0,0.5)',
          }}
        />
        <Text
          style={{
            position: 'absolute',
            left: 372,
            top: 656,
            margin: 0,
            fontFamily: 'Inter_400Regular',
            fontSize: 7,
            color: 'rgba(255,255,255,0.5)',
            lineHeight: 10.5,
          }}>
          伏見 稲荷
        </Text>
        <Image
          source={{ uri: asset('6bcac6fd8a.png') }}
          contentFit="fill"
          style={{
            position: 'absolute',
            left: 338,
            top: 708,
            width: 32,
            transform: [{ rotate: '10deg' }],
          }}
        />
      </View>
    </Screen>
  );
}

import { StatusBar } from 'expo-status-bar';
import type { ReactNode } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';

// Every screen is drawn on a 390 wide artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;

type Props = {
  background: string;
  statusBar: 'light' | 'dark';
  height?: number;
  children: ReactNode;
};

export function Screen({ background, statusBar, height: artboardHeight = 844, children }: Props) {
  const { width, height } = useWindowDimensions();
  const scale = width / ARTBOARD_WIDTH;

  return (
    <ScrollView
      bounces={false}
      showsVerticalScrollIndicator={false}
      style={{ flex: 1, backgroundColor: background }}
      contentContainerStyle={{ height: Math.max(artboardHeight * scale, height) }}>
      <StatusBar style={statusBar} />
      <View
        style={{
          width: ARTBOARD_WIDTH,
          height: artboardHeight,
          overflow: 'hidden',
          transformOrigin: 'left top',
          transform: [{ scale }],
        }}>
        {children}
      </View>
    </ScrollView>
  );
}

// Demo images are hosted by DeveloperMill. Point this at your own CDN, or swap to require().
const ASSET_BASE = 'https://developermill.com/app-designs/travel-collage-app-ui-design/assets';

export const asset = (name: string) => `${ASSET_BASE}/${name}`;