diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx new file mode 100644 index 0000000..bacc316 --- /dev/null +++ b/app/(application)/_layout.tsx @@ -0,0 +1,14 @@ +import { Headers } from "@/constants/Headers"; +import { Stack } from "expo-router"; +import { StatusBar } from 'expo-status-bar'; + +export default function RootLayout() { + return ( + <> + + + + + + ) +} diff --git a/app/(application)/home.tsx b/app/(application)/home.tsx new file mode 100644 index 0000000..80d594d --- /dev/null +++ b/app/(application)/home.tsx @@ -0,0 +1,22 @@ +import CaraouselHome from "@/components/home/carouselHome"; +import { HeaderRightHome } from "@/components/home/headerRightHome"; +import { Stack } from "expo-router"; +import { SafeAreaView, ScrollView } from "react-native"; + +export default function Home() { + return ( + + <>, + headerTitle: 'Darmasaba', + headerRight: () => + }} + /> + + + + + ) +} \ No newline at end of file diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index cfbc1e2..0000000 --- a/app/(tabs)/_layout.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Tabs } from 'expo-router'; -import React from 'react'; -import { Platform } from 'react-native'; - -import { HapticTab } from '@/components/HapticTab'; -import { IconSymbol } from '@/components/ui/IconSymbol'; -import TabBarBackground from '@/components/ui/TabBarBackground'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; - -export default function TabLayout() { - const colorScheme = useColorScheme(); - - return ( - - , - }} - /> - , - }} - /> - - ); -} diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx deleted file mode 100644 index 06e70c4..0000000 --- a/app/(tabs)/explore.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { StyleSheet, Image, Platform } from 'react-native'; - -import { Collapsible } from '@/components/Collapsible'; -import { ExternalLink } from '@/components/ExternalLink'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; -import { IconSymbol } from '@/components/ui/IconSymbol'; - -export default function TabTwoScreen() { - return ( - - }> - - Explore - - This app includes example code to help you get started. - - - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx - - - The layout file in app/(tabs)/_layout.tsx{' '} - sets up the tab navigator. - - - Learn more - - - - - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. - - - - - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities - - - - Learn more - - - - - Open app/_layout.tsx to see how to load{' '} - - custom fonts such as this one. - - - - Learn more - - - - - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - - - Learn more - - - - - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful react-native-reanimated{' '} - library to create a waving hand animation. - - {Platform.select({ - ios: ( - - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. - - ), - })} - - - ); -} - -const styles = StyleSheet.create({ - headerImage: { - color: '#808080', - bottom: -90, - left: -35, - position: 'absolute', - }, - titleContainer: { - flexDirection: 'row', - gap: 8, - }, -}); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx deleted file mode 100644 index 886b079..0000000 --- a/app/(tabs)/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Image, StyleSheet, Platform } from 'react-native'; - -import { HelloWave } from '@/components/HelloWave'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; - -export default function HomeScreen() { - return ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12' - })} - {' '} - to open developer tools. - - - - Step 2: Explore - - Tap the Explore tab to learn more about what's included in this starter app. - - - - Step 3: Get a fresh start - - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - - ); -} - -const styles = StyleSheet.create({ - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - }, - stepContainer: { - gap: 8, - marginBottom: 8, - }, - reactLogo: { - height: 178, - width: 290, - bottom: 0, - left: 0, - position: 'absolute', - }, -}); diff --git a/app/+not-found.tsx b/app/+not-found.tsx deleted file mode 100644 index 963b04f..0000000 --- a/app/+not-found.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Link, Stack } from 'expo-router'; -import { StyleSheet } from 'react-native'; - -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; - -export default function NotFoundScreen() { - return ( - <> - - - This screen doesn't exist. - - Go to home screen! - - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - padding: 20, - }, - link: { - marginTop: 15, - paddingVertical: 15, - }, -}); diff --git a/app/_layout.tsx b/app/_layout.tsx index db74578..7c66d08 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,4 +1,3 @@ -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'; @@ -6,13 +5,10 @@ import { StatusBar } from 'expo-status-bar'; import { useEffect } from 'react'; import 'react-native-reanimated'; -import { useColorScheme } from '@/hooks/useColorScheme'; - // Prevent the splash screen from auto-hiding before asset loading is complete. SplashScreen.preventAutoHideAsync(); export default function RootLayout() { - const colorScheme = useColorScheme(); const [loaded] = useFonts({ SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), }); @@ -28,12 +24,14 @@ export default function RootLayout() { } return ( - + <> - - + + + - + + ); } diff --git a/app/index.tsx b/app/index.tsx new file mode 100644 index 0000000..8e75aa3 --- /dev/null +++ b/app/index.tsx @@ -0,0 +1,26 @@ +import { ButtonForm } from "@/components/buttonForm"; +import { InputForm } from "@/components/inputForm"; +import Styles from "@/constants/Styles"; +import { router } from "expo-router"; +import { Image, Text, View } from "react-native"; + +export default function Index() { + return ( + + + + PERBEKEL DARMASABA + + +62} + info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." /> + { router.push("/verification") }} /> + + ); +} \ No newline at end of file diff --git a/app/verification.tsx b/app/verification.tsx new file mode 100644 index 0000000..3e074b2 --- /dev/null +++ b/app/verification.tsx @@ -0,0 +1,54 @@ +import { ButtonForm } from "@/components/buttonForm"; +import Styles from "@/constants/Styles"; +import { router } from "expo-router"; +import React, { useState } from "react"; +import { Image, SafeAreaView, Text, View } from "react-native"; +import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field'; + +export default function Index() { + const [value, setValue] = useState(''); + const ref = useBlurOnFulfill({ value, cellCount: 4 }); + const [props, getCellOnLayoutHandler] = useClearByFocusCell({ + value, + setValue, + }); + + + return ( + + + + PERBEKEL DARMASABA + + + Verifikasi Nomor Telepon + Masukkan kode yang kami kirimkan melalui WhatsApp + +628980185458 + + ( + + {symbol || (isFocused ? : null)} + + )} + /> + { router.push("/home") }} /> + + Tidak Menerima kode verifikasi? Kirim Ulang + + + ); +} diff --git a/assets/images/icon.png b/assets/images/icon.png index a0b1526..eebbcf4 100644 Binary files a/assets/images/icon.png and b/assets/images/icon.png differ diff --git a/assets/images/splash-icon.png b/assets/images/splash-icon.png index 03d6f6b..eebbcf4 100644 Binary files a/assets/images/splash-icon.png and b/assets/images/splash-icon.png differ diff --git a/assets/images/user.jpeg b/assets/images/user.jpeg new file mode 100644 index 0000000..634a8ea Binary files /dev/null and b/assets/images/user.jpeg differ diff --git a/bun.lockb b/bun.lockb index 758cec4..466ba7b 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/Collapsible.tsx b/components/Collapsible.tsx deleted file mode 100644 index 55bff2f..0000000 --- a/components/Collapsible.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { PropsWithChildren, useState } from 'react'; -import { StyleSheet, TouchableOpacity } from 'react-native'; - -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; -import { IconSymbol } from '@/components/ui/IconSymbol'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; - -export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { - const [isOpen, setIsOpen] = useState(false); - const theme = useColorScheme() ?? 'light'; - - return ( - - setIsOpen((value) => !value)} - activeOpacity={0.8}> - - - {title} - - {isOpen && {children}} - - ); -} - -const styles = StyleSheet.create({ - heading: { - flexDirection: 'row', - alignItems: 'center', - gap: 6, - }, - content: { - marginTop: 6, - marginLeft: 24, - }, -}); diff --git a/components/ExternalLink.tsx b/components/ExternalLink.tsx deleted file mode 100644 index 8f05675..0000000 --- a/components/ExternalLink.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Link } from 'expo-router'; -import { openBrowserAsync } from 'expo-web-browser'; -import { type ComponentProps } from 'react'; -import { Platform } from 'react-native'; - -type Props = Omit, 'href'> & { href: string }; - -export function ExternalLink({ href, ...rest }: Props) { - return ( - { - if (Platform.OS !== 'web') { - // Prevent the default behavior of linking to the default browser on native. - event.preventDefault(); - // Open the link in an in-app browser. - await openBrowserAsync(href); - } - }} - /> - ); -} diff --git a/components/HapticTab.tsx b/components/HapticTab.tsx deleted file mode 100644 index 7f3981c..0000000 --- a/components/HapticTab.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs'; -import { PlatformPressable } from '@react-navigation/elements'; -import * as Haptics from 'expo-haptics'; - -export function HapticTab(props: BottomTabBarButtonProps) { - return ( - { - if (process.env.EXPO_OS === 'ios') { - // Add a soft haptic feedback when pressing down on the tabs. - Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); - } - props.onPressIn?.(ev); - }} - /> - ); -} diff --git a/components/HelloWave.tsx b/components/HelloWave.tsx deleted file mode 100644 index 9b4bc31..0000000 --- a/components/HelloWave.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useEffect } from 'react'; -import { StyleSheet } from 'react-native'; -import Animated, { - useSharedValue, - useAnimatedStyle, - withTiming, - withRepeat, - withSequence, -} from 'react-native-reanimated'; - -import { ThemedText } from '@/components/ThemedText'; - -export function HelloWave() { - const rotationAnimation = useSharedValue(0); - - useEffect(() => { - rotationAnimation.value = withRepeat( - withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), - 4 // Run the animation 4 times - ); - }, []); - - const animatedStyle = useAnimatedStyle(() => ({ - transform: [{ rotate: `${rotationAnimation.value}deg` }], - })); - - return ( - - 👋 - - ); -} - -const styles = StyleSheet.create({ - text: { - fontSize: 28, - lineHeight: 32, - marginTop: -6, - }, -}); diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx deleted file mode 100644 index 5df1d75..0000000 --- a/components/ParallaxScrollView.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import type { PropsWithChildren, ReactElement } from 'react'; -import { StyleSheet } from 'react-native'; -import Animated, { - interpolate, - useAnimatedRef, - useAnimatedStyle, - useScrollViewOffset, -} from 'react-native-reanimated'; - -import { ThemedView } from '@/components/ThemedView'; -import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; -import { useColorScheme } from '@/hooks/useColorScheme'; - -const HEADER_HEIGHT = 250; - -type Props = PropsWithChildren<{ - headerImage: ReactElement; - headerBackgroundColor: { dark: string; light: string }; -}>; - -export default function ParallaxScrollView({ - children, - headerImage, - headerBackgroundColor, -}: Props) { - const colorScheme = useColorScheme() ?? 'light'; - const scrollRef = useAnimatedRef(); - const scrollOffset = useScrollViewOffset(scrollRef); - const bottom = useBottomTabOverflow(); - const headerAnimatedStyle = useAnimatedStyle(() => { - return { - transform: [ - { - translateY: interpolate( - scrollOffset.value, - [-HEADER_HEIGHT, 0, HEADER_HEIGHT], - [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] - ), - }, - { - scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), - }, - ], - }; - }); - - return ( - - - - {headerImage} - - {children} - - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - header: { - height: HEADER_HEIGHT, - overflow: 'hidden', - }, - content: { - flex: 1, - padding: 32, - gap: 16, - overflow: 'hidden', - }, -}); diff --git a/components/ThemedText.tsx b/components/ThemedText.tsx deleted file mode 100644 index c0e1a78..0000000 --- a/components/ThemedText.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Text, type TextProps, StyleSheet } from 'react-native'; - -import { useThemeColor } from '@/hooks/useThemeColor'; - -export type ThemedTextProps = TextProps & { - lightColor?: string; - darkColor?: string; - type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'; -}; - -export function ThemedText({ - style, - lightColor, - darkColor, - type = 'default', - ...rest -}: ThemedTextProps) { - const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); - - return ( - - ); -} - -const styles = StyleSheet.create({ - default: { - fontSize: 16, - lineHeight: 24, - }, - defaultSemiBold: { - fontSize: 16, - lineHeight: 24, - fontWeight: '600', - }, - title: { - fontSize: 32, - fontWeight: 'bold', - lineHeight: 32, - }, - subtitle: { - fontSize: 20, - fontWeight: 'bold', - }, - link: { - lineHeight: 30, - fontSize: 16, - color: '#0a7ea4', - }, -}); diff --git a/components/ThemedView.tsx b/components/ThemedView.tsx deleted file mode 100644 index 4d2cb09..0000000 --- a/components/ThemedView.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { View, type ViewProps } from 'react-native'; - -import { useThemeColor } from '@/hooks/useThemeColor'; - -export type ThemedViewProps = ViewProps & { - lightColor?: string; - darkColor?: string; -}; - -export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) { - const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background'); - - return ; -} diff --git a/components/buttonForm.tsx b/components/buttonForm.tsx new file mode 100644 index 0000000..bfa5e85 --- /dev/null +++ b/components/buttonForm.tsx @@ -0,0 +1,15 @@ +import Styles from "@/constants/Styles"; +import { Text, TouchableOpacity } from "react-native"; + +type Props = { + text: string; + onPress: () => void; +}; + +export function ButtonForm({ text, onPress }: Props) { + return ( + + {text} + + ); +} \ No newline at end of file diff --git a/components/buttonHeader.tsx b/components/buttonHeader.tsx new file mode 100644 index 0000000..ceb0d3e --- /dev/null +++ b/components/buttonHeader.tsx @@ -0,0 +1,17 @@ +import Styles from "@/constants/Styles"; +import { TouchableWithoutFeedback, View } from "react-native"; + +type PropsBtnHeader = { + onPress?: () => void; + item: React.ReactNode; +}; + +export function ButtonHeader({ onPress, item }: PropsBtnHeader) { + return ( + + + {item} + + + ) +} \ No newline at end of file diff --git a/components/home/carouselHome.tsx b/components/home/carouselHome.tsx new file mode 100644 index 0000000..a1866f5 --- /dev/null +++ b/components/home/carouselHome.tsx @@ -0,0 +1,32 @@ +import Styles from "@/constants/Styles"; +import React from "react"; +import { Dimensions, Text, View } from "react-native"; +import { useSharedValue } from "react-native-reanimated"; +import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel"; + +export default function CaraouselHome() { + const ref = React.useRef(null); + const width = Dimensions.get("window").width; + const data = [...new Array(6).keys()]; + const progress = useSharedValue(0); + + return ( + + ( + + BANNER DARMASABA + + )} + /> + + ) +} \ No newline at end of file diff --git a/components/home/fiturHome.tsx b/components/home/fiturHome.tsx new file mode 100644 index 0000000..6d8d3d6 --- /dev/null +++ b/components/home/fiturHome.tsx @@ -0,0 +1,3 @@ +export default function FiturHome(){ + +} \ No newline at end of file diff --git a/components/home/headerRightHome.tsx b/components/home/headerRightHome.tsx new file mode 100644 index 0000000..c3b9d96 --- /dev/null +++ b/components/home/headerRightHome.tsx @@ -0,0 +1,18 @@ +import { View } from "react-native" +import { router } from "expo-router" +import Feather from '@expo/vector-icons/Feather'; +import { ButtonHeader } from "../buttonHeader"; + +export function HeaderRightHome() { + return ( + + } onPress={() => { router.push('/') }} /> + } onPress={() => { router.push('/') }} /> + } onPress={() => { router.push('/') }} /> + + ) +} \ No newline at end of file diff --git a/components/inputForm.tsx b/components/inputForm.tsx new file mode 100644 index 0000000..73a7d1b --- /dev/null +++ b/components/inputForm.tsx @@ -0,0 +1,68 @@ +import Styles from "@/constants/Styles"; +import { View, TextInput, Text } from "react-native"; + +type Props = { + label?: string; + placeholder?: string; + onChange?: (val: string) => void; + info?: string; + itemLeft?: React.ReactNode; + itemRight?: React.ReactNode; + error?: boolean; + errorText?: string; + required?: boolean; + type: 'default' | 'visible-password' | 'numeric' + round?: boolean +}; + + +export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round }: Props) { + + if (itemLeft != undefined || itemRight != undefined) { + return ( + + { + label != undefined && ( + + {label} + {required && (*)} + + ) + } + + {itemRight != undefined ? itemRight : itemLeft} + + + {error && ({errorText})} + {info != undefined && ({info})} + + ) + } + + + + return ( + + { + label != undefined && ( + + {label} + {required && (*)} + + ) + } + + {error && ({errorText})} + {info != undefined && ({info})} + + ) +} \ No newline at end of file diff --git a/components/ui/IconSymbol.ios.tsx b/components/ui/IconSymbol.ios.tsx deleted file mode 100644 index 9177f4d..0000000 --- a/components/ui/IconSymbol.ios.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols'; -import { StyleProp, ViewStyle } from 'react-native'; - -export function IconSymbol({ - name, - size = 24, - color, - style, - weight = 'regular', -}: { - name: SymbolViewProps['name']; - size?: number; - color: string; - style?: StyleProp; - weight?: SymbolWeight; -}) { - return ( - - ); -} diff --git a/components/ui/IconSymbol.tsx b/components/ui/IconSymbol.tsx deleted file mode 100644 index f1fabd4..0000000 --- a/components/ui/IconSymbol.tsx +++ /dev/null @@ -1,43 +0,0 @@ -// This file is a fallback for using MaterialIcons on Android and web. - -import MaterialIcons from '@expo/vector-icons/MaterialIcons'; -import { SymbolWeight } from 'expo-symbols'; -import React from 'react'; -import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native'; - -// Add your SFSymbol to MaterialIcons mappings here. -const MAPPING = { - // See MaterialIcons here: https://icons.expo.fyi - // See SF Symbols in the SF Symbols app on Mac. - 'house.fill': 'home', - 'paperplane.fill': 'send', - 'chevron.left.forwardslash.chevron.right': 'code', - 'chevron.right': 'chevron-right', -} as Partial< - Record< - import('expo-symbols').SymbolViewProps['name'], - React.ComponentProps['name'] - > ->; - -export type IconSymbolName = keyof typeof MAPPING; - -/** - * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage. - * - * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons. - */ -export function IconSymbol({ - name, - size = 24, - color, - style, -}: { - name: IconSymbolName; - size?: number; - color: string | OpaqueColorValue; - style?: StyleProp; - weight?: SymbolWeight; -}) { - return ; -} diff --git a/components/ui/TabBarBackground.ios.tsx b/components/ui/TabBarBackground.ios.tsx deleted file mode 100644 index 6668e78..0000000 --- a/components/ui/TabBarBackground.ios.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; -import { BlurView } from 'expo-blur'; -import { StyleSheet } from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; - -export default function BlurTabBarBackground() { - return ( - - ); -} - -export function useBottomTabOverflow() { - const tabHeight = useBottomTabBarHeight(); - const { bottom } = useSafeAreaInsets(); - return tabHeight - bottom; -} diff --git a/components/ui/TabBarBackground.tsx b/components/ui/TabBarBackground.tsx deleted file mode 100644 index 70d1c3c..0000000 --- a/components/ui/TabBarBackground.tsx +++ /dev/null @@ -1,6 +0,0 @@ -// This is a shim for web and Android where the tab bar is generally opaque. -export default undefined; - -export function useBottomTabOverflow() { - return 0; -} diff --git a/constants/Colors.ts b/constants/Colors.ts index 14e6784..54c7695 100644 --- a/constants/Colors.ts +++ b/constants/Colors.ts @@ -3,13 +3,13 @@ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc. */ -const tintColorLight = '#0a7ea4'; +const tintColorLight = '#19345E'; const tintColorDark = '#fff'; export const Colors = { light: { text: '#11181C', - background: '#fff', + background: '#f4f9fd', tint: tintColorLight, icon: '#687076', tabIconDefault: '#687076', diff --git a/constants/Headers.ts b/constants/Headers.ts new file mode 100644 index 0000000..904d246 --- /dev/null +++ b/constants/Headers.ts @@ -0,0 +1,18 @@ +const bgColorDefault = '#19345E'; + +export const Headers = { + shadow: { + headerStyle: { + backgroundColor: bgColorDefault, + }, + headerTintColor: '#fff', + headerShadowVisible: true + }, + noShadow: { + headerStyle: { + backgroundColor: bgColorDefault, + }, + headerTintColor: '#fff', + headerShadowVisible: false + } +} \ No newline at end of file diff --git a/constants/Styles.ts b/constants/Styles.ts new file mode 100644 index 0000000..5d89c52 --- /dev/null +++ b/constants/Styles.ts @@ -0,0 +1,124 @@ +import { StyleSheet } from "react-native"; + +const Styles = StyleSheet.create({ + wrapLogin: { + flex: 1, + justifyContent: "flex-start", + alignItems: "stretch", + padding: 20, + }, + textDefault: { + fontSize: 16, + lineHeight: 24, + }, + textDefaultSemiBold: { + fontSize: 16, + lineHeight: 24, + fontWeight: '600', + }, + textMediumNormal: { + fontSize: 13, + lineHeight: 24, + }, + textMediumSemiBold: { + fontSize: 13, + lineHeight: 24, + fontWeight: '600', + }, + textTitle: { + fontSize: 32, + fontWeight: 'bold', + lineHeight: 32, + }, + textSubtitle: { + fontSize: 20, + fontWeight: 'bold', + }, + textLink: { + lineHeight: 30, + fontSize: 16, + color: '#0a7ea4', + }, + textInformation: { + fontSize: 12, + fontWeight: 'light', + marginTop: 5, + }, + cError: { + color: '#DB1514' + }, + cGray: { + color: 'gray' + }, + cWhite: { + color: 'white' + }, + cDefault: { + color: '#19345E' + }, + mb15: { + marginBottom: 15 + }, + mb30: { + marginBottom: 30 + }, + round30: { + borderRadius: 30 + }, + btnIconHeader: { + backgroundColor: '#384288', + padding: 7, + borderRadius: 100, + }, + btnRound: { + backgroundColor: '#19345E', + borderWidth: 0, + borderColor: '#19345E', + alignItems: 'center', + borderRadius: 30, + marginTop: 15, + paddingVertical: 10 + }, + inputRoundForm: { + borderRadius: 10, + borderColor: '#19345E', + borderWidth: 1, + paddingVertical: 10, + paddingHorizontal: 15, + }, + inputRoundFormLeft: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 0, + }, + inputRoundFormRight: { + flexDirection: 'row-reverse', + alignItems: 'center', + paddingVertical: 0, + justifyContent: 'space-between' + }, + verificationCell: { + width: 50, + height: 50, + lineHeight: 45, + fontSize: 24, + borderWidth: 1, + borderRadius: 15, + borderColor: 'gray', + textAlign: 'center', + }, + verificationFocusCell: { + borderColor: '#19345E', + }, + caraoselContent: { + flex: 1, + borderWidth: 1, + justifyContent: "center", + marginHorizontal: 15, + borderRadius: 15, + backgroundColor: '#19345E', + display: 'flex', + } +}) + +export default Styles; \ No newline at end of file diff --git a/hooks/useColorScheme.ts b/hooks/useColorScheme.ts deleted file mode 100644 index 17e3c63..0000000 --- a/hooks/useColorScheme.ts +++ /dev/null @@ -1 +0,0 @@ -export { useColorScheme } from 'react-native'; diff --git a/hooks/useColorScheme.web.ts b/hooks/useColorScheme.web.ts deleted file mode 100644 index 7eb1c1b..0000000 --- a/hooks/useColorScheme.web.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useColorScheme as useRNColorScheme } from 'react-native'; - -/** - * To support static rendering, this value needs to be re-calculated on the client side for web - */ -export function useColorScheme() { - const [hasHydrated, setHasHydrated] = useState(false); - - useEffect(() => { - setHasHydrated(true); - }, []); - - const colorScheme = useRNColorScheme(); - - if (hasHydrated) { - return colorScheme; - } - - return 'light'; -} diff --git a/hooks/useThemeColor.ts b/hooks/useThemeColor.ts deleted file mode 100644 index 0608e73..0000000 --- a/hooks/useThemeColor.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Learn more about light and dark modes: - * https://docs.expo.dev/guides/color-schemes/ - */ - -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; - -export function useThemeColor( - props: { light?: string; dark?: string }, - colorName: keyof typeof Colors.light & keyof typeof Colors.dark -) { - const theme = useColorScheme() ?? 'light'; - const colorFromProps = props[theme]; - - if (colorFromProps) { - return colorFromProps; - } else { - return Colors[theme][colorName]; - } -} diff --git a/package.json b/package.json index 5112047..f9e04f4 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,10 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.7", + "react-native-confirmation-code-field": "^7.4.0", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "~3.16.1", + "react-native-reanimated-carousel": "^4.0.2", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-web": "~0.19.13",