Dark Travel Booking App UI Design in Expo

import {
  Urbanist_400Regular,
  Urbanist_500Medium,
  Urbanist_600SemiBold,
  Urbanist_700Bold,
} from '@expo-google-fonts/urbanist';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    Urbanist_400Regular,
    Urbanist_500Medium,
    Urbanist_600SemiBold,
    Urbanist_700Bold,
  });

  if (!fontsLoaded) return null;

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

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, { Path } from 'react-native-svg';

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

const accent = '#D7F21C';

export default function MainScreen() {
  return (
    <Screen background="#0E1A1C" statusBar="light">
      <View style={{ flex: 1 }}>
        <Image
          source={{ uri: asset('e1bf02ed92.jpg') }}
          contentFit="cover"
          contentPosition={{ left: '50%', top: '50%' }}
          style={StyleSheet.absoluteFill}
        />
        <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
          <LinearGradient
            colors={['rgba(0,0,0,0.25)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.15)', 'rgba(0,0,0,0.85)']}
            locations={[0, 0.3, 0.55, 1]}
            start={{ x: 0.5, y: 0 }}
            end={{ x: 0.5, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
        </View>
        <View
          style={{
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingTop: 16,
            paddingBottom: 0,
            paddingLeft: 34,
            paddingRight: 30,
            height: 54,
            flexDirection: 'row',
          }}
        />
        <View style={{ position: 'absolute', left: 24, right: 24, bottom: 36, gap: 16 }}>
          <Text
            style={{
              margin: 0,
              fontFamily: 'Urbanist_600SemiBold',
              fontSize: 34,
              color: '#FFFFFF',
              letterSpacing: -0.3,
              lineHeight: 40.12,
            }}>
            Embark on Your Next Great Adventure
          </Text>
          <Text
            style={{
              margin: 0,
              fontFamily: 'Urbanist_400Regular',
              fontSize: 14,
              color: 'rgba(255,255,255,0.82)',
              lineHeight: 21.7,
            }}>
            Discover exciting places, meet new people, and turn every moment into an unforgettable
            adventure.
          </Text>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Get started"
            onPress={() => router.navigate('/home')}
            style={{
              marginTop: 22,
              height: 62,
              borderRadius: 31,
              backgroundColor: accent,
              alignItems: 'center',
              paddingVertical: 0,
              paddingHorizontal: 8,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 48,
                height: 48,
                borderRadius: 24,
                backgroundColor: '#141414',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#fff"
                strokeWidth="2.2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M9 6l6 6-6 6" />
              </Svg>
            </View>
            <Text
              style={{
                flexGrow: 1,
                flexShrink: 1,
                fontFamily: 'Urbanist_600SemiBold',
                fontSize: 17,
                color: '#111111',
                textAlign: 'center',
              }}>
              Get Started
            </Text>
            <View
              style={{
                width: 48,
                height: 48,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#111"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 6l6 6-6 6" />
                <Path d="M12 6l6 6-6 6" />
              </Svg>
            </View>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { useState } from 'react';
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';

// Screen state, and the values the layout below reads from it.
function useScreen() {
  const [state, setScreenState] = useState<Record<string, any>>({ fav: true });
  const setState = (patch: Record<string, any>) =>
    setScreenState((current) => ({ ...current, ...patch }));

  return {
    accent: '#D7F21C',
    favFill: state.fav ? '#FF4D4D' : 'none',
    favStroke: state.fav ? '#FF4D4D' : '#FFFFFF',
    toggleFav: () => setState({ fav: !state.fav }),
  };
}

export default function DetailScreen() {
  const { accent, favFill, favStroke, toggleFav } = useScreen();
  return (
    <Screen background="#161616" statusBar="light">
      <View style={{ flex: 1 }}>
        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 450 }}>
          <Image
            source={{ uri: asset('86739333ab.jpg') }}
            contentFit="cover"
            contentPosition={{ left: '50%', top: '30%' }}
            style={StyleSheet.absoluteFill}
          />
          <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
            <LinearGradient
              colors={['rgba(0,0,0,0.2)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.55)']}
              locations={[0, 0.25, 0.6, 1]}
              start={{ x: 0.5, y: 0 }}
              end={{ x: 0.5, y: 1 }}
              style={StyleSheet.absoluteFill}
            />
          </View>
        </View>
        <View
          style={{
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingTop: 16,
            paddingBottom: 0,
            paddingLeft: 34,
            paddingRight: 30,
            height: 54,
            flexDirection: 'row',
          }}
        />
        <View
          style={{
            position: 'absolute',
            top: 62,
            left: 20,
            right: 20,
            justifyContent: 'space-between',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="link"
            accessibilityLabel="Back"
            onPress={() => router.navigate('/home')}
            style={{
              width: 44,
              height: 44,
              borderRadius: 22,
              backgroundColor: 'rgba(255,255,255,0.3)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#fff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M19 12H5M11 6l-6 6 6 6" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Save Bali Island"
            onPress={toggleFav}
            style={{
              width: 44,
              height: 44,
              borderRadius: 22,
              borderWidth: 0,
              backgroundColor: 'rgba(255,255,255,0.3)',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
            }}>
            <Svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill={favFill}
              stroke={favStroke}
              strokeWidth="2"
              strokeLinejoin="round">
              <Path d="M12 20s-7-4.5-9.2-9C1.3 7.7 3.5 4.5 6.8 4.5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.3 0 5.5 3.2 4 6.5C19 15.5 12 20 12 20z" />
            </Svg>
          </Pressable>
        </View>
        <View
          style={{
            position: 'absolute',
            top: 352,
            left: 20,
            right: 20,
            justifyContent: 'space-between',
            alignItems: 'flex-end',
            flexDirection: 'row',
          }}>
          <View style={{ gap: 2, flexShrink: 1 }}>
            <Text
              style={{
                fontFamily: 'Urbanist_400Regular',
                fontSize: 13,
                color: 'rgba(255,255,255,0.88)',
              }}>
              Indonesia
            </Text>
            <Text style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 22, color: '#FFFFFF' }}>
              Bali Island
            </Text>
          </View>
          <Text
            style={{ flexShrink: 1, fontFamily: 'Urbanist_700Bold', fontSize: 32, color: accent }}>
            $999
          </Text>
        </View>
        <View
          style={{
            position: 'absolute',
            top: 420,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: '#161616',
            borderTopLeftRadius: 28,
            borderTopRightRadius: 28,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            paddingTop: 18,
            paddingBottom: 0,
            paddingHorizontal: 20,
            gap: 18,
          }}>
          <View style={{ flexDirection: 'row', gap: 10 }}>
            <Image
              source={{ uri: asset('89dc6d3905.jpg') }}
              contentFit="cover"
              accessibilityLabel="Limestone rocks over a coral reef"
              style={{ width: '100%', height: 76, borderRadius: 14, flex: 1 }}
            />
            <Image
              source={{ uri: asset('2d7ae2dab1.jpg') }}
              contentFit="cover"
              accessibilityLabel="White sand beach and turquoise bay"
              style={{ width: '100%', height: 76, borderRadius: 14, flex: 1 }}
            />
            <Image
              source={{ uri: asset('b5d23dbdd7.jpg') }}
              contentFit="cover"
              accessibilityLabel="Small island ringed by reef"
              style={{ width: '100%', height: 76, borderRadius: 14, flex: 1 }}
            />
          </View>
          <View style={{ flexDirection: 'row', gap: 8 }}>
            <View
              style={{
                height: 44,
                borderRadius: 22,
                backgroundColor: '#262626',
                alignItems: 'center',
                gap: 8,
                paddingVertical: 0,
                paddingHorizontal: 6,
                flex: 1,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: 16,
                  backgroundColor: accent,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  flexDirection: 'row',
                }}>
                <Svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#111"
                  strokeWidth="2.2"
                  strokeLinecap="round">
                  <Circle cx="12" cy="12" r="8" />
                  <Path d="M12 8v4l3 2" />
                </Svg>
              </View>
              <View style={{ flexShrink: 1 }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_600SemiBold',
                    fontSize: 12,
                    color: '#FFFFFF',
                    lineHeight: 13.8,
                  }}>
                  15-18hrs
                </Text>
                <Text
                  style={{
                    fontFamily: 'Urbanist_400Regular',
                    fontSize: 10,
                    color: '#B5B5B5',
                    lineHeight: 11.5,
                  }}>
                  Duration
                </Text>
              </View>
            </View>
            <View
              style={{
                height: 44,
                borderRadius: 22,
                backgroundColor: '#262626',
                alignItems: 'center',
                gap: 8,
                paddingVertical: 0,
                paddingHorizontal: 6,
                flex: 1,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: 16,
                  backgroundColor: accent,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  flexDirection: 'row',
                }}>
                <Svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#111"
                  strokeWidth="2.2"
                  strokeLinecap="round">
                  <Circle cx="12" cy="12" r="6" />
                  <Circle cx="12" cy="12" r="2" fill="#111" />
                  <Path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
                </Svg>
              </View>
              <View style={{ flexShrink: 1 }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_600SemiBold',
                    fontSize: 12,
                    color: '#FFFFFF',
                    lineHeight: 13.8,
                  }}>
                  125km
                </Text>
                <Text
                  style={{
                    fontFamily: 'Urbanist_400Regular',
                    fontSize: 10,
                    color: '#B5B5B5',
                    lineHeight: 11.5,
                  }}>
                  Distance
                </Text>
              </View>
            </View>
            <View
              style={{
                height: 44,
                borderRadius: 22,
                backgroundColor: '#262626',
                alignItems: 'center',
                gap: 8,
                paddingVertical: 0,
                paddingHorizontal: 6,
                flex: 1,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 32,
                  height: 32,
                  borderRadius: 16,
                  backgroundColor: accent,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                  flexDirection: 'row',
                }}>
                <Svg width="16" height="16" viewBox="0 0 24 24" fill="#111">
                  <Path d="M12 3l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 16.4 6.7 19.4l1.2-6L3.4 9.3l6-.7z" />
                </Svg>
              </View>
              <View style={{ flexShrink: 1 }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_600SemiBold',
                    fontSize: 12,
                    color: '#FFFFFF',
                    lineHeight: 13.8,
                  }}>
                  4.9k
                </Text>
                <Text
                  style={{
                    fontFamily: 'Urbanist_400Regular',
                    fontSize: 10,
                    color: '#B5B5B5',
                    lineHeight: 11.5,
                  }}>
                  Reviews
                </Text>
              </View>
            </View>
          </View>
          <View style={{ gap: 10 }}>
            <Text
              style={{
                margin: 0,
                fontFamily: 'Urbanist_600SemiBold',
                fontSize: 22,
                color: '#FFFFFF',
              }}>
              About travel
            </Text>
            <Text
              style={{
                margin: 0,
                fontFamily: 'Urbanist_400Regular',
                fontSize: 13,
                color: '#CFCFCF',
                lineHeight: 20.8,
              }}>
              Bali is a tropical paradise that blends breathtaking natural beauty with rich cultural
              heritage. From emerald rice terraces and ancient temples to sun-kissed beaches and
              vibrant local markets, every corner of the island offers a new adventure.
            </Text>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 20,
            right: 20,
            bottom: 30,
            gap: 12,
            alignItems: 'center',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Share"
            style={{
              width: 58,
              height: 58,
              borderRadius: 29,
              borderWidth: 0,
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#111"
              strokeWidth="2"
              strokeLinecap="round">
              <Circle cx="18" cy="5" r="2.5" />
              <Circle cx="6" cy="12" r="2.5" />
              <Circle cx="18" cy="19" r="2.5" />
              <Path d="M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            style={{
              flexGrow: 1,
              height: 58,
              borderRadius: 29,
              borderWidth: 0,
              backgroundColor: accent,
              flexShrink: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                fontFamily: 'Urbanist_600SemiBold',
                fontSize: 17,
                color: '#111111',
                textAlign: 'center',
              }}>
              Book Now
            </Text>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

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

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

// Screen state, and the values the layout below reads from it.
function useScreen() {
  const [state, setScreenState] = useState<Record<string, any>>({
    chip: 0,
    tab: 0,
    fav1: false,
    fav2: false,
  });
  const setState = (patch: Record<string, any>) =>
    setScreenState((current) => ({ ...current, ...patch }));

  const accent = '#D7F21C';
  const labels = ['Nearby', 'Ocean', 'Mountain', 'Forest', 'Desert'];
  const chips = labels.map((label, i) => {
    const on = state.chip === i;
    const base =
      'height: 48px; border-radius: 24px; border: 0; flex-shrink: 0; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; ';
    const size = i === 0 ? 'width: 76px; ' : 'padding: 0 26px; ';
    const color = on
      ? `background: ${accent}; color: #111111;`
      : 'background: #262626; color: #FFFFFF;';
    return {
      label,
      isIcon: i === 0,
      isText: i !== 0,
      style: base + size + color,
      pick: () => setState({ chip: i }),
    };
  });
  const tabNames = ['Home', 'Offers', 'Bookings', 'Profile'];
  const tabs = tabNames.map((label, i) => {
    const on = state.tab === i;
    return {
      label,
      home: i === 0,
      tag: i === 1,
      cal: i === 2,
      user: i === 3,
      color: on ? '#111111' : '#FFFFFF',
      style: `width: 48px; height: 48px; border-radius: 24px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: ${on ? accent : 'transparent'};`,
      pick: () => setState({ tab: i }),
    };
  });
  return {
    accent,
    chips,
    tabs,
    fav1Fill: state.fav1 ? '#FF4D4D' : 'none',
    fav2Fill: state.fav2 ? '#FF4D4D' : 'none',
    toggleFav1: () => setState({ fav1: !state.fav1 }),
    toggleFav2: () => setState({ fav2: !state.fav2 }),
  };
}

export default function HomeScreen() {
  const { accent, chips, tabs, fav1Fill, fav2Fill, toggleFav1, toggleFav2 } = useScreen();
  return (
    <Screen background="#161616" statusBar="light">
      <View style={{ flex: 1 }}>
        <View
          style={{
            justifyContent: 'space-between',
            alignItems: 'center',
            paddingTop: 16,
            paddingBottom: 0,
            paddingLeft: 34,
            paddingRight: 30,
            height: 54,
            flexDirection: 'row',
          }}
        />
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ gap: 20, paddingHorizontal: 20, paddingBottom: 120 }}
          style={{ position: 'absolute', top: 54, left: 0, right: 0, bottom: 0, paddingTop: 14 }}>
          <View
            style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
            <View style={{ alignItems: 'center', gap: 12, flexShrink: 1, flexDirection: 'row' }}>
              <Image
                source={{ uri: asset('94ee8837ac.jpg') }}
                contentFit="cover"
                accessibilityLabel="Alex"
                style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: accent }}
              />
              <View style={{ gap: 2, flexShrink: 1 }}>
                <Text style={{ fontFamily: 'Urbanist_400Regular', fontSize: 14, color: '#C9C9C9' }}>
                  Hi, Alex
                </Text>
                <Text
                  style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 17, color: '#FFFFFF' }}>
                  Welcome Back
                </Text>
              </View>
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Notifications"
              style={{
                width: 48,
                height: 48,
                borderRadius: 24,
                borderWidth: 0,
                backgroundColor: '#262626',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#fff"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9" />
                <Path d="M10 20a2 2 0 0 0 4 0" />
              </Svg>
              <View
                style={{
                  position: 'absolute',
                  top: 12,
                  right: 13,
                  width: 11,
                  height: 11,
                  borderRadius: 4,
                  backgroundColor: '#FF4D4D',
                  borderWidth: 1.5,
                  borderColor: '#262626',
                }}
              />
            </Pressable>
          </View>
          <View style={{ gap: 12, alignItems: 'center', flexDirection: 'row' }}>
            <View
              style={{
                flexGrow: 1,
                height: 52,
                borderRadius: 26,
                backgroundColor: '#262626',
                alignItems: 'center',
                gap: 10,
                paddingVertical: 0,
                paddingHorizontal: 18,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#BDBDBD"
                strokeWidth="2"
                strokeLinecap="round">
                <Circle cx="11" cy="11" r="7" />
                <Path d="M20 20l-4-4" />
              </Svg>
              <TextInput
                placeholder="Search.."
                placeholderTextColor="#8A8A8A"
                accessibilityLabel="Search destinations"
                style={{
                  flexGrow: 1,
                  minWidth: 0,
                  borderWidth: 0,
                  flexShrink: 1,
                  fontFamily: 'Urbanist_400Regular',
                  fontSize: 15,
                  color: '#fff',
                }}
              />
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Filters"
              style={{
                width: 52,
                height: 52,
                borderRadius: 26,
                borderWidth: 0,
                backgroundColor: '#262626',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#fff"
                strokeWidth="1.8"
                strokeLinecap="round">
                <Path d="M4 7h10M18 7h2M4 17h4M12 17h8" />
                <Circle cx="16" cy="7" r="2" />
                <Circle cx="10" cy="17" r="2" />
              </Svg>
            </Pressable>
          </View>
          <View style={{ gap: 10, marginRight: -20, overflow: 'hidden', flexDirection: 'row' }}>
            {chips.map((chip, index) => (
              <Pressable
                key={index}
                accessibilityRole="button"
                accessibilityLabel={chip.label}
                onPress={chip.pick}
                style={{
                  flexShrink: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  ...css(chip.style),
                }}>
                {chip.isIcon ? (
                  <Svg
                    width="22"
                    height="22"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#111"
                    strokeWidth="2"
                    strokeLinecap="round">
                    <Circle cx="12" cy="12" r="7" />
                    <Circle cx="12" cy="12" r="2.5" fill="#111" />
                    <Path d="M12 2v3M12 19v3M2 12h3M19 12h3" />
                  </Svg>
                ) : null}
                {chip.isText ? (
                  <Text
                    style={[
                      {
                        fontFamily: 'Urbanist_400Regular',
                        fontSize: 13.33,
                        color: '#000000',
                        textAlign: 'center',
                      },
                      cssText(chip.style),
                    ]}>
                    {chip.label}
                  </Text>
                ) : null}
              </Pressable>
            ))}
          </View>
          <View
            style={{
              justifyContent: 'space-between',
              alignItems: 'baseline',
              flexDirection: 'row',
            }}>
            <Text
              style={{
                margin: 0,
                flexShrink: 1,
                fontFamily: 'Urbanist_600SemiBold',
                fontSize: 20,
                color: '#FFFFFF',
              }}>
              Popular Destination
            </Text>
            <Pressable accessibilityRole="link" style={{ flexShrink: 1 }}>
              <Text style={{ fontFamily: 'Urbanist_500Medium', fontSize: 14, color: accent }}>
                View All
              </Text>
            </Pressable>
          </View>
          <View style={{ height: 300, borderRadius: 28, overflow: 'hidden', flexShrink: 0 }}>
            <Image
              source={{ uri: asset('86739333ab.jpg') }}
              contentFit="cover"
              contentPosition={{ left: '50%', top: '40%' }}
              style={StyleSheet.absoluteFill}
            />
            <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
              <LinearGradient
                colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.6)']}
                locations={[0.5, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Save Bali Island"
              onPress={toggleFav1}
              style={{
                position: 'absolute',
                top: 14,
                right: 14,
                width: 40,
                height: 40,
                borderRadius: 20,
                borderWidth: 0,
                backgroundColor: 'rgba(255,255,255,0.28)',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill={fav1Fill}
                stroke="#fff"
                strokeWidth="2"
                strokeLinejoin="round">
                <Path d="M12 20s-7-4.5-9.2-9C1.3 7.7 3.5 4.5 6.8 4.5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.3 0 5.5 3.2 4 6.5C19 15.5 12 20 12 20z" />
              </Svg>
            </Pressable>
            <View
              style={{
                position: 'absolute',
                left: 18,
                right: 14,
                bottom: 16,
                justifyContent: 'space-between',
                alignItems: 'flex-end',
                flexDirection: 'row',
              }}>
              <View style={{ gap: 2, flexShrink: 1 }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_400Regular',
                    fontSize: 12,
                    color: 'rgba(255,255,255,0.85)',
                  }}>
                  Indonesia
                </Text>
                <Text
                  style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 20, color: '#FFFFFF' }}>
                  Bali Island
                </Text>
              </View>
              <Pressable
                accessibilityRole="link"
                onPress={() => router.navigate('/detail')}
                style={{
                  height: 40,
                  paddingVertical: 0,
                  paddingHorizontal: 20,
                  borderRadius: 20,
                  backgroundColor: accent,
                  alignItems: 'center',
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_600SemiBold',
                    fontSize: 14,
                    color: '#111',
                    flexShrink: 1,
                  }}>
                  Book Now
                </Text>
              </Pressable>
            </View>
          </View>
          <View style={{ height: 300, borderRadius: 28, overflow: 'hidden', flexShrink: 0 }}>
            <Image
              source={{ uri: asset('9937adc1a3.jpg') }}
              contentFit="cover"
              contentPosition={{ left: '50%', top: '60%' }}
              style={StyleSheet.absoluteFill}
            />
            <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
              <LinearGradient
                colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.6)']}
                locations={[0.5, 1]}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
                style={StyleSheet.absoluteFill}
              />
            </View>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Save destination"
              onPress={toggleFav2}
              style={{
                position: 'absolute',
                top: 14,
                right: 14,
                width: 40,
                height: 40,
                borderRadius: 20,
                borderWidth: 0,
                backgroundColor: 'rgba(255,255,255,0.28)',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill={fav2Fill}
                stroke="#fff"
                strokeWidth="2"
                strokeLinejoin="round">
                <Path d="M12 20s-7-4.5-9.2-9C1.3 7.7 3.5 4.5 6.8 4.5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.3 0 5.5 3.2 4 6.5C19 15.5 12 20 12 20z" />
              </Svg>
            </Pressable>
            <View
              style={{
                position: 'absolute',
                left: 18,
                right: 14,
                bottom: 16,
                justifyContent: 'space-between',
                alignItems: 'flex-end',
                flexDirection: 'row',
              }}>
              <View style={{ gap: 2, flexShrink: 1 }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_400Regular',
                    fontSize: 12,
                    color: 'rgba(255,255,255,0.85)',
                  }}>
                  Indonesia
                </Text>
                <Text
                  style={{ fontFamily: 'Urbanist_600SemiBold', fontSize: 20, color: '#FFFFFF' }}>
                  Raja Ampat
                </Text>
              </View>
              <Pressable
                accessibilityRole="link"
                onPress={() => router.navigate('/detail')}
                style={{
                  height: 40,
                  paddingVertical: 0,
                  paddingHorizontal: 20,
                  borderRadius: 20,
                  backgroundColor: accent,
                  alignItems: 'center',
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Urbanist_600SemiBold',
                    fontSize: 14,
                    color: '#111',
                    flexShrink: 1,
                  }}>
                  Book Now
                </Text>
              </Pressable>
            </View>
          </View>
        </ScrollView>
        <View
          style={{
            position: 'absolute',
            left: '50%',
            bottom: 26,
            transform: [{ translateX: '-50%' }],
            height: 64,
            paddingVertical: 0,
            paddingHorizontal: 8,
            borderRadius: 32,
            backgroundColor: 'rgba(48,48,48,0.92)',
            alignItems: 'center',
            gap: 10,
            boxShadow: '0 10px 30px rgba(0,0,0,0.45)',
            flexDirection: 'row',
          }}>
          {tabs.map((tab, index) => (
            <Pressable
              key={index}
              accessibilityRole="button"
              accessibilityLabel={tab.label}
              onPress={tab.pick}
              style={{
                flexShrink: 1,
                alignItems: 'center',
                justifyContent: 'center',
                ...css(tab.style),
              }}>
              {tab.home ? (
                <Svg
                  width="22"
                  height="22"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke={tab.color}
                  strokeWidth="2"
                  strokeLinejoin="round">
                  <Path d="M4 10.5L12 4l8 6.5V20h-5v-5h-6v5H4z" />
                </Svg>
              ) : null}
              {tab.tag ? (
                <Svg
                  width="22"
                  height="22"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke={tab.color}
                  strokeWidth="2"
                  strokeLinejoin="round">
                  <Path d="M3 12V4h8l10 10-8 8z" />
                  <Circle cx="7.5" cy="8" r="1.5" fill={tab.color} />
                </Svg>
              ) : null}
              {tab.cal ? (
                <Svg
                  width="22"
                  height="22"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke={tab.color}
                  strokeWidth="2"
                  strokeLinecap="round">
                  <Rect x="4" y="5" width="16" height="15" rx="2" />
                  <Path d="M8 3v4M16 3v4M4 10h16M8 14h2M14 14h2M8 17h2" />
                </Svg>
              ) : null}
              {tab.user ? (
                <Svg width="22" height="22" viewBox="0 0 24 24" fill={tab.color}>
                  <Circle cx="12" cy="8" r="4" />
                  <Path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z" />
                </Svg>
              ) : null}
            </Pressable>
          ))}
        </View>
      </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/dark-travel-booking-app-ui-design/assets';

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

import type { TextStyle, ViewStyle } from 'react-native';

// A few styles change with state, so they are kept as short CSS strings from the design.
const FACES: Record<number, string> = {400: 'Urbanist_400Regular', 500: 'Urbanist_500Medium', 600: 'Urbanist_600SemiBold', 700: 'Urbanist_700Bold', 800: 'Urbanist_800ExtraBold'};

const px = (value: string) => (value.endsWith('%') ? (value as `${number}%`) : parseFloat(value));

function declarations(source: string) {
  return source
    .split(';')
    .map((rule) => rule.split(':').map((part) => part.trim()))
    .filter(([name, value]) => name && value);
}

export function css(source: string): ViewStyle {
  const style: Record<string, unknown> = {};

  for (const [name, ...rest] of declarations(source)) {
    const value = rest.join(':');

    if (name === 'background' || name === 'background-color') {
      style.backgroundColor = value;
    } else if (name === 'border') {
      const [width, , ...color] = value.split(' ');
      if (value === 'none' || value === '0') style.borderWidth = 0;
      else {
        style.borderWidth = parseFloat(width);
        style.borderColor = color.join(' ');
      }
    } else if (name === 'display' && value === 'flex') {
      style.flexDirection = style.flexDirection ?? 'row';
    } else if (name === 'flex-direction') {
      style.flexDirection = value;
    } else if (name === 'align-items') {
      style.alignItems = value;
    } else if (name === 'justify-content') {
      style.justifyContent = value;
    } else if (name === 'box-shadow') {
      style.boxShadow = value;
    } else if (name === 'position') {
      style.position = value === 'absolute' ? 'absolute' : 'relative';
    } else if (name === 'opacity') {
      style.opacity = parseFloat(value);
    } else if (name === 'gap' || name === 'width' || name === 'height' || name === 'left' || name === 'top') {
      style[name] = px(value);
    } else if (name === 'border-radius') {
      style.borderRadius = px(value);
    } else if (name === 'padding') {
      const [vertical, horizontal = vertical] = value.split(' ');
      style.paddingVertical = px(vertical);
      style.paddingHorizontal = px(horizontal);
    } else if (name === 'white-space' && value === 'nowrap') {
      style.flexShrink = 0;
    } else if (name === 'flex-shrink') {
      style.flexShrink = parseFloat(value);
    } else if (name === 'flex') {
      if (value === 'none') style.flexGrow = 0;
      else style.flex = parseFloat(value);
    }
  }

  return style as ViewStyle;
}

export function cssText(source: string): TextStyle {
  const style: Record<string, unknown> = {};

  for (const [name, value] of declarations(source)) {
    if (name === 'color') style.color = value;
    if (name === 'font-size') style.fontSize = parseFloat(value);
    if (name === 'font-weight' && FACES[Number(value)]) style.fontFamily = FACES[Number(value)];
    if (name === 'text-decoration' && value.startsWith('line-through')) {
      style.textDecorationLine = 'line-through';
    }
  }

  return style as TextStyle;
}