Mobile/components/quiz/ActivityQuestion.tsx

import React from "react";
import Question, { QuestionChildProps } from "./Question";
import Checkbox from "../CheckboxComponent";
import { View } from "react-native";

export default React.forwardRef<any, QuestionChildProps>(
  (props, ref): React.ReactElement => {
    const { ...props } = props;

    const [checkedOne, setCheckedOne] = React.useState(true);
    const [checkedTwo, setCheckedTwo] = React.useState(false);
    const [checkedThree, setCheckedThree] = React.useState(false);
    const [checkedFour, setCheckedFour] = React.useState(false);
    const [checkedFive, setCheckedFive] = React.useState(false);
    const handleChangeOne = () => {
      if (!checkedOne) {
        setCheckedOne(!checkedOne);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
      }
    };
    const handleChangeTwo = () => {
      if (!checkedTwo) {
        setCheckedOne(false);
        setCheckedTwo(!checkedTwo);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
      }
    };
    const handleChangeThree = () => {
      if (!checkedThree) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(!checkedThree);
        setCheckedFour(false);
        setCheckedFive(false);
      }
    };
    const handleChangeFour = () => {
      if (!checkedFour) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(!checkedFour);
        setCheckedFive(false);
      }
    };
    const handleChangeFive = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(!checkedFive);
      }
    };

    return (
      <Question
        question="Comment estimez-vous votre niveau d'activité ?"
        {...ref}
        {...props}
      >
        <View>
          <Checkbox
            label="Athlète"
            value={checkedOne}
            onChange={handleChangeOne}
            icon={"smile-circle"}
          />
          <Checkbox
            label="Très sportif"
            value={checkedTwo}
            onChange={handleChangeTwo}
            icon={"smileo"}
          />
          <Checkbox
            label="Un peu sportif"
            value={checkedThree}
            onChange={handleChangeThree}
            icon={"meh"}
          />
          <Checkbox
            label="Peu sportif"
            value={checkedFour}
            onChange={handleChangeFour}
            icon={"frowno"}
          />
          <Checkbox
            label="Pas du tout sportif"
            value={checkedFive}
            onChange={handleChangeFive}
            icon={"frown"}
          />
        </View>
      </Question>
    );
  }
);