Se creó un formulario donde se pueden seleccionar y deseleccionar opciones

import { useState } from "react";

import { ScrollView, Text, TouchableOpacity, StyleSheet, View } from "react-native";

import { LIGHT_THEME } from "../../common/constants/theme";

import { IOption } from "../../common/domain/entities/option";

interface MultipleOptionPickerProps {

    options: IOption[];

    toogleOption: (optionId: number) => void;

}

export const MultipleOptionPicker = ({ options, toogleOption }: MultipleOptionPickerProps) => {

    return (

        <View style={styles.container}>

            {options.map(option => (

                <TouchableOpacity

                    key={option.id}

                    onPress={() => toogleOption(option.id)}

                    style={{...styles.optionBtn, backgroundColor: option.isSelected ? LIGHT_THEME.color.primary : LIGHT_THEME.color.terciary}}

                >

                    <Text style={{...styles.optionText, color: option.isSelected ? LIGHT_THEME.color.white : LIGHT_THEME.color.secondary }}>{option.name}</Text>

                </TouchableOpacity>

            ))}

        </View>

    );

}

const styles = StyleSheet.create({

    container : {

        padding: 20,

        flexWrap: "wrap",

        flexDirection: "row",

        gap: 10,

        width: "100%",

    },

    optionBtn: {

        paddingVertical: 10,

        paddingHorizontal: 20,

        height: 40,

        borderRadius: 20,

    },

    optionText: {

        fontSize: 16,

    },

});