fix: scroll is working on main page and rename some file

app/application/habits/index.tsx

@@ -1,7 +1,7 @@
 import { SafeAreaView } from "react-native-safe-area-context"
 import { ActivityIndicator, Button, Text } from "react-native-paper"
 
-import { HabitsHistory } from "@/presentation/react/components/HabitsHistory/HabitsHistory"
+import { HabitsMainPage } from "@/presentation/react/components/HabitsHistory/HabitsMainPage"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
 import { useAuthentication } from "@/presentation/react/contexts/Authentication"
 
@@ -61,7 +61,7 @@ const HabitsPage: React.FC = () => {
           </Button>
         </>
       ) : (
-        <HabitsHistory habitsTracker={habitsTracker} />
+        <HabitsMainPage habitsTracker={habitsTracker} />
       )}
     </SafeAreaView>
   )

presentation/react/components/HabitsHistory/HabitCard.tsx

@@ -5,11 +5,11 @@ import { List } from "react-native-paper"
 import type { HabitHistory as HabitHistoryType } from "@/domain/entities/HabitHistory"
 import { getColorRGBAFromHex } from "@/presentation/presenters/utils/colors"
 
-export interface HabitHistoryProps {
+export interface HabitCardProps {
   habitHistory: HabitHistoryType
 }
 
-export const HabitHistory: React.FC<HabitHistoryProps> = (props) => {
+export const HabitCard: React.FC<HabitCardProps> = (props) => {
   const { habitHistory } = props
   const { habit } = habitHistory
 

presentation/react/components/HabitsHistory/HabitsMainPage.tsx

@@ -1,19 +1,19 @@
 import { useRouter } from "expo-router"
 import { useMemo, useState } from "react"
-import { FlatList, View } from "react-native"
+import { View, ScrollView, Dimensions } from "react-native"
 import { Button, List, Text } from "react-native-paper"
 
 import type { GoalFrequency } from "@/domain/entities/Goal"
 import { GOAL_FREQUENCIES } from "@/domain/entities/Goal"
 import type { HabitsTracker } from "@/domain/entities/HabitsTracker"
 import { capitalize } from "@/presentation/presenters/utils/strings"
-import { HabitHistory } from "./HabitHistory"
+import { HabitCard } from "./HabitCard"
 
-export interface HabitsHistoryProps {
+export interface HabitsMainPageProps {
   habitsTracker: HabitsTracker
 }
 
-export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
+export const HabitsMainPage: React.FC<HabitsMainPageProps> = (props) => {
   const { habitsTracker } = props
 
   const router = useRouter()
@@ -68,13 +68,14 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
   }
 
   return (
-    <List.Section
+    <ScrollView
-      style={[
+      showsVerticalScrollIndicator={false}
-        {
+      style={{
-          width: "92%",
+        paddingHorizontal: 20,
-        },
+        width: Dimensions.get("window").width,
-      ]}
+      }}
     >
+      <List.Section>
         {habitsByFrequency.map((frequency) => {
           return (
             <List.Accordion
@@ -95,15 +96,13 @@ export const HabitsHistory: React.FC<HabitsHistoryProps> = (props) => {
                 },
               ]}
             >
-            <FlatList
+              {habitsTracker.habitsHistory[frequency].map((item) => {
-              data={habitsTracker.habitsHistory[frequency]}
+                return <HabitCard habitHistory={item} key={item.habit.id} />
-              renderItem={({ item }) => {
+              })}
-                return <HabitHistory habitHistory={item} />
-              }}
-            />
             </List.Accordion>
           )
         })}
       </List.Section>
+    </ScrollView>
   )
 }