Mobile Banking App UI Design in Expo

import {
  Manrope_400Regular,
  Manrope_500Medium,
  Manrope_600SemiBold,
  Manrope_700Bold,
  Manrope_800ExtraBold,
} from '@expo-google-fonts/manrope';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    Manrope_400Regular,
    Manrope_500Medium,
    Manrope_600SemiBold,
    Manrope_700Bold,
    Manrope_800ExtraBold,
  });

  if (!fontsLoaded) return null;

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

import { Pressable, Text, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';

import { Screen } from '@/components/screen';
import { Stripes } from '@/components/stripes';

const accent = '#CFE8E2';

export default function GoalScreen() {
  return (
    <Screen background="#EEEFF1" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View style={{ paddingTop: 52, paddingBottom: 0, paddingHorizontal: 20, gap: 16 }}>
          <View
            style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Back"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 1.5,
                borderColor: '#121212',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#121212"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="m15 18-6-6 6-6" />
              </Svg>
            </Pressable>
            <View style={{ alignItems: 'center', gap: 8, flexShrink: 1, flexDirection: 'row' }}>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="More options"
                style={{
                  width: 44,
                  height: 44,
                  borderRadius: 22,
                  borderWidth: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                  padding: 0,
                  flexDirection: 'row',
                }}>
                <Svg width="20" height="20" viewBox="0 0 24 24" fill="#121212">
                  <Circle cx="5" cy="12" r="2" />
                  <Circle cx="12" cy="12" r="2" />
                  <Circle cx="19" cy="12" r="2" />
                </Svg>
              </Pressable>
              <View
                accessibilityRole="image"
                accessibilityLabel="Profile, Aarav Shah"
                style={{
                  width: 58,
                  height: 58,
                  borderRadius: 26,
                  backgroundColor: '#E3D9F5',
                  borderWidth: 3,
                  borderColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Manrope_800ExtraBold',
                    fontSize: 17,
                    color: '#3B2A66',
                    flexShrink: 1,
                  }}>
                  AS
                </Text>
              </View>
            </View>
          </View>
          <View style={{ gap: 2 }}>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 13, color: '#5C5F66' }}>
              Savings goal
            </Text>
            <Text
              style={{
                fontFamily: 'Manrope_800ExtraBold',
                fontSize: 32,
                color: '#121212',
                letterSpacing: -0.64,
              }}>
              Goa Trip 🏝️
            </Text>
          </View>
          <View style={{ alignItems: 'center', height: 60, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 60,
                borderRadius: 30,
                borderWidth: 0,
                backgroundColor: '#F6DDB8',
                alignItems: 'center',
                gap: 10,
                paddingVertical: 0,
                paddingLeft: 6,
                paddingRight: 20,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 49,
                  height: 49,
                  borderRadius: 23,
                  borderWidth: 1.5,
                  borderColor: '#121212',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M12 19V5" />
                  <Path d="m5 12 7-7 7 7" />
                </Svg>
              </View>
              <Text
                style={{
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 15,
                  color: '#121212',
                  flexShrink: 1,
                }}>
                Withdraw
              </Text>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Add money"
              style={{
                width: 70,
                height: 70,
                marginVertical: 0,
                marginHorizontal: -10,
                zIndex: 2,
                borderRadius: 30,
                borderWidth: 5,
                borderColor: '#EEEFF1',
                backgroundColor: '#121212',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#FFFFFF"
                strokeWidth="2.2"
                strokeLinecap="round">
                <Path d="M12 5v14M5 12h14" />
              </Svg>
            </Pressable>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 60,
                borderRadius: 30,
                borderWidth: 0,
                backgroundColor: accent,
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 10,
                paddingVertical: 0,
                paddingLeft: 20,
                paddingRight: 6,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 15,
                  color: '#121212',
                  flexShrink: 1,
                }}>
                Share
              </Text>
              <View
                style={{
                  width: 49,
                  height: 49,
                  borderRadius: 23,
                  borderWidth: 1.5,
                  borderColor: '#121212',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Circle cx="18" cy="5" r="3" />
                  <Circle cx="6" cy="12" r="3" />
                  <Circle cx="18" cy="19" r="3" />
                  <Path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4" />
                </Svg>
              </View>
            </Pressable>
          </View>
          <View style={{ alignItems: 'center', gap: 2, paddingTop: 4 }}>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#5C5F66' }}>
              Target amount
            </Text>
            <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 28, color: '#121212' }}>
              ₹1,50,000
              <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 12, color: '#5C5F66' }}>
                {' '}
                by Mar 2027
              </Text>
            </Text>
          </View>
          <View style={{ gap: 8 }}>
            <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_400Regular',
                  fontSize: 12,
                  color: '#5C5F66',
                }}>
                Left to reach the goal
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 12,
                  color: '#121212',
                }}>
                ₹57,000
              </Text>
            </View>
            <View
              accessibilityRole="image"
              accessibilityLabel="62% saved"
              style={{
                height: 36,
                backgroundColor: '#FFFFFF',
                borderRadius: 15,
                padding: 3,
                gap: 3,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: '62%',
                  backgroundColor: '#E3D9F5',
                  borderRadius: 12,
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Manrope_700Bold',
                    fontSize: 11,
                    color: '#3B2A66',
                    flexShrink: 1,
                  }}>
                  62% saved
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  borderRadius: 12,
                  alignItems: 'center',
                  justifyContent: 'center',
                  overflow: 'hidden',
                  flexDirection: 'row',
                }}>
                <Stripes first={'#EEEFF1'} second={'#FFFFFF'} size={4} angle={135} />
                <Text
                  style={{
                    fontFamily: 'Manrope_600SemiBold',
                    fontSize: 11,
                    color: '#5C5F66',
                    flexShrink: 1,
                  }}>
                  38%
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View
          style={{
            marginTop: 18,
            marginBottom: 0,
            marginHorizontal: 12,
            backgroundColor: '#121212',
            borderRadius: 28,
            padding: 8,
            gap: 6,
          }}>
          <View
            style={{
              position: 'absolute',
              top: 126,
              left: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              position: 'absolute',
              top: 126,
              right: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              alignItems: 'center',
              gap: 12,
              padding: 10,
              backgroundColor: '#1E1F22',
              borderRadius: 18,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#121212"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M12 5v14" />
                <Path d="m19 12-7 7-7-7" />
              </Svg>
            </View>
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                Your deposits
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#A4A7AD' }}>
                24 top-ups
              </Text>
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_700Bold',
                fontSize: 14,
                color: '#FFFFFF',
              }}>
              ₹68,400
            </Text>
          </View>
          <View
            style={{
              alignItems: 'center',
              gap: 12,
              padding: 10,
              backgroundColor: '#1E1F22',
              borderRadius: 18,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                backgroundColor: '#F6DDB8',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 13,
                  color: '#5A3A10',
                  flexShrink: 1,
                }}>
                +3
              </Text>
            </View>
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                Friends chipping in 🤝
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#A4A7AD' }}>
                9 contributions
              </Text>
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_700Bold',
                fontSize: 14,
                color: '#FFFFFF',
              }}>
              ₹24,600
            </Text>
          </View>
          <View
            style={{
              gap: 10,
              paddingVertical: 14,
              paddingHorizontal: 10,
              marginVertical: 0,
              marginHorizontal: 10,
              borderTopWidth: 1.5,
              borderTopColor: '#3A3C40',
              borderStyle: 'dashed',
            }}>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 13,
                  color: '#FFFFFF',
                }}>
                Auto-save ⚡
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_400Regular',
                  fontSize: 12,
                  color: '#A4A7AD',
                }}>
                Every Monday
              </Text>
            </View>
            <View
              style={{
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
              }}>
              <Pressable
                accessibilityRole="button"
                style={{
                  alignItems: 'center',
                  gap: 8,
                  borderWidth: 1,
                  borderColor: '#4A4D52',
                  paddingVertical: 8,
                  paddingHorizontal: 12,
                  borderRadius: 16,
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <View
                  style={{
                    width: 22,
                    height: 22,
                    borderRadius: 11,
                    backgroundColor: '#CFE8E2',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_800ExtraBold',
                      fontSize: 12,
                      color: '#121212',
                      flexShrink: 1,
                    }}>
                    ₹
                  </Text>
                </View>
                <Text
                  style={{
                    fontFamily: 'Manrope_600SemiBold',
                    fontSize: 13,
                    color: '#FFFFFF',
                    flexShrink: 1,
                  }}>
                  From Savings ▾
                </Text>
              </Pressable>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 26,
                  color: '#FFFFFF',
                }}>
                2,500
                <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 11, color: '#A4A7AD' }}>
                  {' '}
                  / week
                </Text>
              </Text>
            </View>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: 110,
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Top up goal"
            style={{
              width: 84,
              height: 84,
              borderRadius: 42,
              borderWidth: 8,
              borderColor: '#FFFFFF',
              backgroundColor: '#121212',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              boxShadow: '0 0 0 1.5px #121212',
              flexDirection: 'row',
            }}>
            <Svg
              width="26"
              height="26"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#FFFFFF"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M12 3v12" />
              <Path d="m7 10 5 5 5-5" />
              <Path d="M5 21h14" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Pressable, Text, View } from 'react-native';
import Svg, { Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';

const accent = '#CFE8E2';
const bars = [
  { label: '₹1.2k', h: 52, fill: 'rgba(18,18,18,0.18)' },
  { label: '₹2.8k', h: 82, fill: 'rgba(18,18,18,0.18)' },
  { label: '₹1.9k', h: 64, fill: 'rgba(18,18,18,0.18)' },
  { label: '₹3.4k', h: 96, fill: 'rgba(18,18,18,0.18)' },
  { label: '₹2.1k', h: 70, fill: 'rgba(18,18,18,0.18)' },
  { label: '₹3.9k', h: 104, fill: '#121212' },
  { label: '₹1.5k', h: 58, fill: 'rgba(18,18,18,0.18)' },
];

export default function MainScreen() {
  return (
    <Screen background="#EEEFF1" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View style={{ paddingTop: 52, paddingBottom: 0, paddingHorizontal: 20, gap: 18 }}>
          <View
            style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
            <View style={{ gap: 2, flexShrink: 1 }}>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 20, color: '#121212' }}>
                Hey, Aarav
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 14, color: '#5C5F66' }}>
                Good afternoon! 👋
              </Text>
            </View>
            <View style={{ alignItems: 'center', gap: 10, flexShrink: 1, flexDirection: 'row' }}>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel="Notifications"
                style={{
                  width: 44,
                  height: 44,
                  borderRadius: 22,
                  borderWidth: 1.5,
                  borderColor: '#121212',
                  alignItems: 'center',
                  justifyContent: 'center',
                  padding: 0,
                  flexDirection: 'row',
                }}>
                <Svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M6 8a6 6 0 0 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>
              <View
                accessibilityRole="image"
                accessibilityLabel="Profile, Aarav Shah"
                style={{
                  width: 58,
                  height: 58,
                  borderRadius: 26,
                  backgroundColor: '#E3D9F5',
                  borderWidth: 3,
                  borderColor: '#FFFFFF',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Text
                  style={{
                    fontFamily: 'Manrope_800ExtraBold',
                    fontSize: 17,
                    color: '#3B2A66',
                    flexShrink: 1,
                  }}>
                  AS
                </Text>
              </View>
            </View>
          </View>
          <View style={{ gap: 4 }}>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 13, color: '#5C5F66' }}>
              Total balance
            </Text>
            <View style={{ alignItems: 'baseline', gap: 10, flexDirection: 'row' }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 34,
                  color: '#121212',
                  letterSpacing: -0.68,
                }}>
                ₹4,82,560<Text style={{ color: '#8A8D93' }}>.40</Text>
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 12,
                  color: '#1E6B55',
                }}>
                {'▲ 2.4% '}
                <Text style={{ fontFamily: 'Manrope_500Medium', color: '#5C5F66' }}>
                  this month
                </Text>
              </Text>
            </View>
          </View>
          <View style={{ alignItems: 'center', height: 60, flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 60,
                borderRadius: 30,
                borderWidth: 1.5,
                borderColor: '#121212',
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                gap: 12,
                paddingVertical: 0,
                paddingLeft: 6,
                paddingRight: 22,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 49,
                  height: 49,
                  borderRadius: 23,
                  borderWidth: 1.5,
                  borderColor: '#121212',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M12 19V5" />
                  <Path d="m5 12 7-7 7 7" />
                </Svg>
              </View>
              <Text
                style={{
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 15,
                  color: '#121212',
                  flexShrink: 1,
                }}>
                Send
              </Text>
            </Pressable>
            <View
              style={{
                width: 30,
                height: 30,
                marginVertical: 0,
                marginHorizontal: -12,
                zIndex: 2,
                borderRadius: 15,
                backgroundColor: '#EEEFF1',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#121212"
                strokeWidth="2"
                strokeLinecap="round">
                <Path d="M7 7l10 10M17 7 7 17" />
              </Svg>
            </View>
            <Pressable
              accessibilityRole="button"
              style={{
                flex: 1,
                height: 60,
                borderRadius: 30,
                borderWidth: 0,
                backgroundColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 12,
                paddingVertical: 0,
                paddingLeft: 22,
                paddingRight: 6,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 15,
                  color: '#121212',
                  flexShrink: 1,
                }}>
                Request
              </Text>
              <View
                style={{
                  width: 49,
                  height: 49,
                  borderRadius: 23,
                  borderWidth: 1.5,
                  borderColor: '#121212',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M12 5v14" />
                  <Path d="m19 12-7 7-7-7" />
                </Svg>
              </View>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            marginTop: 18,
            marginBottom: 0,
            marginHorizontal: 12,
            backgroundColor: '#FFFFFF',
            borderRadius: 30,
            padding: 8,
            gap: 8,
          }}>
          <View
            style={{
              position: 'absolute',
              top: 226,
              left: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              position: 'absolute',
              top: 226,
              right: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              backgroundColor: accent,
              borderRadius: 24,
              paddingTop: 16,
              paddingBottom: 14,
              paddingHorizontal: 16,
              gap: 12,
            }}>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 14,
                  color: '#121212',
                }}>
                Spending 💸
              </Text>
              <View
                style={{
                  gap: 4,
                  backgroundColor: 'rgba(255,255,255,0.6)',
                  borderRadius: 16,
                  padding: 3,
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    paddingVertical: 5,
                    paddingHorizontal: 9,
                    borderRadius: 12,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_600SemiBold',
                      fontSize: 11,
                      color: '#3E4248',
                      textAlign: 'center',
                    }}>
                    1D
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    backgroundColor: '#FFFFFF',
                    paddingVertical: 5,
                    paddingHorizontal: 9,
                    borderRadius: 12,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_700Bold',
                      fontSize: 11,
                      color: '#121212',
                      textAlign: 'center',
                    }}>
                    7D
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    paddingVertical: 5,
                    paddingHorizontal: 9,
                    borderRadius: 12,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_600SemiBold',
                      fontSize: 11,
                      color: '#3E4248',
                      textAlign: 'center',
                    }}>
                    1M
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    paddingVertical: 5,
                    paddingHorizontal: 9,
                    borderRadius: 12,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_600SemiBold',
                      fontSize: 11,
                      color: '#3E4248',
                      textAlign: 'center',
                    }}>
                    1Y
                  </Text>
                </Pressable>
              </View>
            </View>
            <View
              style={{
                alignItems: 'flex-end',
                justifyContent: 'space-between',
                height: 129,
                paddingVertical: 0,
                paddingHorizontal: 4,
                borderBottomWidth: 1,
                borderBottomColor: 'rgba(18,18,18,0.25)',
                borderStyle: 'dashed',
                flexDirection: 'row',
              }}>
              {bars.map((bar, index) => (
                <View key={index} style={{ alignItems: 'center', gap: 6, flexShrink: 1 }}>
                  <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 10, color: '#121212' }}>
                    {bar.label}
                  </Text>
                  <View
                    style={{
                      width: 26,
                      height: bar.h,
                      borderTopLeftRadius: 13,
                      borderTopRightRadius: 13,
                      borderBottomRightRadius: 4,
                      borderBottomLeftRadius: 4,
                      backgroundColor: bar.fill,
                    }}
                  />
                </View>
              ))}
            </View>
            <View
              style={{
                justifyContent: 'space-between',
                paddingVertical: 0,
                paddingHorizontal: 6,
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                M
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                T
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                W
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                T
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                F
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                S
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 11,
                  color: '#3E4248',
                }}>
                S
              </Text>
            </View>
          </View>
          <View style={{ backgroundColor: '#121212', borderRadius: 24, padding: 8, gap: 6 }}>
            <View
              style={{
                alignItems: 'center',
                gap: 12,
                padding: 10,
                borderWidth: 1,
                borderColor: '#34363A',
                borderRadius: 18,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 20,
                  backgroundColor: '#CFE8E2',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Path d="M3 10h18" />
                  <Path d="M5 10V20h14V10" />
                  <Path d="M12 3 3 8h18z" />
                </Svg>
              </View>
              <View style={{ flex: 1, gap: 2 }}>
                <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                  Savings account
                </Text>
                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#A4A7AD' }}>
                  •••• 4021
                </Text>
              </View>
              <View style={{ alignItems: 'flex-end', gap: 2, flexShrink: 1 }}>
                <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                  ₹3,64,210
                </Text>
                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: '#8FD6BD' }}>
                  +₹8,400
                </Text>
              </View>
            </View>
            <View
              style={{
                alignItems: 'center',
                gap: 12,
                padding: 10,
                borderWidth: 1,
                borderColor: '#34363A',
                borderRadius: 18,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 20,
                  backgroundColor: '#F6DDB8',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                }}>
                <Svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round">
                  <Rect x="2" y="5" width="20" height="14" rx="2" />
                  <Path d="M2 10h20" />
                </Svg>
              </View>
              <View style={{ flex: 1, gap: 2 }}>
                <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                  Credit card
                </Text>
                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#A4A7AD' }}>
                  Due in 6 days
                </Text>
              </View>
              <View style={{ alignItems: 'flex-end', gap: 2, flexShrink: 1 }}>
                <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: '#FFFFFF' }}>
                  ₹18,350
                </Text>
                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: '#F3B98A' }}>
                  Pay now
                </Text>
              </View>
            </View>
            <Pressable
              accessibilityRole="link"
              style={{ alignSelf: 'flex-end', paddingVertical: 4, paddingHorizontal: 8 }}>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#C7CAD0' }}>
                View all ›
              </Text>
            </Pressable>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 12,
            right: 12,
            bottom: 18,
            height: 72,
            backgroundColor: '#121212',
            borderRadius: 36,
            alignItems: 'center',
            justifyContent: 'space-around',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Insights"
            style={{
              width: 48,
              height: 48,
              borderRadius: 24,
              borderWidth: 1.5,
              borderColor: '#4A4D52',
              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 17 6-6 4 4 8-8" />
              <Path d="M14 7h7v7" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Home"
            style={{
              width: 76,
              height: 76,
              marginTop: -30,
              borderRadius: 32,
              borderWidth: 6,
              borderColor: '#EEEFF1',
              backgroundColor: '#FFFFFF',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 0,
              flexDirection: 'row',
            }}>
            <Svg
              width="22"
              height="22"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#121212"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round">
              <Path d="M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z" />
            </Svg>
          </Pressable>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Cards and services"
            style={{
              width: 48,
              height: 48,
              borderRadius: 24,
              borderWidth: 1.5,
              borderColor: '#4A4D52',
              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">
              <Rect x="3" y="3" width="7" height="7" rx="2" />
              <Rect x="14" y="3" width="7" height="7" rx="2" />
              <Rect x="3" y="14" width="7" height="7" rx="2" />
              <Rect x="14" y="14" width="7" height="7" rx="2" />
            </Svg>
          </Pressable>
        </View>
      </View>
    </Screen>
  );
}

import { Pressable, Text, TextInput, View } from 'react-native';
import Svg, { Path, Rect } from 'react-native-svg';

import { Screen } from '@/components/screen';

const accent = '#CFE8E2';

export default function TransferScreen() {
  return (
    <Screen background="#EEEFF1" statusBar="dark">
      <View style={{ flex: 1 }}>
        <View style={{ paddingTop: 52, paddingBottom: 0, paddingHorizontal: 20, gap: 18 }}>
          <View
            style={{ alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row' }}>
            <Pressable
              accessibilityRole="button"
              accessibilityLabel="Back"
              style={{
                width: 44,
                height: 44,
                borderRadius: 22,
                borderWidth: 1.5,
                borderColor: '#121212',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 0,
                flexDirection: 'row',
              }}>
              <Svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#121212"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="m15 18-6-6 6-6" />
              </Svg>
            </Pressable>
            <View
              style={{
                alignItems: 'center',
                gap: 8,
                backgroundColor: '#FFFFFF',
                borderRadius: 20,
                paddingVertical: 8,
                paddingHorizontal: 14,
                flexShrink: 1,
                flexDirection: 'row',
              }}>
              <Svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#121212"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Rect x="3" y="11" width="18" height="10" rx="2" />
                <Path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </Svg>
              <Text
                style={{
                  fontFamily: 'Manrope_600SemiBold',
                  fontSize: 12,
                  color: '#121212',
                  flexShrink: 1,
                }}>
                UPI secured
              </Text>
            </View>
          </View>
          <View style={{ gap: 2 }}>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 13, color: '#5C5F66' }}>
              Quote locked for ⏳
            </Text>
            <View style={{ alignItems: 'baseline', gap: 8, flexDirection: 'row' }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 34,
                  color: '#121212',
                  letterSpacing: -0.68,
                }}>
                00:04:52
              </Text>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_400Regular',
                  fontSize: 12,
                  color: '#5C5F66',
                }}>
                minutes
              </Text>
            </View>
          </View>
        </View>
        <View style={{ marginTop: 18, marginBottom: 0, marginHorizontal: 12 }}>
          <View
            style={{
              position: 'absolute',
              top: 148,
              left: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              position: 'absolute',
              top: 148,
              right: -14,
              width: 28,
              height: 28,
              borderRadius: 14,
              backgroundColor: '#EEEFF1',
              zIndex: 3,
            }}
          />
          <View
            style={{
              backgroundColor: accent,
              borderRadius: 28,
              paddingTop: 18,
              paddingBottom: 30,
              paddingHorizontal: 18,
              gap: 14,
            }}>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 13,
                  color: '#121212',
                }}>
                You send
              </Text>
              <View style={{ gap: 6, flexShrink: 1, flexDirection: 'row' }}>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    backgroundColor: '#F6DDB8',
                    paddingVertical: 6,
                    paddingHorizontal: 12,
                    borderRadius: 14,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_700Bold',
                      fontSize: 11,
                      color: '#5A3A10',
                      textAlign: 'center',
                    }}>
                    Half
                  </Text>
                </Pressable>
                <Pressable
                  accessibilityRole="button"
                  style={{
                    borderWidth: 0,
                    backgroundColor: '#E3D9F5',
                    paddingVertical: 6,
                    paddingHorizontal: 12,
                    borderRadius: 14,
                    flexShrink: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_700Bold',
                      fontSize: 11,
                      color: '#3B2A66',
                      textAlign: 'center',
                    }}>
                    Max
                  </Text>
                </Pressable>
              </View>
            </View>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <Pressable
                accessibilityRole="button"
                style={{
                  alignItems: 'center',
                  gap: 10,
                  borderWidth: 0,
                  padding: 0,
                  flexShrink: 1,
                  flexDirection: 'row',
                }}>
                <View
                  style={{
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    backgroundColor: '#121212',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_800ExtraBold',
                      fontSize: 17,
                      color: '#FFFFFF',
                      flexShrink: 1,
                    }}>
                    ₹
                  </Text>
                </View>
                <Text
                  style={{
                    fontFamily: 'Manrope_700Bold',
                    fontSize: 15,
                    color: '#121212',
                    flexShrink: 1,
                  }}>
                  Savings ••4021
                </Text>
                <Svg
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#121212"
                  strokeWidth="2.2"
                  strokeLinecap="round">
                  <Path d="m6 9 6 6 6-6" />
                </Svg>
              </Pressable>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 26,
                  color: '#121212',
                }}>
                12,500
                <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 12, color: '#3E4248' }}>
                  {' '}
                  INR
                </Text>
              </Text>
            </View>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#3E4248' }}>
              Available ₹3,64,210
            </Text>
          </View>
          <View
            style={{
              position: 'absolute',
              left: '50%',
              top: 152,
              transform: [{ translateX: '-50%' }],
              width: 70,
              height: 70,
              borderRadius: 35,
              backgroundColor: '#EEEFF1',
              alignItems: 'center',
              justifyContent: 'center',
              zIndex: 2,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 58,
                height: 58,
                borderRadius: 27,
                backgroundColor: '#121212',
                borderWidth: 2,
                borderColor: '#FFFFFF',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#FFFFFF"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M7 4v16" />
                <Path d="m3 8 4-4 4 4" />
                <Path d="M17 20V4" />
                <Path d="m21 16-4 4-4-4" />
              </Svg>
            </View>
          </View>
          <View
            style={{
              backgroundColor: '#121212',
              borderRadius: 28,
              paddingTop: 30,
              paddingBottom: 18,
              paddingHorizontal: 18,
              marginTop: 8,
              gap: 14,
            }}>
            <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 13, color: '#FFFFFF' }}>
              Priya receives 🎉
            </Text>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <View style={{ alignItems: 'center', gap: 10, flexShrink: 1, flexDirection: 'row' }}>
                <View
                  style={{
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    backgroundColor: '#F6DDB8',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'row',
                  }}>
                  <Text
                    style={{
                      fontFamily: 'Manrope_800ExtraBold',
                      fontSize: 14,
                      color: '#5A3A10',
                      flexShrink: 1,
                    }}>
                    PK
                  </Text>
                </View>
                <View style={{ gap: 2, flexShrink: 1 }}>
                  <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 15, color: '#FFFFFF' }}>
                    Priya Kulkarni
                  </Text>
                  <Text
                    style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: '#A4A7AD' }}>
                    priya.k@okorbit
                  </Text>
                </View>
              </View>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_800ExtraBold',
                  fontSize: 26,
                  color: '#FFFFFF',
                }}>
                12,500
                <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 12, color: '#A4A7AD' }}>
                  {' '}
                  INR
                </Text>
              </Text>
            </View>
            <View
              style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                flexDirection: 'row',
              }}>
              <Text
                style={{
                  flexShrink: 1,
                  fontFamily: 'Manrope_400Regular',
                  fontSize: 12,
                  color: '#A4A7AD',
                }}>
                Last sent 3 days ago
              </Text>
              <Pressable
                accessibilityRole="button"
                style={{
                  borderWidth: 1,
                  borderColor: '#4A4D52',
                  paddingVertical: 6,
                  paddingHorizontal: 12,
                  borderRadius: 14,
                  flexShrink: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <Text
                  style={{
                    fontFamily: 'Manrope_600SemiBold',
                    fontSize: 11,
                    color: '#FFFFFF',
                    textAlign: 'center',
                  }}>
                  Change ▾
                </Text>
              </Pressable>
            </View>
          </View>
        </View>
        <View style={{ paddingTop: 22, paddingBottom: 0, paddingHorizontal: 24, gap: 14 }}>
          <View style={{ gap: 6 }}>
            <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 13, color: '#5C5F66' }}>
              Note
            </Text>
            <TextInput
              defaultValue="Rent share — November 🏠"
              style={{
                borderWidth: 0,
                borderBottomWidth: 1,
                borderBottomColor: '#C9CBD0',
                paddingVertical: 6,
                paddingHorizontal: 0,
                fontFamily: 'Manrope_600SemiBold',
                fontSize: 14,
                color: '#121212',
              }}
            />
          </View>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_400Regular',
                fontSize: 13,
                color: '#5C5F66',
              }}>
              Transfer fee
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_700Bold',
                fontSize: 13,
                color: '#121212',
              }}>
              ₹0.00
            </Text>
          </View>
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_400Regular',
                fontSize: 13,
                color: '#5C5F66',
              }}>
              Arrives
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_700Bold',
                fontSize: 13,
                color: '#121212',
              }}>
              Instantly
            </Text>
          </View>
          <View style={{ height: 1, backgroundColor: '#D6D8DC' }} />
          <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_600SemiBold',
                fontSize: 14,
                color: '#121212',
              }}>
              Total
            </Text>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_800ExtraBold',
                fontSize: 14,
                color: '#121212',
              }}>
              ₹12,500.00
            </Text>
          </View>
        </View>
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            height: 120,
            backgroundColor: '#FFFFFF',
            borderTopLeftRadius: 32,
            borderTopRightRadius: 32,
            borderBottomRightRadius: 0,
            borderBottomLeftRadius: 0,
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'row',
          }}>
          <Pressable
            accessibilityRole="button"
            accessibilityLabel="Slide to send ₹12,500"
            style={{
              width: 300,
              height: 64,
              borderRadius: 32,
              borderWidth: 1.5,
              borderColor: '#121212',
              backgroundColor: '#EEEFF1',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: 6,
              flexDirection: 'row',
            }}>
            <View
              style={{
                width: 50,
                height: 50,
                borderRadius: 25,
                backgroundColor: '#121212',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <Svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#FFFFFF"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round">
                <Path d="M22 2 11 13" />
                <Path d="M22 2 15 22l-4-9-9-4z" />
              </Svg>
            </View>
            <Text
              style={{
                flexShrink: 1,
                fontFamily: 'Manrope_700Bold',
                fontSize: 15,
                color: '#121212',
              }}>
              Slide to send ›››
            </Text>
            <View
              style={{
                width: 53,
                height: 53,
                borderRadius: 25,
                borderWidth: 1.5,
                borderColor: '#8A8D93',
                borderStyle: 'dashed',
              }}
            />
          </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 x 844 artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;
const ARTBOARD_HEIGHT = 844;

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

export function Screen({ background, statusBar, 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(ARTBOARD_HEIGHT * scale, height) }}>
      <StatusBar style={statusBar} />
      <View
        style={{
          width: ARTBOARD_WIDTH,
          height: ARTBOARD_HEIGHT,
          overflow: 'hidden',
          transformOrigin: 'left top',
          transform: [{ scale }],
        }}>
        {children}
      </View>
    </ScrollView>
  );
}

import { useId } from 'react';
import { StyleSheet } from 'react-native';
import Svg, { Defs, Pattern, Rect } from 'react-native-svg';

type Props = {
  first: string;
  second: string;
  /** Width of one band in px. */
  size: number;
  /** CSS gradient angle in degrees. */
  angle: number;
};

export function Stripes({ first, second, size, angle }: Props) {
  const id = useId();

  return (
    <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
      <Defs>
        <Pattern
          id={id}
          patternUnits="userSpaceOnUse"
          width={size * 2}
          height={size * 2}
          patternTransform={`rotate(${angle - 90})`}>
          <Rect width={size} height={size * 2} fill={first} />
          <Rect x={size} width={size} height={size * 2} fill={second} />
        </Pattern>
      </Defs>
      <Rect width="100%" height="100%" fill={`url(#${id})`} />
    </Svg>
  );
}