├── .gitignore
├── App.tsx
├── README.md
├── app.json
├── assets
    ├── fonts
    │   ├── Poppins-Bold.ttf
    │   ├── Poppins-Regular.ttf
    │   └── Poppins-SemiBold.ttf
    └── images
    │   ├── adaptive-icon.png
    │   ├── favicon.png
    │   ├── icon.png
    │   ├── splash.png
    │   └── welcome-img.png
├── babel.config.js
├── components
    └── AppTextInput.tsx
├── config
    └── fonts.ts
├── constants
    ├── Colors.ts
    ├── Font.ts
    ├── FontSize.ts
    ├── Layout.ts
    └── Spacing.ts
├── navigation
    └── index.tsx
├── package.json
├── screens
    ├── LoginScreen.tsx
    ├── RegisterScreen.tsx
    └── WelcomeScreen.tsx
├── tsconfig.json
├── types.tsx
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
 1 | import { useFonts } from "expo-font";
 2 | import { StatusBar } from "expo-status-bar";
 3 | import { SafeAreaProvider } from "react-native-safe-area-context";
 4 | import fonts from "./config/fonts";
 5 | 
 6 | import Navigation from "./navigation";
 7 | 
 8 | export default function App() {
 9 |   const [fontsLoaded] = useFonts(fonts);
10 | 
11 |   return !fontsLoaded ? null : (
12 |     <SafeAreaProvider>
13 |       <Navigation />
14 |       <StatusBar />
15 |     </SafeAreaProvider>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OnBoarding-React-Native-App
 2 | 
 3 | ![Image](https://cdn.dribbble.com/users/4230508/screenshots/20214736/media/054c4a7b94b2e40931ed3143ab575864.png?compress=1&resize=1600x1200&vertical=top)
 4 | 
 5 | **Starter Project** [Link](https://github.com/tugane/OnBoarding-React-Native-App-Starter)
 6 | 
 7 | ## Get Started
 8 | 
 9 | install dev dependencies
10 | 
11 | ### `npm install` or `yarn install`
12 | 
13 | ## Then
14 | 
15 | Run The app
16 | 
17 | ### `npm start` or `yarn start`
18 | 
19 | Runs your app in development mode.
20 | 
21 | Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal.
22 | 
23 | #### `npm run ios` or `yarn run ios`
24 | 
25 | Like `npm start` / `yarn start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed.
26 | 
27 | #### `npm run android` or `yarn run android`
28 | 
29 | Like `npm start` / `yarn start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup).
30 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "On Boarding RN",
 4 |     "slug": "OnBoarding-React-Native-App",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "updates": {
16 |       "fallbackToCacheTimeout": 0
17 |     },
18 |     "assetBundlePatterns": ["**/*"],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "android": {
23 |       "adaptiveIcon": {
24 |         "foregroundImage": "./assets/images/adaptive-icon.png",
25 |         "backgroundColor": "#ffffff"
26 |       }
27 |     },
28 |     "web": {
29 |       "favicon": "./assets/images/favicon.png"
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/assets/fonts/Poppins-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/fonts/Poppins-Bold.ttf


--------------------------------------------------------------------------------
/assets/fonts/Poppins-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/fonts/Poppins-Regular.ttf


--------------------------------------------------------------------------------
/assets/fonts/Poppins-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/fonts/Poppins-SemiBold.ttf


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/images/splash.png


--------------------------------------------------------------------------------
/assets/images/welcome-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tugane/OnBoarding-React-Native-App/022ddae31d422125e72adb41e44ecb9bd7cd1cf1/assets/images/welcome-img.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo']
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/components/AppTextInput.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   StyleSheet,
 3 |   Text,
 4 |   TextInput,
 5 |   TextInputProps,
 6 |   View,
 7 | } from "react-native";
 8 | import React, { useState } from "react";
 9 | import Colors from "../constants/Colors";
10 | import Font from "../constants/Font";
11 | import FontSize from "../constants/FontSize";
12 | import Spacing from "../constants/Spacing";
13 | 
14 | const AppTextInput: React.FC<TextInputProps> = ({ ...otherProps }) => {
15 |   const [focused, setFocused] = useState<boolean>(false);
16 |   return (
17 |     <TextInput
18 |       onFocus={() => setFocused(true)}
19 |       onBlur={() => setFocused(false)}
20 |       placeholderTextColor={Colors.darkText}
21 |       style={[
22 |         {
23 |           fontFamily: Font["poppins-regular"],
24 |           fontSize: FontSize.small,
25 |           padding: Spacing * 2,
26 |           backgroundColor: Colors.lightPrimary,
27 |           borderRadius: Spacing,
28 |           marginVertical: Spacing,
29 |         },
30 |         focused && {
31 |           borderWidth: 3,
32 |           borderColor: Colors.primary,
33 |           shadowOffset: { width: 4, height: Spacing },
34 |           shadowColor: Colors.primary,
35 |           shadowOpacity: 0.2,
36 |           shadowRadius: Spacing,
37 |         },
38 |       ]}
39 |       {...otherProps}
40 |     />
41 |   );
42 | };
43 | 
44 | export default AppTextInput;
45 | 
46 | const styles = StyleSheet.create({});
47 | 


--------------------------------------------------------------------------------
/config/fonts.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   "poppins-regular": require("../assets/fonts/Poppins-Regular.ttf"),
3 |   "poppins-bold": require("../assets/fonts/Poppins-Bold.ttf"),
4 |   "poppins-semiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
5 | };
6 | 


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
 1 | const white = "#fff";
 2 | const black = "#000";
 3 | const dark = "#626262";
 4 | const blue = "#1F41BB";
 5 | const gray = "#ECECEC";
 6 | const lightBlue = "#f1f4ff";
 7 | 
 8 | export default {
 9 |   darkText: dark,
10 |   text: black,
11 |   background: white,
12 |   primary: blue,
13 |   onPrimary: white,
14 |   active: blue,
15 |   borderWithOpacity: "#1f41bb",
16 |   lightPrimary: lightBlue,
17 |   gray: gray,
18 | };
19 | 


--------------------------------------------------------------------------------
/constants/Font.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   "poppins-regular": "poppins-regular",
3 |   "poppins-bold": "poppins-bold",
4 |   "poppins-semiBold": "poppins-semiBold",
5 | };
6 | 


--------------------------------------------------------------------------------
/constants/FontSize.ts:
--------------------------------------------------------------------------------
 1 | const small: number = 14;
 2 | const medium: number = 16;
 3 | const large: number = 20;
 4 | const xLarge: number = 30;
 5 | const xxLarge: number = 35;
 6 | 
 7 | export default {
 8 |   small,
 9 |   medium,
10 |   large,
11 |   xLarge,
12 |   xxLarge,
13 | };
14 | 


--------------------------------------------------------------------------------
/constants/Layout.ts:
--------------------------------------------------------------------------------
 1 | import { Dimensions } from "react-native";
 2 | 
 3 | const width = Dimensions.get("window").width;
 4 | const height = Dimensions.get("window").height;
 5 | 
 6 | export default {
 7 |   width,
 8 |   height,
 9 |   isSmallDevice: width < 375,
10 | };
11 | 


--------------------------------------------------------------------------------
/constants/Spacing.ts:
--------------------------------------------------------------------------------
1 | const Spacing: number = 10;
2 | 
3 | export default Spacing;
4 | 


--------------------------------------------------------------------------------
/navigation/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
 3 |  * https://reactnavigation.org/docs/getting-started
 4 |  *
 5 |  */
 6 | 
 7 | import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 8 | import { createNativeStackNavigator } from "@react-navigation/native-stack";
 9 | import * as React from "react";
10 | import Colors from "../constants/Colors";
11 | import LoginScreen from "../screens/LoginScreen";
12 | import RegisterScreen from "../screens/RegisterScreen";
13 | import Welcome from "../screens/WelcomeScreen";
14 | 
15 | import { RootStackParamList } from "../types";
16 | 
17 | const theme = {
18 |   ...DefaultTheme,
19 |   colors: {
20 |     ...DefaultTheme.colors,
21 |     background: Colors.background,
22 |   },
23 | };
24 | 
25 | export default function Navigation() {
26 |   return (
27 |     <NavigationContainer theme={theme}>
28 |       <RootNavigator />
29 |     </NavigationContainer>
30 |   );
31 | }
32 | 
33 | /**
34 |  * A root stack navigator is often used for displaying modals on top of all other content.
35 |  * https://reactnavigation.org/docs/modal
36 |  */
37 | const Stack = createNativeStackNavigator<RootStackParamList>();
38 | 
39 | function RootNavigator() {
40 |   return (
41 |     <Stack.Navigator
42 |       screenOptions={{
43 |         headerShown: false,
44 |       }}
45 |     >
46 |       <Stack.Screen name="Welcome" component={Welcome} />
47 |       <Stack.Screen name="Login" component={LoginScreen} />
48 |       <Stack.Screen name="Register" component={RegisterScreen} />
49 |     </Stack.Navigator>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fashion-react-native-app",
 3 |   "version": "1.0.0",
 4 |   "main": "node_modules/expo/AppEntry.js",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "web": "expo start --web",
10 |     "test": "jest --watchAll"
11 |   },
12 |   "jest": {
13 |     "preset": "jest-expo"
14 |   },
15 |   "dependencies": {
16 |     "@expo/vector-icons": "^13.0.0",
17 |     "@react-navigation/bottom-tabs": "^6.0.5",
18 |     "@react-navigation/native": "^6.0.2",
19 |     "@react-navigation/native-stack": "^6.1.0",
20 |     "expo": "~47.0.8",
21 |     "expo-asset": "~8.6.2",
22 |     "expo-constants": "~14.0.2",
23 |     "expo-font": "~11.0.1",
24 |     "expo-linking": "~3.2.3",
25 |     "expo-splash-screen": "~0.17.5",
26 |     "expo-status-bar": "~1.4.2",
27 |     "expo-system-ui": "~2.0.1",
28 |     "expo-web-browser": "~12.0.0",
29 |     "react": "18.1.0",
30 |     "react-dom": "18.1.0",
31 |     "react-native": "0.70.5",
32 |     "react-native-safe-area-context": "4.4.1",
33 |     "react-native-screens": "~3.18.0",
34 |     "react-native-web": "~0.18.9"
35 |   },
36 |   "devDependencies": {
37 |     "@babel/core": "^7.12.9",
38 |     "@types/react": "~18.0.24",
39 |     "@types/react-native": "~0.70.6",
40 |     "jest": "^26.6.3",
41 |     "jest-expo": "~47.0.1",
42 |     "react-test-renderer": "18.1.0",
43 |     "typescript": "^4.6.3"
44 |   },
45 |   "private": true
46 | }
47 | 


--------------------------------------------------------------------------------
/screens/LoginScreen.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   SafeAreaView,
  3 |   StyleSheet,
  4 |   Text,
  5 |   TextInput,
  6 |   TouchableOpacity,
  7 |   View,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import Spacing from "../constants/Spacing";
 11 | import FontSize from "../constants/FontSize";
 12 | import Colors from "../constants/Colors";
 13 | import Font from "../constants/Font";
 14 | import { Ionicons } from "@expo/vector-icons";
 15 | import { NativeStackScreenProps } from "@react-navigation/native-stack";
 16 | import { RootStackParamList } from "../types";
 17 | import AppTextInput from "../components/AppTextInput";
 18 | 
 19 | type Props = NativeStackScreenProps<RootStackParamList, "Login">;
 20 | 
 21 | const LoginScreen: React.FC<Props> = ({ navigation: { navigate } }) => {
 22 |   return (
 23 |     <SafeAreaView>
 24 |       <View
 25 |         style={{
 26 |           padding: Spacing * 2,
 27 |         }}
 28 |       >
 29 |         <View
 30 |           style={{
 31 |             alignItems: "center",
 32 |           }}
 33 |         >
 34 |           <Text
 35 |             style={{
 36 |               fontSize: FontSize.xLarge,
 37 |               color: Colors.primary,
 38 |               fontFamily: Font["poppins-bold"],
 39 |               marginVertical: Spacing * 3,
 40 |             }}
 41 |           >
 42 |             Login here
 43 |           </Text>
 44 |           <Text
 45 |             style={{
 46 |               fontFamily: Font["poppins-semiBold"],
 47 |               fontSize: FontSize.large,
 48 |               maxWidth: "60%",
 49 |               textAlign: "center",
 50 |             }}
 51 |           >
 52 |             Welcome back you've been missed!
 53 |           </Text>
 54 |         </View>
 55 |         <View
 56 |           style={{
 57 |             marginVertical: Spacing * 3,
 58 |           }}
 59 |         >
 60 |           <AppTextInput placeholder="Email" />
 61 |           <AppTextInput placeholder="Password" />
 62 |         </View>
 63 | 
 64 |         <View>
 65 |           <Text
 66 |             style={{
 67 |               fontFamily: Font["poppins-semiBold"],
 68 |               fontSize: FontSize.small,
 69 |               color: Colors.primary,
 70 |               alignSelf: "flex-end",
 71 |             }}
 72 |           >
 73 |             Forgot your password ?
 74 |           </Text>
 75 |         </View>
 76 | 
 77 |         <TouchableOpacity
 78 |           style={{
 79 |             padding: Spacing * 2,
 80 |             backgroundColor: Colors.primary,
 81 |             marginVertical: Spacing * 3,
 82 |             borderRadius: Spacing,
 83 |             shadowColor: Colors.primary,
 84 |             shadowOffset: {
 85 |               width: 0,
 86 |               height: Spacing,
 87 |             },
 88 |             shadowOpacity: 0.3,
 89 |             shadowRadius: Spacing,
 90 |           }}
 91 |         >
 92 |           <Text
 93 |             style={{
 94 |               fontFamily: Font["poppins-bold"],
 95 |               color: Colors.onPrimary,
 96 |               textAlign: "center",
 97 |               fontSize: FontSize.large,
 98 |             }}
 99 |           >
100 |             Sign in
101 |           </Text>
102 |         </TouchableOpacity>
103 |         <TouchableOpacity
104 |           onPress={() => navigate("Register")}
105 |           style={{
106 |             padding: Spacing,
107 |           }}
108 |         >
109 |           <Text
110 |             style={{
111 |               fontFamily: Font["poppins-semiBold"],
112 |               color: Colors.text,
113 |               textAlign: "center",
114 |               fontSize: FontSize.small,
115 |             }}
116 |           >
117 |             Create new account
118 |           </Text>
119 |         </TouchableOpacity>
120 | 
121 |         <View
122 |           style={{
123 |             marginVertical: Spacing * 3,
124 |           }}
125 |         >
126 |           <Text
127 |             style={{
128 |               fontFamily: Font["poppins-semiBold"],
129 |               color: Colors.primary,
130 |               textAlign: "center",
131 |               fontSize: FontSize.small,
132 |             }}
133 |           >
134 |             Or continue with
135 |           </Text>
136 | 
137 |           <View
138 |             style={{
139 |               marginTop: Spacing,
140 |               flexDirection: "row",
141 |               justifyContent: "center",
142 |             }}
143 |           >
144 |             <TouchableOpacity
145 |               style={{
146 |                 padding: Spacing,
147 |                 backgroundColor: Colors.gray,
148 |                 borderRadius: Spacing / 2,
149 |                 marginHorizontal: Spacing,
150 |               }}
151 |             >
152 |               <Ionicons
153 |                 name="logo-google"
154 |                 color={Colors.text}
155 |                 size={Spacing * 2}
156 |               />
157 |             </TouchableOpacity>
158 |             <TouchableOpacity
159 |               style={{
160 |                 padding: Spacing,
161 |                 backgroundColor: Colors.gray,
162 |                 borderRadius: Spacing / 2,
163 |                 marginHorizontal: Spacing,
164 |               }}
165 |             >
166 |               <Ionicons
167 |                 name="logo-apple"
168 |                 color={Colors.text}
169 |                 size={Spacing * 2}
170 |               />
171 |             </TouchableOpacity>
172 |             <TouchableOpacity
173 |               style={{
174 |                 padding: Spacing,
175 |                 backgroundColor: Colors.gray,
176 |                 borderRadius: Spacing / 2,
177 |                 marginHorizontal: Spacing,
178 |               }}
179 |             >
180 |               <Ionicons
181 |                 name="logo-facebook"
182 |                 color={Colors.text}
183 |                 size={Spacing * 2}
184 |               />
185 |             </TouchableOpacity>
186 |           </View>
187 |         </View>
188 |       </View>
189 |     </SafeAreaView>
190 |   );
191 | };
192 | 
193 | export default LoginScreen;
194 | 
195 | const styles = StyleSheet.create({});
196 | 


--------------------------------------------------------------------------------
/screens/RegisterScreen.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   SafeAreaView,
  3 |   StyleSheet,
  4 |   Text,
  5 |   TextInput,
  6 |   TouchableOpacity,
  7 |   View,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import Spacing from "../constants/Spacing";
 11 | import FontSize from "../constants/FontSize";
 12 | import Colors from "../constants/Colors";
 13 | import Font from "../constants/Font";
 14 | import { Ionicons } from "@expo/vector-icons";
 15 | import { NativeStackScreenProps } from "@react-navigation/native-stack";
 16 | import { RootStackParamList } from "../types";
 17 | import AppTextInput from "../components/AppTextInput";
 18 | 
 19 | type Props = NativeStackScreenProps<RootStackParamList, "Register">;
 20 | 
 21 | const RegisterScreen: React.FC<Props> = ({ navigation: { navigate } }) => {
 22 |   return (
 23 |     <SafeAreaView>
 24 |       <View
 25 |         style={{
 26 |           padding: Spacing * 2,
 27 |         }}
 28 |       >
 29 |         <View
 30 |           style={{
 31 |             alignItems: "center",
 32 |           }}
 33 |         >
 34 |           <Text
 35 |             style={{
 36 |               fontSize: FontSize.xLarge,
 37 |               color: Colors.primary,
 38 |               fontFamily: Font["poppins-bold"],
 39 |               marginVertical: Spacing * 3,
 40 |             }}
 41 |           >
 42 |             Create account
 43 |           </Text>
 44 |           <Text
 45 |             style={{
 46 |               fontFamily: Font["poppins-regular"],
 47 |               fontSize: FontSize.small,
 48 |               maxWidth: "80%",
 49 |               textAlign: "center",
 50 |             }}
 51 |           >
 52 |             Create an account so you can explore all the existing jobs
 53 |           </Text>
 54 |         </View>
 55 |         <View
 56 |           style={{
 57 |             marginVertical: Spacing * 3,
 58 |           }}
 59 |         >
 60 |           <AppTextInput placeholder="Email" />
 61 |           <AppTextInput placeholder="Password" />
 62 |           <AppTextInput placeholder="Confirm Password" />
 63 |         </View>
 64 | 
 65 |         <TouchableOpacity
 66 |           style={{
 67 |             padding: Spacing * 2,
 68 |             backgroundColor: Colors.primary,
 69 |             marginVertical: Spacing * 3,
 70 |             borderRadius: Spacing,
 71 |             shadowColor: Colors.primary,
 72 |             shadowOffset: {
 73 |               width: 0,
 74 |               height: Spacing,
 75 |             },
 76 |             shadowOpacity: 0.3,
 77 |             shadowRadius: Spacing,
 78 |           }}
 79 |         >
 80 |           <Text
 81 |             style={{
 82 |               fontFamily: Font["poppins-bold"],
 83 |               color: Colors.onPrimary,
 84 |               textAlign: "center",
 85 |               fontSize: FontSize.large,
 86 |             }}
 87 |           >
 88 |             Sign up
 89 |           </Text>
 90 |         </TouchableOpacity>
 91 |         <TouchableOpacity
 92 |           onPress={() => navigate("Login")}
 93 |           style={{
 94 |             padding: Spacing,
 95 |           }}
 96 |         >
 97 |           <Text
 98 |             style={{
 99 |               fontFamily: Font["poppins-semiBold"],
100 |               color: Colors.text,
101 |               textAlign: "center",
102 |               fontSize: FontSize.small,
103 |             }}
104 |           >
105 |             Already have an account
106 |           </Text>
107 |         </TouchableOpacity>
108 | 
109 |         <View
110 |           style={{
111 |             marginVertical: Spacing * 3,
112 |           }}
113 |         >
114 |           <Text
115 |             style={{
116 |               fontFamily: Font["poppins-semiBold"],
117 |               color: Colors.primary,
118 |               textAlign: "center",
119 |               fontSize: FontSize.small,
120 |             }}
121 |           >
122 |             Or continue with
123 |           </Text>
124 | 
125 |           <View
126 |             style={{
127 |               marginTop: Spacing,
128 |               flexDirection: "row",
129 |               justifyContent: "center",
130 |             }}
131 |           >
132 |             <TouchableOpacity
133 |               style={{
134 |                 padding: Spacing,
135 |                 backgroundColor: Colors.gray,
136 |                 borderRadius: Spacing / 2,
137 |                 marginHorizontal: Spacing,
138 |               }}
139 |             >
140 |               <Ionicons
141 |                 name="logo-google"
142 |                 color={Colors.text}
143 |                 size={Spacing * 2}
144 |               />
145 |             </TouchableOpacity>
146 |             <TouchableOpacity
147 |               style={{
148 |                 padding: Spacing,
149 |                 backgroundColor: Colors.gray,
150 |                 borderRadius: Spacing / 2,
151 |                 marginHorizontal: Spacing,
152 |               }}
153 |             >
154 |               <Ionicons
155 |                 name="logo-apple"
156 |                 color={Colors.text}
157 |                 size={Spacing * 2}
158 |               />
159 |             </TouchableOpacity>
160 |             <TouchableOpacity
161 |               style={{
162 |                 padding: Spacing,
163 |                 backgroundColor: Colors.gray,
164 |                 borderRadius: Spacing / 2,
165 |                 marginHorizontal: Spacing,
166 |               }}
167 |             >
168 |               <Ionicons
169 |                 name="logo-facebook"
170 |                 color={Colors.text}
171 |                 size={Spacing * 2}
172 |               />
173 |             </TouchableOpacity>
174 |           </View>
175 |         </View>
176 |       </View>
177 |     </SafeAreaView>
178 |   );
179 | };
180 | 
181 | export default RegisterScreen;
182 | 


--------------------------------------------------------------------------------
/screens/WelcomeScreen.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Dimensions,
  3 |   ImageBackground,
  4 |   SafeAreaView,
  5 |   StyleSheet,
  6 |   Text,
  7 |   TouchableOpacity,
  8 |   View,
  9 | } from "react-native";
 10 | import React from "react";
 11 | import Spacing from "../constants/Spacing";
 12 | import FontSize from "../constants/FontSize";
 13 | import Colors from "../constants/Colors";
 14 | import Font from "../constants/Font";
 15 | import { NativeStackScreenProps } from "@react-navigation/native-stack";
 16 | import { RootStackParamList } from "../types";
 17 | const { height } = Dimensions.get("window");
 18 | 
 19 | type Props = NativeStackScreenProps<RootStackParamList, "Welcome">;
 20 | 
 21 | const WelcomeScreen: React.FC<Props> = ({ navigation: { navigate } }) => {
 22 |   return (
 23 |     <SafeAreaView>
 24 |       <View>
 25 |         <ImageBackground
 26 |           style={{
 27 |             height: height / 2.5,
 28 |           }}
 29 |           resizeMode="contain"
 30 |           source={require("../assets/images/welcome-img.png")}
 31 |         />
 32 |         <View
 33 |           style={{
 34 |             paddingHorizontal: Spacing * 4,
 35 |             paddingTop: Spacing * 4,
 36 |           }}
 37 |         >
 38 |           <Text
 39 |             style={{
 40 |               fontSize: FontSize.xxLarge,
 41 |               color: Colors.primary,
 42 |               fontFamily: Font["poppins-bold"],
 43 |               textAlign: "center",
 44 |             }}
 45 |           >
 46 |             Discover Your Dream Job here
 47 |           </Text>
 48 | 
 49 |           <Text
 50 |             style={{
 51 |               fontSize: FontSize.small,
 52 |               color: Colors.text,
 53 |               fontFamily: Font["poppins-regular"],
 54 |               textAlign: "center",
 55 |               marginTop: Spacing * 2,
 56 |             }}
 57 |           >
 58 |             Explore all the existing job roles based or your interest and study
 59 |             major
 60 |           </Text>
 61 |         </View>
 62 |         <View
 63 |           style={{
 64 |             paddingHorizontal: Spacing * 2,
 65 |             paddingTop: Spacing * 6,
 66 |             flexDirection: "row",
 67 |           }}
 68 |         >
 69 |           <TouchableOpacity
 70 |             onPress={() => navigate("Login")}
 71 |             style={{
 72 |               backgroundColor: Colors.primary,
 73 |               paddingVertical: Spacing * 1.5,
 74 |               paddingHorizontal: Spacing * 2,
 75 |               width: "48%",
 76 |               borderRadius: Spacing,
 77 |               shadowColor: Colors.primary,
 78 |               shadowOffset: {
 79 |                 width: 0,
 80 |                 height: Spacing,
 81 |               },
 82 |               shadowOpacity: 0.3,
 83 |               shadowRadius: Spacing,
 84 |             }}
 85 |           >
 86 |             <Text
 87 |               style={{
 88 |                 fontFamily: Font["poppins-bold"],
 89 |                 color: Colors.onPrimary,
 90 |                 fontSize: FontSize.large,
 91 |                 textAlign: "center",
 92 |               }}
 93 |             >
 94 |               Login
 95 |             </Text>
 96 |           </TouchableOpacity>
 97 |           <TouchableOpacity
 98 |             onPress={() => navigate("Register")}
 99 |             style={{
100 |               paddingVertical: Spacing * 1.5,
101 |               paddingHorizontal: Spacing * 2,
102 |               width: "48%",
103 |               borderRadius: Spacing,
104 |             }}
105 |           >
106 |             <Text
107 |               style={{
108 |                 fontFamily: Font["poppins-bold"],
109 |                 color: Colors.text,
110 |                 fontSize: FontSize.large,
111 |                 textAlign: "center",
112 |               }}
113 |             >
114 |               Register
115 |             </Text>
116 |           </TouchableOpacity>
117 |         </View>
118 |       </View>
119 |     </SafeAreaView>
120 |   );
121 | };
122 | 
123 | export default WelcomeScreen;
124 | 
125 | const styles = StyleSheet.create({});
126 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "expo/tsconfig.base",
3 |   "compilerOptions": {
4 |     "strict": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/types.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about using TypeScript with React Navigation:
 3 |  * https://reactnavigation.org/docs/typescript/
 4 |  */
 5 | 
 6 | import { NativeStackScreenProps } from "@react-navigation/native-stack";
 7 | 
 8 | declare global {
 9 |   namespace ReactNavigation {
10 |     interface RootParamList extends RootStackParamList {}
11 |   }
12 | }
13 | 
14 | export type RootStackParamList = {
15 |   Welcome: undefined;
16 |   Login: undefined;
17 |   Register: undefined;
18 | };
19 | 
20 | export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
21 |   NativeStackScreenProps<RootStackParamList, Screen>;
22 | 


--------------------------------------------------------------------------------