diff --git a/app.json b/app.json index 0adcafb1..f1971535 100644 --- a/app.json +++ b/app.json @@ -2,11 +2,11 @@ "expo": { "name": "matadors-rn-medica", "slug": "matadors-rn-medica", + "scheme": "matadors-rn-medica", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/images/icon.png", - "scheme": "myapp", - "userInterfaceStyle": "automatic", + "userInterfaceStyle": "dark", "splash": { "image": "./assets/images/splash.png", "resizeMode": "contain", diff --git a/app/(app)/HomeScreen.tsx b/app/(app)/HomeScreen.tsx new file mode 100644 index 00000000..bc05ccd2 --- /dev/null +++ b/app/(app)/HomeScreen.tsx @@ -0,0 +1,5 @@ +interface Props {} + +export default function HomeScreen({}: Props) { + return <>; +} diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx new file mode 100644 index 00000000..e69de29b diff --git a/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx new file mode 100644 index 00000000..c5993c6f --- /dev/null +++ b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx @@ -0,0 +1,11 @@ +import { Text, View } from "@/components/Themed"; +import { LeftArrow } from "@/components/UI/icons"; +import { SvgUri, SvgXml } from "react-native-svg"; + +export default function SetYourFingerPrint() { + return ( + <> + Set Your Finger Print + + ); +} diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx new file mode 100644 index 00000000..e259d043 --- /dev/null +++ b/app/(auth)/_layout.tsx @@ -0,0 +1,17 @@ +import Header from "@/components/UI/Header"; +import { Stack } from "expo-router"; + +export default function AuthLayout() { + return ( + + { + return
; + }, + }} + /> + + ); +} diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index 30914fbc..00000000 --- a/app/(tabs)/_layout.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import FontAwesome from '@expo/vector-icons/FontAwesome'; -import { Link, Tabs } from 'expo-router'; -import { Pressable } from 'react-native'; - -import Colors from '@/constants/Colors'; -import { useColorScheme } from '@/components/useColorScheme'; -import { useClientOnlyValue } from '@/components/useClientOnlyValue'; - -// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ -function TabBarIcon(props: { - name: React.ComponentProps['name']; - color: string; -}) { - return ; -} - -export default function TabLayout() { - const colorScheme = useColorScheme(); - - return ( - - , - headerRight: () => ( - - - {({ pressed }) => ( - - )} - - - ), - }} - /> - , - }} - /> - - ); -} diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx deleted file mode 100644 index 6cbee6da..00000000 --- a/app/(tabs)/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '@/components/EditScreenInfo'; -import { Text, View } from '@/components/Themed'; - -export default function TabOneScreen() { - return ( - - Tab One - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - title: { - fontSize: 20, - fontWeight: 'bold', - }, - separator: { - marginVertical: 30, - height: 1, - width: '80%', - }, -}); diff --git a/app/(tabs)/two.tsx b/app/(tabs)/two.tsx deleted file mode 100644 index f2ea47ee..00000000 --- a/app/(tabs)/two.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import EditScreenInfo from '@/components/EditScreenInfo'; -import { Text, View } from '@/components/Themed'; - -export default function TabTwoScreen() { - return ( - - Tab Two - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - title: { - fontSize: 20, - fontWeight: 'bold', - }, - separator: { - marginVertical: 30, - height: 1, - width: '80%', - }, -}); diff --git a/app/_layout.tsx b/app/_layout.tsx index fa77b737..505ddaa6 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,20 +1,25 @@ -import FontAwesome from '@expo/vector-icons/FontAwesome'; -import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; -import { useFonts } from 'expo-font'; -import { Stack } from 'expo-router'; -import * as SplashScreen from 'expo-splash-screen'; -import { useEffect } from 'react'; +import FontAwesome from "@expo/vector-icons/FontAwesome"; +import { + DarkTheme, + DefaultTheme, + ThemeProvider, +} from "@react-navigation/native"; +import { useFonts } from "expo-font"; +import { Stack } from "expo-router"; +import * as SplashScreen from "expo-splash-screen"; -import { useColorScheme } from '@/components/useColorScheme'; +import { useEffect, useState } from "react"; + +import { useColorScheme } from "@/components/useColorScheme"; export { // Catch any errors thrown by the Layout component. ErrorBoundary, -} from 'expo-router'; +} from "expo-router"; export const unstable_settings = { // Ensure that reloading on `/modal` keeps a back button present. - initialRouteName: '(tabs)', + initialRouteName: "(auth)", }; // Prevent the splash screen from auto-hiding before asset loading is complete. @@ -22,7 +27,10 @@ SplashScreen.preventAutoHideAsync(); export default function RootLayout() { const [loaded, error] = useFonts({ - SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), + Medium: require("../assets/fonts/Urbanist-Medium.ttf"), + SemiBold: require("../assets/fonts/Urbanist-SemiBold.ttf"), + Bold: require("../assets/fonts/Urbanist-Bold.ttf"), + Regular: require("../assets/fonts/Urbanist-Regular.ttf"), ...FontAwesome.font, }); @@ -48,10 +56,10 @@ function RootLayoutNav() { const colorScheme = useColorScheme(); return ( - - - - + + + + ); diff --git a/app/index.tsx b/app/index.tsx new file mode 100644 index 00000000..7143950c --- /dev/null +++ b/app/index.tsx @@ -0,0 +1,17 @@ +import { Text } from "@/components/Themed"; +import { router } from "expo-router"; +import { useEffect } from "react"; + +export default function Index() { + useEffect(() => { + setTimeout(() => { + router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint"); + }, 2000); + }); + + return ( + <> + Onboarding Screen + + ); +} diff --git a/assets/fonts/SpaceMono-Regular.ttf b/assets/fonts/SpaceMono-Regular.ttf deleted file mode 100644 index 28d7ff71..00000000 Binary files a/assets/fonts/SpaceMono-Regular.ttf and /dev/null differ diff --git a/assets/fonts/Urbanist-Bold.ttf b/assets/fonts/Urbanist-Bold.ttf new file mode 100644 index 00000000..330e84f9 Binary files /dev/null and b/assets/fonts/Urbanist-Bold.ttf differ diff --git a/assets/fonts/Urbanist-Medium.ttf b/assets/fonts/Urbanist-Medium.ttf new file mode 100644 index 00000000..e9a6dbb0 Binary files /dev/null and b/assets/fonts/Urbanist-Medium.ttf differ diff --git a/assets/fonts/Urbanist-Regular.ttf b/assets/fonts/Urbanist-Regular.ttf new file mode 100644 index 00000000..2a794b27 Binary files /dev/null and b/assets/fonts/Urbanist-Regular.ttf differ diff --git a/assets/fonts/Urbanist-SemiBold.ttf b/assets/fonts/Urbanist-SemiBold.ttf new file mode 100644 index 00000000..6d393d1c Binary files /dev/null and b/assets/fonts/Urbanist-SemiBold.ttf differ diff --git a/assets/icons/Arrow_Left.svg b/assets/icons/Arrow_Left.svg new file mode 100644 index 00000000..4196472b --- /dev/null +++ b/assets/icons/Arrow_Left.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/components/StyledText.tsx b/components/StyledText.tsx index aa3977ce..5691e443 100644 --- a/components/StyledText.tsx +++ b/components/StyledText.tsx @@ -1,5 +1,5 @@ -import { Text, TextProps } from './Themed'; +import { Text, TextProps } from "./Themed"; export function MonoText(props: TextProps) { - return ; + return ; } diff --git a/components/Themed.tsx b/components/Themed.tsx index 9139f9b8..4b5e73d0 100644 --- a/components/Themed.tsx +++ b/components/Themed.tsx @@ -3,24 +3,24 @@ * https://docs.expo.io/guides/color-schemes/ */ -import { Text as DefaultText, View as DefaultView } from 'react-native'; +import { Text as DefaultText, View as DefaultView } from "react-native"; -import Colors from '@/constants/Colors'; -import { useColorScheme } from './useColorScheme'; +import Colors from "@/constants/Colors"; +import { useColorScheme } from "./useColorScheme"; type ThemeProps = { lightColor?: string; darkColor?: string; }; -export type TextProps = ThemeProps & DefaultText['props']; -export type ViewProps = ThemeProps & DefaultView['props']; +export type TextProps = ThemeProps & DefaultText["props"]; +export type ViewProps = ThemeProps & DefaultView["props"]; export function useThemeColor( props: { light?: string; dark?: string }, colorName: keyof typeof Colors.light & keyof typeof Colors.dark ) { - const theme = useColorScheme() ?? 'light'; + const theme = useColorScheme() ?? "light"; const colorFromProps = props[theme]; if (colorFromProps) { @@ -32,14 +32,17 @@ export function useThemeColor( export function Text(props: TextProps) { const { style, lightColor, darkColor, ...otherProps } = props; - const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); + const color = useThemeColor({ light: lightColor, dark: darkColor }, "text"); return ; } export function View(props: ViewProps) { const { style, lightColor, darkColor, ...otherProps } = props; - const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background'); + const backgroundColor = useThemeColor( + { light: lightColor, dark: darkColor }, + "background" + ); return ; } diff --git a/components/UI/Header.tsx b/components/UI/Header.tsx new file mode 100644 index 00000000..bedff34a --- /dev/null +++ b/components/UI/Header.tsx @@ -0,0 +1,5 @@ +import { View } from "../Themed"; + +export default function Header() { + return ; +} diff --git a/components/UI/icons.tsx b/components/UI/icons.tsx new file mode 100644 index 00000000..ac3f1cb0 --- /dev/null +++ b/components/UI/icons.tsx @@ -0,0 +1,16 @@ +import { Path, Svg } from "react-native-svg"; + +export function LeftArrow({ fillColor }: { fillColor: string }) { + return ( + + + + + ); +} diff --git a/components/useColorScheme.web.ts b/components/useColorScheme.web.ts index 6dcd80d3..84a6c3a5 100644 --- a/components/useColorScheme.web.ts +++ b/components/useColorScheme.web.ts @@ -4,5 +4,5 @@ // to render different styles on the client and server, these aren't directly supported in React Native // but can be achieved using a styling library like Nativewind. export function useColorScheme() { - return 'light'; + return "light"; } diff --git a/constants/Colors.ts b/constants/Colors.ts index 1c706c7b..19edc17f 100644 --- a/constants/Colors.ts +++ b/constants/Colors.ts @@ -1,19 +1,118 @@ -const tintColorLight = '#2f95dc'; -const tintColorDark = '#fff'; +const tintColorLight = "#2f95dc"; +const tintColorDark = "#fff"; export default { light: { - text: '#000', - background: '#fff', + text: "#000", + background: "#fff", tint: tintColorLight, - tabIconDefault: '#ccc', + tabIconDefault: "#ccc", tabIconSelected: tintColorLight, }, dark: { - text: '#fff', - background: '#000', + text: "#fff", + background: "#000", tint: tintColorDark, - tabIconDefault: '#ccc', + tabIconDefault: "#ccc", tabIconSelected: tintColorDark, }, }; + +export const Colors = { + main: { + // Main + primary: { + "_100": "#E9F0FF", + "_200": "#A7C4FE", + "_300": "#7CA6FE", + "_400": "#5089FD", + "_500": "#246BFD", + }, + secondary: { + "_100": "#FFFBE6", + "_200": "#FFED99", + "_300": "#FFE566", + "_400": "#FFDC33", + "_500": "#FFD300", + }, + }, + status: { + // status + success: "#07BD74", + info: "#246BFD", + warning: "#FACC15", + error: "#F75555", + disabled: "#D8D8D8", + disabled_button: "#3062C8", + }, + + grayScale: { + // gray scale + "_900": "#212121", + "_800": "#424242", + "_700": "#616161", + "_600": "#757575", + "_500": "#9E9E9E", + "_400": "#BDBDBD", + "_300": "#E0E0E0", + "_200": "#EEEEEE", + "_100": "#F5F5F5", + "_50": "#FAFAFA", + }, + + // will require to set this up here as soon as one needs gradients + // gradients: { + // gradient_blue: { from: { x: 0, y: 0 }, to: { x: 1, y: 1 }, color: [""] }, + // gradient_yellow: { from: { x: 0, y: 0 }, to: { x: 1, y: 1 }, color: [""] }, + // gradient_green: { from: { x: 0, y: 0 }, to: { x: 1, y: 1 }, color: [""] }, + // gradient_orange: { from: { x: 0, y: 0 }, to: { x: 1, y: 1 }, color: [""] }, + // gradient_red: { from: { x: 0, y: 0 }, to: { x: 1, y: 1 }, color: [""] }, + // }, + + dark: { + "_1": "#181A20", + "_2": "#1F222A", + "_3": "#35383F", + }, + + others: { + white: "#FFFFFF", + black: "#000000", + red: "#F44336", + pink: "#E91E63", + purple: "#9C27B0", + deep_purple: "#673AB7", + indigo: "#3F51B5", + blue: "#2196F3", + light_blue: "#03A9F4", + cyan: "#00BCD4", + teal: "#009688", + green: "#4CAF50", + light_green: "#8BC34A", + lime: "#CDDC39", + yellow: "#FFEB3B", + amber: "#FFC107", + orange: "#FF9800", + deep_orange: "#FF5722", + brown: "#795548", + blue_gray: "#607D8B", + }, + + background: { + blue: "#EEF4FF", + green: "#F2FFFC", + orange: "#FFF8ED", + pink: "#FFFEE0", + purple: "#FCF4FF", + }, + + transparent: { + blue: "#246BFD", + orange: "#FF9800", + yellow: "#FACC15", + red: "#F75555", + green: "#4CAF50", + purple: "#9C27B0", + cyan: "#00BCD4", + }, +}; diff --git a/constants/Typography.ts b/constants/Typography.ts new file mode 100644 index 00000000..5557ccd7 --- /dev/null +++ b/constants/Typography.ts @@ -0,0 +1,123 @@ +const Typography = { + heading: { + // headings + _1: { + fontFamily: "Bold", + fontSize: 48, + }, + _2: { + fontFamily: "Bold", + fontSize: 40, + }, + _3: { + fontFamily: "Bold", + fontSize: 32, + }, + _4: { + fontFamily: "Bold", + fontSize: 24, + }, + _5: { + fontFamily: "Bold", + fontSize: 20, + }, + }, + + bold: { + // body + xLarge: { + fontFamily: "Bold", + fontSize: 18, + }, + large: { + fontFamily: "Bold", + fontSize: 16, + }, + medium: { + fontFamily: "Bold", + fontSize: 14, + }, + small: { + fontFamily: "Bold", + fontSize: 12, + }, + xSmall: { + fontFamily: "Bold", + fontSize: 10, + }, + }, + + semiBold: { + // semibold + xLarge: { + fontFamily: "SemiBold", + fontSize: 18, + }, + large: { + fontFamily: "SemiBold", + fontSize: 16, + }, + medium: { + fontFamily: "SemiBold", + fontSize: 14, + }, + small: { + fontFamily: "SemiBold", + fontSize: 12, + }, + xSmall: { + fontFamily: "SemiBold", + fontSize: 10, + }, + }, + + medium: { + // medium + xLarge: { + fontFamily: "SemiBold", + fontSize: 18, + }, + large: { + fontFamily: "SemiBold", + fontSize: 16, + }, + medium: { + fontFamily: "SemiBold", + fontSize: 14, + }, + small: { + fontFamily: "SemiBold", + fontSize: 12, + }, + xSmall: { + fontFamily: "SemiBold", + fontSize: 10, + }, + }, + + regular: { + // Regular + xLarge: { + fontFamily: "Regular", + fontSize: 18, + }, + large: { + fontFamily: "Regular", + fontSize: 16, + }, + medium: { + fontFamily: "Regular", + fontSize: 14, + }, + small: { + fontFamily: "Regular", + fontSize: 12, + }, + xSmall: { + fontFamily: "Regular", + fontSize: 10, + }, + }, +}; + +export default Typography; diff --git a/package-lock.json b/package-lock.json index f4b12fbe..4d3683e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@react-navigation/native": "^6.0.2", "expo": "~50.0.14", "expo-font": "~11.10.3", + "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-router": "^3.4.10", "expo-splash-screen": "~0.26.5", @@ -23,6 +24,7 @@ "react-native": "0.73.6", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", + "react-native-svg": "^15.2.0", "react-native-web": "~0.19.6" }, "devDependencies": { @@ -9882,8 +9884,7 @@ "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/boxen": { "version": "5.1.2", @@ -11456,7 +11457,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", - "dev": true, "dependencies": { "mdn-data": "2.0.14", "source-map": "^0.6.1" @@ -11469,7 +11469,6 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -11478,7 +11477,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true, "engines": { "node": ">= 6" }, @@ -12088,7 +12086,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "dev": true, "funding": [ { "type": "github", @@ -12254,7 +12251,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -13882,6 +13878,14 @@ "expo": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "12.7.2", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.7.2.tgz", + "integrity": "sha512-Wwb2EF18ywgrlTodcXJ6Yt/UEcKitRMdXPNyP/IokmeKh4emoq9DxZJpZdkXm3HUTLlbRpi6/t32jrFVqXB9AQ==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-linking": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.2.2.tgz", @@ -19708,8 +19712,7 @@ "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", - "dev": true + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" }, "node_modules/media-typer": { "version": "0.3.0", @@ -20819,7 +20822,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dev": true, "dependencies": { "boolbase": "^1.0.0" }, @@ -22848,6 +22850,74 @@ "react-native": "*" } }, + "node_modules/react-native-svg": { + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz", + "integrity": "sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==", + "dependencies": { + "css-select": "^5.1.0", + "css-tree": "^1.1.3" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-svg/node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/react-native-svg/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/react-native-svg/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/react-native-svg/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/react-native-web": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.11.tgz", diff --git a/package.json b/package.json index c4c7778e..e50bac07 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,9 @@ "react-native": "0.73.6", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", - "react-native-web": "~0.19.6" + "react-native-svg": "^15.2.0", + "react-native-web": "~0.19.6", + "expo-linear-gradient": "~12.7.2" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/utils/ResponsiveWidth.tsx b/utils/ResponsiveWidth.tsx new file mode 100644 index 00000000..80538671 --- /dev/null +++ b/utils/ResponsiveWidth.tsx @@ -0,0 +1,11 @@ +import { Dimensions } from "react-native"; + +const screenWidth = Dimensions.get("window").width; + +interface Props { + percentage: number; +} + +export function ResponsiveWidth({ percentage }: Props) { + return (percentage / 100) * screenWidth; +}