app/(quiz)/quiz.tsx

@@ -1,27 +1,18 @@
 import BackButton from "@/components/BackButton";
 import { toBgColor, toTextColor } from "@/components/Constants";
-import WeightQuestion, {
+import { WeightQuestionRef } from "@/components/quiz/WeightQuestion";
-  WeightQuestionRef,
-} from "@/components/quiz/WeightQuestion";
 import React, { useRef, useState } from "react";
 import { View } from "react-native";
+import Button from "@/components/ui/Button";
 import Screen from "@/components/ui/Screen";
 import Text from "@/components/ui/Text";
-import Button from "@/components/ui/Button";
+import { FrequencyQuestionRef } from "@/components/quiz/FrequencyQuestion";
-import HeightQuestion, {
+import { GoalQuestionRef } from "@/components/quiz/GoalQuestion";
-  HeightQuestionRef,
+import { GenderQuestionRef } from "@/components/quiz/GenderQuestion";
-} from "@/components/quiz/HeightQuestion";
+import { HeightQuestionRef } from "@/components/quiz/HeightQuestion";
-import AgeQuestion, { AgeQuestionRef } from "@/components/quiz/AgeQuestion";
+import { AgeQuestionRef } from "@/components/quiz/AgeQuestion";
-import BeginnerQuestion, {
+import { BeginnerQuestionRef } from "@/components/quiz/BeginnerQuestion";
-  BeginnerQuestionRef,
+import IllnessQuestion from "@/components/quiz/IllnessQuestion";
-} from "@/components/quiz/BeginnerQuestion";
-import FrequencyQuestion, {
-  FrequencyQuestionRef,
-} from "@/components/quiz/FrequencyQuestion";
-import GenderQuestion, {
-  GenderQuestionRef,
-} from "@/components/quiz/GenderQuestion";
-import GoalQuestion, { GoalQuestionRef } from "@/components/quiz/GoalQuestion";
 
 export default function Quiz() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -39,19 +30,20 @@ export default function Quiz() {
   }
 
   const questions: Question[] = [
-    { component: GoalQuestion, props: { ref: goalRef } },
+    { component: IllnessQuestion, props: {} },
-    { component: GenderQuestion, props: { ref: genderRef } },
+    // { component: GoalQuestion, props: { ref: goalRef } },
-    {
+    // { component: GenderQuestion, props: { ref: genderRef } },
-      component: WeightQuestion,
+    // {
-      props: { ref: weightRef },
+    //   component: WeightQuestion,
-    },
+    //   props: { ref: weightRef },
-    { component: HeightQuestion, props: { ref: heightRef } },
+    // },
-    { component: AgeQuestion, props: { ref: ageRef } },
+    // { component: HeightQuestion, props: { ref: heightRef } },
-    { component: BeginnerQuestion, props: { ref: beginnerRef } },
+    // { component: AgeQuestion, props: { ref: ageRef } },
-    {
+    // { component: BeginnerQuestion, props: { ref: beginnerRef } },
-      component: FrequencyQuestion,
+    // {
-      props: { ref: frequencyRef, isMale: genderRef.current?.getAnswer() },
+    //   component: FrequencyQuestion,
-    },
+    //   props: { ref: frequencyRef, isMale: genderRef.current?.getAnswer() },
+    // },
   ];
 
   const goNext = () => {
@@ -75,10 +67,14 @@ export default function Quiz() {
   return (
     <Screen>
       <View className="gap-4 justify-between h-full">
-        <View className="flex-row justify-between items-center">
+        <View className="flex-row justify-between items-center gap-4">
           <BackButton
+            className="mt-2"
             onPress={() => setCurrentQuestionIndex((i) => Math.max(i - 1, 0))}
           />
+          <Text size="2xl" weight="bold">
+            Questionnaire
+          </Text>
           <View className={"px-4 py-2 rounded-2xl" + " " + toBgColor("blue")}>
             <Text className={toTextColor("blue")} weight="bold">
               {currentQuestionIndex + 1} sur {questions.length}

components/BackButton.tsx

@@ -1,26 +1,26 @@
 import { router } from "expo-router";
 import Button from "./ui/Button";
-import { TouchableOpacityProps } from "react-native";
+import { ButtonProps } from "./ui/Button";
 import { AntDesign } from "@expo/vector-icons";
 import React from "react";
 import { AntDesignIconNames } from "./Icons";
 
-interface Props extends TouchableOpacityProps {
+interface Props extends ButtonProps {
   icon?: AntDesignIconNames;
 }
 
 export default React.forwardRef<any, Props>(
-  (props, ref): React.ReactElement => {
+  ({ icon, onPress, className, ...props }, ref): React.ReactElement => {
-    const { icon, onPress } = props;
     const defaultOnPress = () => {
       router.back();
     };
 
     return (
       <Button
-        className="h-16 w-16 mb-4"
+        className={"h-16 w-16 mb-4" + " " + className}
         onPress={onPress ?? defaultOnPress}
         {...ref}
+        {...props}
       >
         <AntDesign name={icon ?? "arrowleft"} size={24} />
       </Button>

components/quiz/IllnessQuestion.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import Question, { QuestionChildProps } from "./Question";
+import { Image, View, Text } from "react-native";
+import { MultiSelect } from "react-native-element-dropdown";
+
+//@ts-ignore
+import WheelChair from "@/assets/images/wheelchair.png";
+import { EHealthProblem } from "@/model/enums/Enums";
+
+export default React.forwardRef<any, QuestionChildProps>(
+  ({ ...props }, ref) => {
+    const [selected, setSelected] = useState<string[]>([]);
+
+    type DataItem = {
+      label: string;
+      value: EHealthProblem;
+    };
+
+    const data: DataItem[] = [
+      { label: "Arthrose", value: "ARTHROSE" },
+      { label: "Migraine", value: "MIGRAINE" },
+    ];
+
+    const renderItem = (item: { label: string }) => {
+      return (
+        <View className="p-4">
+          <Text>{item.label}</Text>
+        </View>
+      );
+    };
+
+    return (
+      <Question
+        question="Avez-vous des problèmes physiques ?"
+        {...props}
+        {...ref}
+      >
+        <Image className="self-center" source={WheelChair} alt="" />
+        <View className="border-2 border-orange-500 rounded-3xl p-4">
+          <MultiSelect
+            data={data}
+            labelField="label"
+            valueField="value"
+            placeholder="Selectionnez un problème physique "
+            searchPlaceholder="Search..."
+            value={selected}
+            onChange={setSelected}
+            renderItem={renderItem}
+          />
+        </View>
+      </Question>
+    );
+  }
+);

components/ui/Button.tsx

@@ -8,7 +8,7 @@ import { Size } from "../Constants";
 export type ButtonStyle = "default" | "outline" | "secondary";
 
 //@ts-ignore
-interface Props extends TouchableOpacityProps {
+export interface ButtonProps extends TouchableOpacityProps {
   size?: Size;
   style?: ButtonStyle;
   insideClassName?: string;
@@ -16,7 +16,7 @@ interface Props extends TouchableOpacityProps {
   afterIcon?: AntDesignIconNames;
 }
 
-export default React.forwardRef<any, Props>(
+export default React.forwardRef<any, ButtonProps>(
   (
     {
       size,

package-lock.json

@@ -37,6 +37,7 @@
         "react-dom": "18.3.1",
         "react-hook-form": "^7.54.2",
         "react-native": "0.76.6",
+        "react-native-element-dropdown": "^2.12.4",
         "react-native-gesture-handler": "^2.20.2",
         "react-native-gifted-charts": "^1.4.54",
         "react-native-reanimated": "^3.16.7",
@@ -12247,6 +12248,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-element-dropdown": {
+      "version": "2.12.4",
+      "resolved": "https://registry.npmjs.org/react-native-element-dropdown/-/react-native-element-dropdown-2.12.4.tgz",
+      "integrity": "sha512-abZc5SVji9FIt7fjojRYrbuvp03CoeZJrgvezQoDoSOrpiTqkX69ix5m+j06W2AVncA0VWvbT+vCMam8SoVadw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.22.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.22.0.tgz",

package.json

@@ -44,6 +44,7 @@
     "react-dom": "18.3.1",
     "react-hook-form": "^7.54.2",
     "react-native": "0.76.6",
+    "react-native-element-dropdown": "^2.12.4",
     "react-native-gesture-handler": "^2.20.2",
     "react-native-gifted-charts": "^1.4.54",
     "react-native-reanimated": "^3.16.7",