app/(quiz)/quiz.tsx

@@ -1,5 +1,7 @@
 import BackButton from "@/components/BackButton";
 import { toBgColor, toTextColor } from "@/components/Constants";
+import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
+import GoalQuestion from "@/components/quiz/GoalQuestion";
 import HeightQuestion from "@/components/quiz/HeightQuestion";
 import { QuestionChildProps } from "@/components/quiz/Question";
 import WeightQuestion from "@/components/quiz/WeightQuestion";
@@ -13,7 +15,7 @@ export default function Quiz() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
   const questions: ForwardRefExoticComponent<
     QuestionChildProps & RefAttributes<any>
-  >[] = [WeightQuestion, HeightQuestion];
+  >[] = [GoalQuestion, WeightQuestion, HeightQuestion, BeginnerQuestion];
 
   const goBack = () => {
     if (currentQuestionIndex >= 1) {

components/quiz/BeginnerQuestion.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Question, { QuestionChildProps } from "./Question";
+import SegmentedControl from "../ui/SegmentedControl";
+import { Image } from "react-native";
+
+//@ts-ignore
+import BenchImage from "@/assets/images/bench.png";
+
+export default React.forwardRef<any, QuestionChildProps>(
+  (props, ref): React.ReactElement => {
+    const ANSWERS = ["Non", "Oui"];
+    const [answer, setAnswer] = React.useState("Oui");
+
+    return (
+      <Question
+        question="Êtes-vous un novice de la musculation ?"
+        {...ref}
+        {...props}
+      >
+        <Image className="self-center" source={BenchImage} alt="" />
+        <SegmentedControl
+          values={ANSWERS}
+          selectedIndex={ANSWERS.indexOf(answer)}
+          onValueChange={setAnswer}
+        />
+      </Question>
+    );
+  }
+);

components/quiz/HeightQuestion.tsx

@@ -3,7 +3,7 @@ import Question, { QuestionChildProps } from "./Question";
 import Slider from "../ui/Slider";
 import Text from "../ui/Text";
 import { View } from "react-native";
-import SegmentedControl from "@react-native-segmented-control/segmented-control";
+import SegmentedControl from "../ui/SegmentedControl";
 
 export default React.forwardRef<any, QuestionChildProps>(
   (props, ref): React.ReactElement => {

components/quiz/WeightQuestion.tsx

@@ -3,7 +3,7 @@ import Question, { QuestionChildProps } from "./Question";
 import Slider from "../ui/Slider";
 import Text from "../ui/Text";
 import { View } from "react-native";
-import SegmentedControl from "@react-native-segmented-control/segmented-control";
+import SegmentedControl from "../ui/SegmentedControl";
 
 export default React.forwardRef<any, QuestionChildProps>(
   (props, ref): React.ReactElement => {
@@ -19,7 +19,7 @@ export default React.forwardRef<any, QuestionChildProps>(
           selectedIndex={UNITS.indexOf(unit)}
           onValueChange={setUnit}
         />
-        <View className="flex-row justify-center">
+        <View className="flex-row justify-center gap-2">
           {weight <= MIN_WEIGHT ? (
             <Text className="mt-8" size="4xl">
               - de

components/ui/Button.tsx

@@ -67,6 +67,18 @@ export default React.forwardRef<any, Props>(
           return 30;
         case "3xl":
           return 36;
+        case "4xl":
+          return 36;
+        case "5xl":
+          return 42;
+        case "6xl":
+          return 48;
+        case "7xl":
+          return 54;
+        case "8xl":
+          return 60;
+        case "9xl":
+          return 66;
       }
     };
 

components/ui/SegmentedControl.tsx

@@ -7,8 +7,13 @@ export default React.forwardRef<any, SegmentedControlProps>(
   (props, ref): React.ReactElement => {
     return (
       <SegmentedControl
-        tintColor="#3B82F6"
-        backgroundColor="#3B82F6"
+        fontStyle={{
+          fontSize: 16,
+          fontWeight: "bold",
+          color: "black",
+        }}
+        tintColor="#60A5FA"
+        backgroundColor="#D1D5DB"
         {...ref}
         {...props}
       />