cally/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx

import React, { useEffect } from "react";
import { View, Text } from "react-native-ui-lib";
import * as ScreenOrientation from "expo-screen-orientation";
import TabletContainer from "../tablet_components/TabletContainer";
import ToDosPage from "../../todos/ToDosPage";
import ToDosList from "../../todos/ToDosList";
import SingleUserChoreList from "./SingleUserChoreList";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ImageBackground, StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
import { ScrollView } from "react-native-gesture-handler";

const TabletChoresPage = () => {
  const { data: users } = useGetFamilyMembers();
  // Function to lock the screen orientation to landscape
  const lockScreenOrientation = async () => {
    await ScreenOrientation.lockAsync(
      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
    );
  };

  useEffect(() => {
    lockScreenOrientation(); // Lock orientation when the component mounts

    return () => {
      // Optional: Unlock to default when the component unmounts
      ScreenOrientation.unlockAsync();
    };
  }, []);

  return (
    <TabletContainer>
      <ScrollView horizontal>
        <View row gap-25 padding-25>
          {users?.map((user, index) => (
            <View>
              <View row centerV>
                {user.pfp ? (
                  <ImageBackground
                    source={{ uri: user.pfp }}
                    style={[
                      styles.pfp,
                      (user.eventColor && {
                        borderWidth: 2,
                        borderColor: user.eventColor,
                      }) ||
                        undefined,
                    ]}
                    borderRadius={13.33}
                  />
                ) : (
                  <View
                    center
                    style={styles.pfp}
                    backgroundColor={user.eventColor || "#00a8b6"}
                  >
                    <Text color="white">
                      {user.firstName.at(0)}
                      {user.lastName.at(0)}
                    </Text>
                  </View>
                )}
                <Text style={styles.name} marginL-15>
                  {user.firstName}
                </Text>
                <Text style={[styles.name, { color: "#9b9b9b" }]} marginL-5>
                  ({user.userType})
                </Text>
              </View>
              <SingleUserChoreList user={user} />
            </View>
          ))}
        </View>
      </ScrollView>
    </TabletContainer>
  );
};

const styles = StyleSheet.create({
  pfp: {
    width: 46.74,
    aspectRatio: 1,
    borderRadius: 13.33,
  },
  name: {
    fontFamily: "Manrope_600SemiBold",
    fontSize: 22.43,
    color: "#2c2c2c",
  },
});

export default TabletChoresPage;