├── .expo-shared
    └── assets.json
├── .gitignore
├── App.tsx
├── app.json
├── assets
    ├── favicon.png
    ├── fonts
    │   ├── Gotham-Black.otf
    │   ├── Gotham-Bold.otf
    │   └── GothamMedium.ttf
    ├── icon.png
    ├── images
    │   └── boygirl.png
    └── splash.png
├── babel.config.js
├── package.json
├── react-native-redash.zip
├── src
    ├── Utils
    │   ├── AnswersBtn.tsx
    │   ├── Button.tsx
    │   └── index.ts
    └── components
    │   ├── Helper.ts
    │   ├── LoadAssets.tsx
    │   ├── Navigation.ts
    │   ├── OnBoarding
    │       ├── Welcome.tsx
    │       └── index.tsx
    │   ├── Question
    │       ├── Alert.tsx
    │       ├── Ansers.tsx
    │       ├── Question.tsx
    │       ├── QuestionSlide.tsx
    │       ├── QuizContainer.tsx
    │       ├── data.ts
    │       └── index.tsx
    │   ├── SvgIcons
    │       ├── Bad.tsx
    │       └── Good.tsx
    │   ├── index.ts
    │   └── theme.ts
├── tsconfig.json
├── yarn-error.log
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


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


--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import "react-native-gesture-handler";
 3 | import { StatusBar } from "expo-status-bar";
 4 | import { ThemeProvider } from "@shopify/restyle";
 5 | import { createStackNavigator } from "@react-navigation/stack";
 6 | import { SafeAreaProvider } from "react-native-safe-area-context";
 7 | 
 8 | import { LoadAssets, theme } from "./src/components";
 9 | import { OnBoardingNavigator } from "./src/components/OnBoarding";
10 | import { QuestionNavigator } from "./src/components/Question";
11 | 
12 | import { welcomeAssets } from "./src/components/OnBoarding/Welcome";
13 | 
14 | const assets: number[] = [welcomeAssets];
15 | 
16 | const fonts = {
17 |   "Gotham-Bold": require("./assets/fonts/Gotham-Bold.otf"),
18 |   "Gotham-Medium": require("./assets/fonts/GothamMedium.ttf"),
19 |   "Gotham-Black": require("./assets/fonts/Gotham-Black.otf"),
20 | };
21 | 
22 | export type AppStackRoutes = {
23 |   OnBoarding: undefined;
24 |   Question: undefined;
25 | };
26 | 
27 | const AppStack = createStackNavigator<AppStackRoutes>();
28 | 
29 | export default function App() {
30 |   return (
31 |     <ThemeProvider {...{ theme }}>
32 |       <LoadAssets {...{ assets, fonts }}>
33 |         <SafeAreaProvider>
34 |           <AppStack.Navigator headerMode="none" initialRouteName="OnBoarding">
35 |             <AppStack.Screen
36 |               name="OnBoarding"
37 |               component={OnBoardingNavigator}
38 |             />
39 |             <AppStack.Screen name="Question" component={QuestionNavigator} />
40 |           </AppStack.Navigator>
41 |         </SafeAreaProvider>
42 |       </LoadAssets>
43 |       <StatusBar />
44 |     </ThemeProvider>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "rnn-quiz-project",
 4 |     "slug": "rnn-quiz-project",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "web": {
23 |       "favicon": "./assets/favicon.png"
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/favicon.png


--------------------------------------------------------------------------------
/assets/fonts/Gotham-Black.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/fonts/Gotham-Black.otf


--------------------------------------------------------------------------------
/assets/fonts/Gotham-Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/fonts/Gotham-Bold.otf


--------------------------------------------------------------------------------
/assets/fonts/GothamMedium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/fonts/GothamMedium.ttf


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/icon.png


--------------------------------------------------------------------------------
/assets/images/boygirl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/images/boygirl.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/assets/splash.png


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "@expo/vector-icons": "^10.2.1",
12 |     "@react-native-community/masked-view": "^0.1.10",
13 |     "@react-navigation/native": "^5.7.3",
14 |     "@react-navigation/stack": "^5.9.0",
15 |     "@shopify/restyle": "^1.2.0",
16 |     "expo": "~38.0.8",
17 |     "expo-constants": "^9.1.1",
18 |     "expo-linear-gradient": "~8.2.1",
19 |     "expo-status-bar": "^1.0.2",
20 |     "react": "~16.11.0",
21 |     "react-dom": "~16.11.0",
22 |     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
23 |     "react-native-gesture-handler": "^1.8.0",
24 |     "react-native-reanimated": "1.9.0",
25 |     "react-native-redash": "14.2.1",
26 |     "react-native-safe-area-context": "^3.1.8",
27 |     "react-native-screens": "^2.11.0",
28 |     "react-native-size-matters": "^0.3.1",
29 |     "react-native-svg": "^12.1.0",
30 |     "react-native-web": "~0.11.7",
31 |     "styled-components": "^5.2.0"
32 |   },
33 |   "devDependencies": {
34 |     "@babel/core": "^7.8.6",
35 |     "@types/react": "~16.9.41",
36 |     "@types/react-native": "~0.62.13",
37 |     "typescript": "~3.9.5"
38 |   },
39 |   "private": true
40 | }
41 | 


--------------------------------------------------------------------------------
/react-native-redash.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thellecodes/fullstack-quiz-app-react-native/7eb5f7d5836644d55f07d5bb0d2f489ae33da601/react-native-redash.zip


--------------------------------------------------------------------------------
/src/Utils/AnswersBtn.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Dimensions, StyleSheet } from "react-native";
 3 | import { RectButton } from "react-native-gesture-handler";
 4 | import { useTheme } from "@shopify/restyle";
 5 | import { Theme, Text, Box } from "../components/theme";
 6 | const { width } = Dimensions.get("window");
 7 | 
 8 | interface AnswerButtonProps {
 9 |   variant?: "default" | "primary";
10 |   answer?: string;
11 |   clicked?: number | boolean;
12 |   correct?: boolean;
13 |   onPress?: () => void;
14 | }
15 | 
16 | const styles = StyleSheet.create({
17 |   container: {
18 |     borderRadius: 10,
19 |     height: 50,
20 |     width: 245,
21 |     justifyContent: "center",
22 |     alignItems: "center",
23 |     marginBottom: 15,
24 |     borderColor: "#000",
25 |     borderWidth: 1,
26 |   },
27 | });
28 | 
29 | const AnswersBtn = ({
30 |   variant,
31 |   answer,
32 |   onPress,
33 |   clicked,
34 | }: AnswerButtonProps) => {
35 |   const theme = useTheme<Theme>();
36 |   const backgroundColor =
37 |     variant === "primary" ? theme.colors.button : theme.colors.grey;
38 |   const color = variant === "primary" ? theme.colors.white : theme.colors.green;
39 | 
40 |   return (
41 |     <RectButton
42 |       {...{ onPress }}
43 |       style={{
44 |         ...styles.container,
45 |         width: width * 0.9,
46 |         backgroundColor,
47 |       }}
48 |     >
49 |       <Text style={{ color }} variant="button" textAlign="center">
50 |         {answer}
51 |       </Text>
52 |     </RectButton>
53 |   );
54 | };
55 | 
56 | AnswersBtn.defaultProps = { variant: "default" };
57 | 
58 | export default AnswersBtn;
59 | 


--------------------------------------------------------------------------------
/src/Utils/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { StyleSheet } from "react-native";
 3 | import { RectButton } from "react-native-gesture-handler";
 4 | import { useTheme } from "@shopify/restyle";
 5 | import { Theme, Text } from "../components/theme";
 6 | 
 7 | interface ButtonProps {
 8 |   variant?: "default" | "primary";
 9 |   label?: string;
10 |   onPress?: () => void;
11 |   textTransform?: any;
12 | }
13 | 
14 | const styles = StyleSheet.create({
15 |   container: {
16 |     borderRadius: 50,
17 |     height: 50,
18 |     width: 245,
19 |     justifyContent: "center",
20 |     alignItems: "center",
21 |     marginBottom: 15,
22 |   },
23 | });
24 | 
25 | const Button = ({ variant, label, onPress, textTransform }: ButtonProps) => {
26 |   const theme = useTheme<Theme>();
27 |   const backgroundColor =
28 |     variant === "primary" ? theme.colors.button : theme.colors.grey;
29 |   const color = variant === "primary" ? theme.colors.white : theme.colors.green;
30 | 
31 |   return (
32 |     <RectButton
33 |       {...{ onPress }}
34 |       style={{ ...styles.container, backgroundColor }}
35 |     >
36 |       <Text
37 |         style={{
38 |           color,
39 |         }}
40 |         textTransform={textTransform ? textTransform : "lowercase"}
41 |         variant="button"
42 |       >
43 |         {label}
44 |       </Text>
45 |     </RectButton>
46 |   );
47 | };
48 | 
49 | Button.defaultProps = { variant: "default" };
50 | 
51 | export default Button;
52 | 


--------------------------------------------------------------------------------
/src/Utils/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Button } from "./Button";
2 | export { default as AnswerBtn } from "./AnswersBtn";
3 | 


--------------------------------------------------------------------------------
/src/components/Helper.ts:
--------------------------------------------------------------------------------
 1 | export const _ = null 
 2 | 
 3 | export enum QuestionsDifficulty {
 4 | 
 5 | }
 6 | 
 7 | export type QuizProps = {
 8 |  
 9 | };
10 | 
11 | export type QuizPropsState = QuizProps & { answers: string[] };
12 | 
13 | export const grabQuizQuestions = async (
14 |   total_questions: number,
15 |   difficulty: QuestionsDifficulty
16 | ): Promise<QuizPropsState> => {
17 |   
18 | };
19 | 


--------------------------------------------------------------------------------
/src/components/LoadAssets.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement, useCallback, useEffect, useState } from "react";
 2 | import { AsyncStorage } from "react-native";
 3 | import { AppLoading } from "expo";
 4 | import { Asset } from "expo-asset";
 5 | import * as Font from "expo-font";
 6 | import { InitialState, NavigationContainer } from "@react-navigation/native";
 7 | import Constants from "expo-constants";
 8 | import { StatusBar } from "expo-status-bar";
 9 | 
10 | const NAVIGATION_STATE_KEY = `NAVIGATION_STATE_KEY-${Constants.manifest.sdkVersion}`;
11 | 
12 | export type FontSource = Parameters<typeof Font.loadAsync>[0];
13 | const usePromiseAll = (promises: Promise<void | void[]>[], cb: () => void) =>
14 |   useEffect(() => {
15 |     (async () => {
16 |       await Promise.all(promises);
17 |       cb();
18 |     })();
19 |   });
20 | 
21 | const useLoadAssets = (assets: number[], fonts: FontSource): boolean => {
22 |   const [ready, setReady] = useState(false);
23 |   usePromiseAll(
24 |     [Font.loadAsync(fonts), ...assets.map((asset) => Asset.loadAsync(asset))],
25 |     () => setReady(true)
26 |   );
27 |   return ready;
28 | };
29 | 
30 | interface LoadAssetsProps {
31 |   fonts?: FontSource;
32 |   assets?: number[];
33 |   children: ReactElement | ReactElement[];
34 | }
35 | 
36 | const LoadAssets = ({ assets, fonts, children }: LoadAssetsProps) => {
37 |   const [isNavigationReady, setIsNavigationReady] = useState(!__DEV__);
38 |   const [initialState, setInitialState] = useState<InitialState | undefined>();
39 |   const ready = useLoadAssets(assets || [], fonts || {});
40 |   useEffect(() => {
41 |     const restoreState = async () => {
42 |       try {
43 |         const savedStateString = await AsyncStorage.getItem(
44 |           NAVIGATION_STATE_KEY
45 |         );
46 |         const state = savedStateString
47 |           ? JSON.parse(savedStateString)
48 |           : undefined;
49 |         setInitialState(state);
50 |       } finally {
51 |         setIsNavigationReady(true);
52 |       }
53 |     };
54 | 
55 |     if (!isNavigationReady) {
56 |       restoreState();
57 |     }
58 |   }, [isNavigationReady]);
59 |   const onStateChange = useCallback(
60 |     (state) =>
61 |       AsyncStorage.setItem(NAVIGATION_STATE_KEY, JSON.stringify(state)),
62 |     []
63 |   );
64 |   if (!ready || !isNavigationReady) {
65 |     return <AppLoading />;
66 |   }
67 |   return (
68 |     <NavigationContainer {...{ onStateChange, initialState }}>
69 |       <StatusBar style="light" />
70 |       {children}
71 |     </NavigationContainer>
72 |   );
73 | };
74 | 
75 | export default LoadAssets;
76 | 


--------------------------------------------------------------------------------
/src/components/Navigation.ts:
--------------------------------------------------------------------------------
 1 | import { ParamListBase, RouteProp } from "@react-navigation/native";
 2 | import { StackNavigationProp } from "@react-navigation/stack";
 3 | 
 4 | export interface StackNavigationProps<
 5 |   ParamList extends ParamListBase,
 6 |   RouteName extends keyof ParamList = string
 7 | > {
 8 |   navigation: StackNavigationProp<ParamList, RouteName>;
 9 |   route: RouteProp<ParamList, RouteName>;
10 | }
11 | 
12 | export type OnBoardingRoutes = {
13 |   Welcome: undefined;
14 | };
15 | 
16 | export type QuestionRoutes = {
17 |   MainQuestion: undefined;
18 |   Quiz: undefined;
19 | };
20 | 


--------------------------------------------------------------------------------
/src/components/OnBoarding/Welcome.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Dimensions, SafeAreaView, Image } from "react-native";
  3 | import Constants from "expo-constants";
  4 | 
  5 | /* Navigation Props*/
  6 | import { CompositeNavigationProp } from "@react-navigation/native";
  7 | import { StackNavigationProp } from "@react-navigation/stack";
  8 | import { OnBoardingRoutes } from "../Navigation";
  9 | import { AppStackRoutes } from "../../../App";
 10 | 
 11 | const { height, width } = Dimensions.get("window");
 12 | import { moderateScale, verticalScale } from "react-native-size-matters";
 13 | import Animated from "react-native-reanimated";
 14 | import { StatusBar } from "expo-status-bar";
 15 | 
 16 | export const welcomeAssets = require("../../../assets/images/boygirl.png");
 17 | 
 18 | /* Utils */
 19 | import theme, { Box, Text } from "../theme";
 20 | import { Button } from "../../Utils";
 21 | import QuizContainer from "../Question/QuizContainer";
 22 | interface WelcomeProps {
 23 |   navigation: CompositeNavigationProp<
 24 |     StackNavigationProp<OnBoardingRoutes, "Welcome">,
 25 |     StackNavigationProp<AppStackRoutes, "Question">
 26 |   >;
 27 | }
 28 | 
 29 | const Welcome = ({ navigation }: WelcomeProps) => {
 30 |   return (
 31 |     <QuizContainer>
 32 |       <Box flex={1} backgroundColor="white" justifyContent="flex-start">
 33 |         <Box height={height * 0.5} justifyContent="center" alignItems="center">
 34 |           <Box
 35 |             height={verticalScale(250)}
 36 |             width={moderateScale(250)}
 37 |             backgroundColor="white"
 38 |             alignItems="center"
 39 |             justifyContent="center"
 40 |             padding="m"
 41 |           >
 42 |             <Image
 43 |               source={welcomeAssets}
 44 |               style={{ flex: 1 }}
 45 |               resizeMode="contain"
 46 |             />
 47 |           </Box>
 48 |         </Box>
 49 | 
 50 |         <Animated.View
 51 |           style={{
 52 |             backgroundColor: theme.colors["primary"],
 53 |             height: 500 + height,
 54 |             width: width * 2,
 55 |             borderRadius: 1000,
 56 |             position: "absolute",
 57 |             alignSelf: "center",
 58 |             top: 0.52 * height,
 59 |           }}
 60 |         />
 61 | 
 62 |         <Animated.View
 63 |           style={{
 64 |             backgroundColor: theme.colors["primary"],
 65 |             height: height * 0.35,
 66 |             width: width,
 67 |             position: "absolute",
 68 |             bottom: 0,
 69 |             alignSelf: "center",
 70 |             padding: 20,
 71 |             alignItems: "center",
 72 |           }}
 73 |         >
 74 |           <Text variant="title" marginBottom="m" textAlign="center">
 75 |             Quiz App
 76 |           </Text>
 77 | 
 78 |           <Text
 79 |             variant="body"
 80 |             color="white"
 81 |             textAlign="center"
 82 |             marginBottom="m"
 83 |           >
 84 |             Improve your app building skills and upgrade your personal growth
 85 |           </Text>
 86 | 
 87 |           <Button
 88 |             variant="primary"
 89 |             label="Start Quiz"
 90 |             onPress={() => navigation.navigate("Question")}
 91 |             textTransform="uppercase"
 92 |           />
 93 |         </Animated.View>
 94 |       </Box>
 95 |       <StatusBar backgroundColor={theme.colors["primary"]} style="light" />
 96 |     </QuizContainer>
 97 |   );
 98 | };
 99 | 
100 | export default Welcome;
101 | 


--------------------------------------------------------------------------------
/src/components/OnBoarding/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createStackNavigator } from "@react-navigation/stack";
 3 | import { OnBoardingRoutes } from "../Navigation";
 4 | 
 5 | import Welcome from "./Welcome";
 6 | 
 7 | export const assets = [];
 8 | 
 9 | const OnBoardingStack = createStackNavigator<OnBoardingRoutes>();
10 | export const OnBoardingNavigator = () => (
11 |   <OnBoardingStack.Navigator headerMode="none">
12 |     <OnBoardingStack.Screen name="Welcome" component={Welcome} />
13 |   </OnBoardingStack.Navigator>
14 | );
15 | 


--------------------------------------------------------------------------------
/src/components/Question/Alert.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Dimensions, StyleSheet } from "react-native";
  3 | import { Button } from "../../Utils";
  4 | import { Box, Text } from "../theme";
  5 | import GoodIcon from "../SvgIcons/Good";
  6 | import Bad from "../SvgIcons/Bad";
  7 | import { moderateScale } from "react-native-size-matters";
  8 | import Animated, { call, cond, eq, interpolate } from "react-native-reanimated";
  9 | import { currAnswerObjectProps } from "./Question";
 10 | import { useEffect } from "react";
 11 | const { height, width } = Dimensions.get("window");
 12 | 
 13 | interface FinishedAlertProps {
 14 |   finished: Animated.Node<number>;
 15 |   onRestart: () => void;
 16 |   userAnswers: any | undefined;
 17 | }
 18 | 
 19 | const FinishedAlert = ({
 20 |   finished,
 21 |   onRestart,
 22 |   userAnswers,
 23 | }: FinishedAlertProps) => {
 24 |   const [percent, setPercent] = useState<number | any>();
 25 |   const [correctCount, setCorrectCount] = useState<number>(0);
 26 | 
 27 |   const opacity = interpolate(finished, {
 28 |     inputRange: [0, 1],
 29 |     outputRange: [0, 1],
 30 |   });
 31 | 
 32 |   const zIndex = interpolate(finished, {
 33 |     inputRange: [0, 1],
 34 |     outputRange: [0, 2],
 35 |   });
 36 | 
 37 |   const calculaterScore = () => {
 38 |     let correct = 0;
 39 |     for (const el of userAnswers) {
 40 |       if (el.answerIsCorrect) {
 41 |         correct++;
 42 |       }
 43 |     }
 44 |     setCorrectCount(correct);
 45 |     const got = (correct / 100) * 10;
 46 |     const percentage = got * 100;
 47 |     setPercent(percentage);
 48 |   };
 49 | 
 50 |   useEffect(() => {
 51 |     calculaterScore();
 52 |   }, [userAnswers]);
 53 | 
 54 |   return (
 55 |     <Animated.View
 56 |       style={{
 57 |         ...StyleSheet.absoluteFillObject,
 58 |         backgroundColor: "#00000090",
 59 |         justifyContent: "center",
 60 |         alignItems: "center",
 61 |         opacity,
 62 |         zIndex,
 63 |       }}
 64 |     >
 65 |       <Box
 66 |         height={moderateScale(height * 0.7)}
 67 |         width={moderateScale(width * 0.85)}
 68 |         alignItems="center"
 69 |       >
 70 |         <Box
 71 |           backgroundColor="white"
 72 |           height={moderateScale(120)}
 73 |           width={moderateScale(120)}
 74 |           position="absolute"
 75 |           zIndex={1}
 76 |           borderRadius="xl"
 77 |           justifyContent="center"
 78 |           alignItems="center"
 79 |           top={moderateScale(12)}
 80 |         >
 81 |           {percent > 50 ? <GoodIcon /> : <Bad />}
 82 |         </Box>
 83 |         <Box height={height * 0.15}></Box>
 84 |         <Box
 85 |           flex={1}
 86 |           alignItems="center"
 87 |           style={{ paddingTop: 50 }}
 88 |           padding="m"
 89 |           backgroundColor="white"
 90 |         >
 91 |           <Text
 92 |             variant="title"
 93 |             fontSize={moderateScale(25)}
 94 |             marginBottom="s"
 95 |             color="black"
 96 |             textAlign="center"
 97 |           >
 98 |             {percent > 50 ? "Passed" : "Failed"}
 99 |           </Text>
100 | 
101 |           <Text
102 |             variant="title"
103 |             color={percent > 50 ? "green" : "danger"}
104 |             textAlign="center"
105 |             marginBottom="m"
106 |           >
107 |             {percent}% SCORE
108 |           </Text>
109 | 
110 |           <Text
111 |             variant="body"
112 |             fontWeight="600"
113 |             color="black"
114 |             textAlign="center"
115 |             marginBottom="m"
116 |           >
117 |             Your quiz completed successfully.
118 |           </Text>
119 | 
120 |           <Text
121 |             color="black"
122 |             variant="body"
123 |             textAlign="center"
124 |             marginBottom="m"
125 |             fontSize={14}
126 |           >
127 |             Your attempted {userAnswers.length} questions and you only got{" "}
128 |             {correctCount} in the quiz test.
129 |           </Text>
130 | 
131 |           <Button
132 |             onPress={onRestart}
133 |             variant="primary"
134 |             textTransform="uppercase"
135 |             label="Ok"
136 |           />
137 |         </Box>
138 |       </Box>
139 |     </Animated.View>
140 |   );
141 | };
142 | 
143 | export default FinishedAlert;
144 | 


--------------------------------------------------------------------------------
/src/components/Question/Ansers.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from "react";
 2 | import { View, Text, StyleSheet } from "react-native";
 3 | import { AnswerBtn } from "../../Utils";
 4 | 
 5 | interface AnswersProps {
 6 |   answers: string[];
 7 |   onPress?: () => void;
 8 |   answerSelected: (answer: string, index: number) => void;
 9 | }
10 | 
11 | const styles = StyleSheet.create({
12 |   container: {
13 |     flex: 1,
14 |     justifyContent: "center",
15 |     alignItems: "center",
16 |     padding: 44,
17 |   },
18 | });
19 | 
20 | export default function Answers({ answers, answerSelected }: AnswersProps) {
21 |   return (
22 |     <View style={{ ...styles.container }}>
23 |      
24 |     </View>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/Question/Question.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Fragment, useRef, useState, useEffect } from "react";
  2 | import { Dimensions, StyleSheet } from "react-native";
  3 | import Animated, {
  4 |   multiply,
  5 |   SpringUtils,
  6 |   Value,
  7 | } from "react-native-reanimated";
  8 | import { verticalScale } from "react-native-size-matters";
  9 | import theme, { Box, Text } from "../theme";
 10 | import QuestionSlide from "./QuestionSlide";
 11 | import QuizContainer from "./QuizContainer";
 12 | import {
 13 |   useScrollHandler,
 14 |   useValue,
 15 |   withSpringTransition,
 16 | } from "react-native-redash";
 17 | const { View, ScrollView } = Animated;
 18 | 
 19 | /* Utils */
 20 | const { height, width } = Dimensions.get("window");
 21 | import { questions } from "./data";
 22 | import Answers from "./Ansers";
 23 | import { Button } from "../../Utils";
 24 | import {
 25 |   grabQuizQuestions,
 26 |   QuestionsDifficulty,
 27 |   QuizPropsState,
 28 |   _,
 29 | } from "../Helper";
 30 | import Alert from "./Alert";
 31 | 
 32 | export type currAnswerObjectProps = {
 33 | 
 34 | };
 35 | 
 36 | interface QuesitonProps {
 37 |  
 38 | }
 39 | 
 40 | const Question = ({ navigation }: QuesitonProps) => {
 41 |   const scroll = useRef<Animated.ScrollView>(null);
 42 | 
 43 |   const shuffledDifficulty = _([ ]);
 44 | 
 45 |   const answerSelected = (answer: string, index: number) => {
 46 |   
 47 |   };
 48 | 
 49 |   const startJob = async () => {
 50 |    
 51 |   };
 52 | 
 53 |   const nextQuestion = () => {
 54 |    
 55 |   };
 56 | 
 57 |   useEffect(() => {
 58 |   }, [curNum]);
 59 | 
 60 |   useEffect(() => {
 61 |   
 62 |   }, [userSelectedAnswers]);
 63 | 
 64 |   useEffect(() => {
 65 |   }, []);
 66 | 
 67 |   //* Finished Animation*//
 68 |   const finishedValue = useValue<number>(0);
 69 | 
 70 |   useEffect(() => {
 71 |    
 72 |   }, [quizOver]);
 73 | 
 74 |   const finished = withSpringTransition(finishedValue, {
 75 |     ...SpringUtils.makeDefaultConfig(),
 76 |     overshootClamping: true,
 77 |     damping: new Value(10),
 78 |   });
 79 | 
 80 |   return (
 81 |     <QuizContainer>
 82 |       <Box flex={1}>
 83 |         {qloading ? (
 84 |           <View
 85 |             style={{
 86 |               ...StyleSheet.absoluteFillObject,
 87 |               justifyContent: "center",
 88 |               alignItems: "center",
 89 |               backgroundColor: theme.colors["primary"],
 90 |             }}
 91 |           >
 92 |             <Text color="white" variant="body">
 93 |               Quiz Loading...
 94 |             </Text>
 95 |           </View>
 96 |         ) : (
 97 |           <Box flex={1}>
 98 |             <Box justifyContent="flex-start" flex={1} flexDirection="column">
 99 |               <Box
100 |                 height={verticalScale(height * 0.3)}
101 |                 backgroundColor="primary"
102 |               >
103 |                 <ScrollView
104 |                   ref={scroll}
105 |                   horizontal
106 |                   snapToInterval={width}
107 |                   decelerationRate="fast"
108 |                   bounces={false}
109 |                 >
110 |                  
111 |                 </ScrollView>
112 |               </Box>
113 | 
114 |               <Box
115 |                 style={{ flex: 1 }}
116 |                 backgroundColor="white"
117 |                 height={0.4 * height}
118 |                 paddingTop="m"
119 |               >
120 |                 <View
121 |                   style={{
122 |                     backgroundColor: theme.colors["white"],
123 |                     flexDirection: "row",
124 |                   }}
125 |                 >
126 |                  
127 |                 </View>
128 |               </Box>
129 | 
130 |               <View
131 |                 style={{
132 |                   backgroundColor: "white",
133 |                   flexDirection: "row",
134 |                 }}
135 |               >
136 |                
137 |               </View>
138 |             </Box>
139 |           </Box>
140 |         )}
141 |       </Box>
142 |       
143 |     </QuizContainer>
144 |   );
145 | };
146 | 
147 | export default Question;
148 | 


--------------------------------------------------------------------------------
/src/components/Question/QuestionSlide.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { View, Dimensions } from "react-native";
 3 | import { Box, Text } from "../theme";
 4 | import { questions } from "./data";
 5 | const { width, height } = Dimensions.get("window");
 6 | 
 7 | interface QuestionSlideProps {
 8 | }
 9 | 
10 | export default function QuestionSlide({
11 | }: QuestionSlideProps) {
12 |   return (
13 |     <Box {...{ width }} alignItems="center" padding="m">
14 |       <Text variant="title" fontSize={24} marginTop="m">
15 |         Question Number {}
16 |       </Text>
17 | 
18 |       <Text variant="body" color="white" marginTop="xl" textAlign="center">
19 |         {question}
20 |       </Text>
21 |     </Box>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/Question/QuizContainer.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement } from "react";
 2 | import { View, Text } from "react-native";
 3 | import { SafeAreaView } from "react-native-safe-area-context";
 4 | import Constants from "expo-constants";
 5 | import { StatusBar } from "expo-status-bar";
 6 | import theme from "../theme";
 7 | 
 8 | interface QuizContainerProps {
 9 |   children: ReactElement;
10 | }
11 | 
12 | export default function QuizContainer({ children }: QuizContainerProps) {
13 |   return (
14 |     <SafeAreaView style={{ flex: 1 }}>
15 |       {children}
16 |       <StatusBar backgroundColor={theme.colors["primary"]} style="light" />
17 |     </SafeAreaView>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Question/data.ts:
--------------------------------------------------------------------------------
1 | export const questions = [
2 |   
3 | ];
4 | 


--------------------------------------------------------------------------------
/src/components/Question/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createStackNavigator } from "@react-navigation/stack";
 3 | import { QuestionRoutes } from "../Navigation";
 4 | 
 5 | import Question from "./Question";
 6 | 
 7 | export const assets = [];
 8 | 
 9 | const QuestionStack = createStackNavigator<QuestionRoutes>();
10 | export const QuestionNavigator = () => (
11 |   <QuestionStack.Navigator headerMode="none" initialRouteName="MainQuestion">
12 |     <QuestionStack.Screen name="MainQuestion" component={Question} />
13 |   </QuestionStack.Navigator>
14 | );
15 | 


--------------------------------------------------------------------------------
/src/components/SvgIcons/Bad.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { moderateScale } from "react-native-size-matters";
 3 | import Svg, { Path, Circle } from "react-native-svg";
 4 | import theme from "../theme";
 5 | 
 6 | export interface IconProps {
 7 |   onPress?: () => void;
 8 |   active?: boolean;
 9 |   activeTransition?: any;
10 | }
11 | 
12 | export default ({ active }: IconProps) => {
13 |   return (
14 |     <Svg
15 |       width={moderateScale(74)}
16 |       height={moderateScale(74)}
17 |       viewBox="0 0 24 24"
18 |     >
19 |       <Circle
20 |         cx={12}
21 |         cy={12}
22 |         r={10}
23 |         stroke={theme.colors["danger"]}
24 |         strokeWidth={1}
25 |       />
26 |       <Path
27 |         d="M16 16s-1.5-2-4-2-4 2-4 2M9 9h.01M15 9h.01"
28 |         fill={theme.colors["danger"]}
29 |         stroke={theme.colors["danger"]}
30 |         strokeWidth={2}
31 |         strokeLinecap="round"
32 |         strokeLinejoin="round"
33 |       />
34 |     </Svg>
35 |   );
36 | };
37 | 


--------------------------------------------------------------------------------
/src/components/SvgIcons/Good.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { moderateScale } from "react-native-size-matters";
 3 | import Svg, { Path, G } from "react-native-svg";
 4 | 
 5 | export interface IconProps {
 6 |   onPress?: () => void;
 7 |   active?: boolean;
 8 |   activeTransition?: any;
 9 | }
10 | 
11 | export default ({ active }: IconProps) => {
12 |   return (
13 |     <Svg
14 |       width={moderateScale(60)}
15 |       height={moderateScale(60)}
16 |       viewBox="0 0 208.371 153.023"
17 |     >
18 |       <G data-name="Group 525">
19 |         <Path
20 |           data-name="Path 941"
21 |           strokeWidth={2}
22 |           d="M205.318 3.052a10.418 10.418 0 00-14.734 0L65.764 127.874 17.785 79.895A10.419 10.419 0 103.051 94.629L58.4 149.974a10.421 10.421 0 0014.734 0L205.318 17.786a10.418 10.418 0 000-14.734z"
23 |           fill="#fff"
24 |           stroke="#fff"
25 |           fillRule="evenodd"
26 |           strokeLinecap="round"
27 |           strokeLinejoin="round"
28 |         />
29 |       </G>
30 |     </Svg>
31 |   );
32 | };
33 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as LoadAssets } from "./LoadAssets";
2 | export { default as theme } from "./theme";
3 | 


--------------------------------------------------------------------------------
/src/components/theme.ts:
--------------------------------------------------------------------------------
 1 | import { createText, createBox } from "@shopify/restyle";
 2 | import { moderateScale } from "react-native-size-matters";
 3 | 
 4 | const theme = {
 5 |   colors: {
 6 |     white: "#fff",
 7 |     primary: "#2133A0",
 8 |     text: "#272829",
 9 |     button: "#7C72FF",
10 |     color: "#0C0D34",
11 |     grey: "#BABD98",
12 |     danger: "#ff0055",
13 |     green: "#0BBF29",
14 |     black: "#000",
15 |   },
16 |   spacing: {
17 |     s: 8,
18 |     m: 16,
19 |     l: 24,
20 |     xl: 40,
21 |   },
22 |   borderRadii: {
23 |     s: 4,
24 |     m: 10,
25 |     l: 25,
26 |     xl: 75,
27 |   },
28 |   textVariants: {
29 |     title: {
30 |       fontSize: moderateScale(35),
31 |       fontFamily: "Gotham-Black",
32 |       color: "white",
33 |     },
34 |     body: {
35 |       fontSize: 16,
36 |       lineHeight: 25,
37 |       fontFamily: "Gotham-Medium",
38 |       color: "text",
39 |     },
40 |     button: {
41 |       fontSize: 15,
42 |       fontFamily: "Gotham-Bold",
43 |       color: "text",
44 |     },
45 |   },
46 |   breakpoints: {},
47 | };
48 | 
49 | export type Theme = typeof theme;
50 | export const Text = createText<Theme>();
51 | export const Box = createBox<Theme>();
52 | export default theme;
53 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "jsx": "react-native",
 5 |     "lib": ["dom", "esnext"],
 6 |     "moduleResolution": "node",
 7 |     "noEmit": true,
 8 |     "skipLibCheck": true,
 9 |     "resolveJsonModule": true,
10 |     "strict": true,
11 |   }
12 | }
13 | 


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