Se creó una modal para información

import { useRef, useState } from "react";

import BottomSheet, {

    BottomSheetFlatList,

  BottomSheetScrollView,

  BottomSheetView,

} from "@gorhom/bottom-sheet";

import {

  Text,

  StyleSheet,

  ScrollView,

  View,

  TouchableOpacity,

} from "react-native";

import { ActivityInfoEntity } from "../../domain/entities/activity_info_entity";

import { LIGTHT_THEME } from "../../constants/theme";

import { router } from "expo-router";

interface ActivityBottomSheetProps {

  startSnapPoint: number;

  snapPoints: string[];

  onSnapPointChange?: (index: number) => void;

  activity: ActivityInfoEntity;

}

export const ActivityBottomSheet = ({

  activity,

  startSnapPoint,

  snapPoints,

  onSnapPointChange,

}: ActivityBottomSheetProps) => {

  const sheetRef = useRef<BottomSheet>(null);

  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);

  return (

    <BottomSheet

      ref={sheetRef}

      index={startSnapPoint}

      onChange={onSnapPointChange}

      snapPoints={snapPoints}

    >

      <BottomSheetScrollView style={{ height: "100%", padding: 10 }} scrollToOverflowEnabled nestedScrollEnabled>

        <View style={styles.activity_name_container}>

        <Text style={styles.name_text}>{activity.name}</Text>

        <TouchableOpacity onPress={

          () => {

            router.push('/scan')

          }}

          style={styles.do_activity_button}>

          <Text style={styles.do_activity_text}>Do Activity</Text>

        </TouchableOpacity>

        </View>

        {

            activity.tags && (

                <BottomSheetFlatList

                style={{marginTop: 20, paddingVertical: 10}}

                    horizontal

                    data={[...activity.tags, "tag1", "tag2", "tag3", "tag4", "tag5"]}

                    showsHorizontalScrollIndicator={false}

                    keyExtractor={(item) => item}

                    ItemSeparatorComponent={() => <View style={{width: 10}} />}

                    renderItem={({ item }) => (

                        <View style={{height: 40, borderRadius: 15, backgroundColor: 'violet', paddingHorizontal: 10, justifyContent: 'center'}}>

                            <Text>{item}</Text>

                        </View>

                    )}

                />

            )

        }

        <View style={styles.description_container}>

          <Text style={styles.description_text}>Description</Text>

          <Text numberOfLines={!isDescriptionExpanded ? 5 : undefined}>

            {activity.description}

          </Text>

          <TouchableOpacity

            onPress={() => setIsDescriptionExpanded(!isDescriptionExpanded)}

          >

            <Text style={styles.show_more_text}>

              {isDescriptionExpanded ? "Show less" : "Show more..."}

            </Text>

          </TouchableOpacity>

        </View>

      </BottomSheetScrollView>

    </BottomSheet>

  );

};

const styles = StyleSheet.create({

  activity_info_container: {

    borderTopLeftRadius: 20,

    borderTopRightRadius: 20,

    borderWidth: 5,

    padding: 20,

  },

  activity_name_container: {

    flexDirection: 'row',

    justifyContent: 'space-between'

  },

  name_text: {

    fontSize: 24,

    fontWeight: "bold",

  },

  do_activity_button: {

    height: 40,

    elevation: 5,

    backgroundColor: LIGTHT_THEME.color.primary,

    padding: 10,

    borderRadius: 20,

    justifyContent : 'center',

    alignItems: 'center',

    paddingHorizontal: 20

  },

  do_activity_text: {

    color: LIGTHT_THEME.color.white,

    fontWeight: "bold",

  },

  description_container: {

    marginTop: 20,

    gap: 5,

  },

  description_text: {

    fontSize: 18,

    fontWeight: "bold",

  },

  show_more_text: {

    fontWeight: "600",

  },

});