Commit 9d9b93a2 authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Se agregó el background animado a las paginas con caroussel

parent 00f2d610

mobile/src/screens/state_selection/state_selection_page.tsx

+32 −21
Original line number Diff line number Diff line 
import { View, Text, ActivityIndicator } from "react-native";

import { pageStyles } from '../page_styles';

import { View, ActivityIndicator } from "react-native";

import { pageStyles } from "../page_styles";

import { useGetStates } from "../../hooks/useGetStates";

import { ApiRequestStatus } from "../../constants/api_request_states";

import { Caroussel } from "../../components/caroussel/caroussel";

import { useCallback } from "react";

import { router, useNavigation } from "expo-router";

import { router } from "expo-router";

import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";

import { AnimatedBackground } from "../../components/animated_background/animated_background";



export const StateSelectionPage = () => {

  const { data, requestStatus } = useGetStates();

  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =

    useAnimatedSelectedIndex(200, 200);



  if (requestStatus === ApiRequestStatus.LOADING) {

    return (
@@ -23,7 +26,15 @@ export const StateSelectionPage = () => { 


  return (

    <View style={pageStyles.page_container}>

            <Caroussel data={data} onPress={handleOnPress}/>   

      <AnimatedBackground

        imageUri={data[selectedStateIndex].imageUri}

        backgroundImageAnimation={backgroundImageAnimation}

      />

      <Caroussel

        data={data}

        onPress={handleOnPress}

        onIndexChange={onIndexChange}

      />

    </View>

  );

}
 
 No newline at end of file
 
};

mobile/src/screens/town_selection/town_selection_page.tsx

+68 −20
Original line number Diff line number Diff line 
import { View, Text, ActivityIndicator } from "react-native";

import { pageStyles } from '../page_styles';

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

import { pageStyles } from "../page_styles";

import { useGetStates } from "../../hooks/useGetStates";

import { ApiRequestStatus } from "../../constants/api_request_states";

import { Caroussel } from "../../components/caroussel/caroussel";

import { useGetTowns } from "../../hooks/useGetTowns";

import { router } from "expo-router";

import { useCallback, useState } from "react";

import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";

import { AnimatedBackground } from "../../components/animated_background/animated_background";

import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";



interface TownSelectionPageProps {

  stateId: number;

};

}



const snapPoints = ["15%", "50%"];



export const TownSelectionPage = ({ stateId }: TownSelectionPageProps) => {

  const { data, requestStatus } = useGetTowns(stateId);

  const { selectedStateIndex, onIndexChange, backgroundImageAnimation } =

    useAnimatedSelectedIndex(200, 200);



  if (requestStatus === ApiRequestStatus.LOADING) {

    return (

      <View style={pageStyles.page_container}>
@@ -20,13 +29,52 @@ export const TownSelectionPage = ({ stateId }: TownSelectionPageProps) => { 
    );

  }



  if (data.length === 0) {

    return (

      <View style={pageStyles.page_container}>

        <Text>No towns found</Text>

      </View>

    );

  }



  const handleTownSelection = (townId: number) => {

    router.push(`/state/${stateId}/town?townId=${townId}`);

    }

  };



  return (

    <View style={pageStyles.page_container}>

            <Caroussel data={data} onPress={handleTownSelection} />   

      <AnimatedBackground

        imageUri={data[selectedStateIndex].imageUri}

        backgroundImageAnimation={backgroundImageAnimation}

      />

      <Caroussel

        data={data}

        onPress={handleTownSelection}

        onIndexChange={onIndexChange}

      />

      {data[selectedStateIndex].description && (

        <BottomSheet snapPoints={snapPoints}>

          <BottomSheetView style={styles.container}>

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

            <Text>{data[selectedStateIndex].description}</Text>

          </BottomSheetView>

        </BottomSheet>

      )}

    </View>

  );

}
 
 No newline at end of file
 
};



const styles = StyleSheet.create({

  container: {

    flex: 1,

    paddingHorizontal: 20,

    gap: 20,

  },

  description_text: {

    fontSize: 20,

    fontWeight: "bold",

  },

  description_content_text: {

    fontSize: 16,

  },

});