Update FE for Home and Catsitter screen

.vscode/settings.json

 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }

assets/data/demo.ts

+import { DataT } from "../../types";
+import IMAGE_01 from "../images/01.jpg";
+import IMAGE_02 from "../images/02.jpg";
+import IMAGE_03 from "../images/03.jpg";
+import IMAGE_04 from "../images/04.jpg";
+import IMAGE_05 from "../images/05.jpg";
+import IMAGE_06 from "../images/06.jpg";
+import IMAGE_07 from "../images/07.jpg";
+import IMAGE_08 from "../images/08.jpg";
+import IMAGE_09 from "../images/09.jpg";
+import IMAGE_10 from "../images/10.jpg";
+
+const data: DataT[] = [
+  {
+    id: 1,
+    name: "Leanne Graham",
+    isOnline: true,
+    match: "78",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    message:
+      "I will go back to Gotham and I will fight men Iike this but I will not become an executioner.",
+    image: IMAGE_01,
+  },
+  {
+    id: 2,
+    name: "Clementine Bauch",
+    match: "93",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: false,
+    message: "Someone like you. Someone who'll rattle the cages.",
+    image: IMAGE_02,
+  },
+  {
+    id: 3,
+    name: "Ervin Howell",
+    match: "45",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: false,
+    message:
+      "Oh, hee-hee, aha. Ha, ooh, hee, ha-ha, ha-ha. And I thought my jokes were bad.",
+    image: IMAGE_03,
+  },
+  {
+    id: 4,
+    name: "John Lebsack",
+    match: "88",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: true,
+    message: "Bats frighten me. It's time my enemies shared my dread.",
+    image: IMAGE_04,
+  },
+  {
+    id: 5,
+    name: "James Dietrich",
+    match: "76",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: false,
+    message: "It's not who I am underneath but what I do that defines me.",
+    image: IMAGE_05,
+  },
+  {
+    id: 6,
+    name: "Patricia Schulist",
+    match: "95",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: true,
+    message:
+      "You have nothing, nothing to threaten me with. Nothing to do with all your strength.",
+    image: IMAGE_06,
+  },
+  {
+    id: 7,
+    name: "Chelsey Weissnat",
+    match: "67",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: true,
+    message:
+      "Never start with the head. The victim gets all fuzzy. He can't feel the next... See?",
+    image: IMAGE_07,
+  },
+  {
+    id: 8,
+    name: "Nicky Runol",
+    match: "85",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    age: "27",
+    location: "Irvine, CA",
+    info1: 'Straight, Single, 5"10',
+    info2: "Tea Totaller, Loves Photography & Travel",
+    info3: "Beaches, Mountain, Cafe, Movies",
+    info4: "Last seen: 23h ago",
+    isOnline: true,
+    message:
+      "And as for the television's so-called plan, Batman has no jurisdiction.",
+    image: IMAGE_08,
+  },
+  {
+    id: 9,
+    name: "Glenna Reichert",
+    match: "74",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: true,
+    message:
+      "This is what happens when an unstoppable force meets an immovable object.",
+    image: IMAGE_09,
+  },
+  {
+    id: 10,
+    name: "Kurtis DuBuque",
+    match: "98",
+    description:
+      "Full-time Traveller. Globe Trotter. Occasional Photographer. Part time Singer/Dancer.",
+    isOnline: false,
+    message:
+      "You want order in Gotham. Batman must take off his mask and turn himself in.",
+    image: IMAGE_10,
+  },
+];
+
+export default data;

assets/styles/index.ts

+import { StyleSheet, Dimensions } from "react-native";
+
+export const PRIMARY_COLOR = "#7444C0";
+export const SECONDARY_COLOR = "#5636B8";
+export const WHITE = "#FFFFFF";
+export const GRAY = "#757E90";
+export const DARK_GRAY = "#363636";
+export const BLACK = "#000000";
+
+export const ONLINE_STATUS = "#46A575";
+export const OFFLINE_STATUS = "#D04949";
+
+export const STAR_ACTIONS = "#FFA200";
+export const LIKE_ACTIONS = "#B644B2";
+export const DISLIKE_ACTIONS = "#363636";
+export const FLASH_ACTIONS = "#5028D7";
+
+export const DIMENSION_WIDTH = Dimensions.get("window").width;
+export const DIMENSION_HEIGHT = Dimensions.get("window").height;
+
+export default StyleSheet.create({
+  // COMPONENT - CARD ITEM
+  containerCardItem: {
+    backgroundColor: WHITE,
+    borderRadius: 8,
+    alignItems: "center",
+    margin: 10,
+    elevation: 1,
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    shadowColor: BLACK,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  matchesCardItem: {
+    marginTop: -35,
+    backgroundColor: PRIMARY_COLOR,
+    paddingVertical: 7,
+    paddingHorizontal: 20,
+    borderRadius: 20,
+  },
+  matchesTextCardItem: {
+    color: WHITE,
+  },
+  descriptionCardItem: {
+    color: GRAY,
+    textAlign: "center",
+  },
+  status: {
+    paddingBottom: 10,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  statusText: {
+    color: GRAY,
+    fontSize: 12,
+  },
+  online: {
+    width: 6,
+    height: 6,
+    backgroundColor: ONLINE_STATUS,
+    borderRadius: 3,
+    marginRight: 4,
+  },
+  offline: {
+    width: 6,
+    height: 6,
+    backgroundColor: OFFLINE_STATUS,
+    borderRadius: 3,
+    marginRight: 4,
+  },
+  actionsCardItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 30,
+  },
+  button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: WHITE,
+    marginHorizontal: 7,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 1,
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    shadowColor: DARK_GRAY,
+    shadowOffset: { height: 10, width: 0 },
+  },
+  miniButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 30,
+    backgroundColor: WHITE,
+    marginHorizontal: 7,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 1,
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    shadowColor: DARK_GRAY,
+    shadowOffset: { height: 10, width: 0 },
+  },
+
+  // COMPONENT - CITY
+  city: {
+    backgroundColor: WHITE,
+    padding: 10,
+    borderRadius: 20,
+    width: 100,
+    elevation: 1,
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    shadowColor: BLACK,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  quickCenter: {
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+  },
+
+  cityText: {
+    color: DARK_GRAY,
+    fontSize: 13,
+    textAlign: "center",
+  },
+
+  currentCity: {
+    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: 10,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: PRIMARY_COLOR,
+    paddingHorizontal: 20,
+  },
+
+  // COMPONENT - FILTERS
+  filters: {
+    backgroundColor: WHITE,
+    padding: 10,
+    borderRadius: 20,
+    width: 90,
+    elevation: 1,
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    shadowColor: BLACK,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  filtersText: {
+    color: DARK_GRAY,
+    fontSize: 13,
+    textAlign: "center",
+  },
+
+  // COMPONENT - MESSAGE
+  containerMessage: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexDirection: "row",
+    paddingHorizontal: 10,
+    width: DIMENSION_WIDTH - 100,
+  },
+  avatar: {
+    borderRadius: 30,
+    width: 60,
+    height: 60,
+    marginRight: 20,
+    marginVertical: 15,
+  },
+  message: {
+    color: GRAY,
+    fontSize: 12,
+    paddingTop: 5,
+  },
+
+  chatButton: {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    backgroundColor: PRIMARY_COLOR,
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: PRIMARY_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.9,
+    shadowRadius: 8,
+    marginRight: 20,
+    marginBottom: 50,
+    zIndex: 1000
+  },
+
+  // COMPONENT - PROFILE ITEM
+  containerProfileItem: {
+    backgroundColor: WHITE,
+    paddingHorizontal: 10,
+    paddingBottom: 25,
+    margin: 20,
+    borderRadius: 8,
+    marginTop: -65,
+    elevation: 1,
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    shadowColor: BLACK,
+    shadowOffset: { height: 0, width: 0 },
+  },
+  matchesProfileItem: {
+    width: 135,
+    marginTop: -15,
+    backgroundColor: PRIMARY_COLOR,
+    paddingVertical: 7,
+    paddingHorizontal: 20,
+    borderRadius: 20,
+    alignSelf: "center",
+  },
+  matchesTextProfileItem: {
+    color: WHITE,
+    textAlign: "center",
+  },
+  name: {
+    paddingTop: 25,
+    paddingBottom: 5,
+    color: DARK_GRAY,
+    fontSize: 15,
+    textAlign: "center",
+  },
+  descriptionProfileItem: {
+    color: GRAY,
+    textAlign: "center",
+    paddingBottom: 20,
+    fontSize: 13,
+  },
+  info: {
+    paddingVertical: 8,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconProfile: {
+    fontSize: 12,
+    color: DARK_GRAY,
+    paddingHorizontal: 10,
+  },
+  infoContent: {
+    color: GRAY,
+    fontSize: 13,
+  },
+
+  // CONTAINER - GENERAL
+  bg: {
+    flex: 1,
+    resizeMode: "cover",
+    width: DIMENSION_WIDTH,
+    height: DIMENSION_HEIGHT,
+  },
+  top: {
+    paddingTop: 50,
+    marginHorizontal: 10,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  title: { paddingBottom: 10, fontSize: 22, color: DARK_GRAY },
+
+  // CONTAINER - HOME
+  containerHome: {
+    marginHorizontal: 10,
+  },
+
+  // CONTAINER - MATCHES
+  containerMatches: {
+    justifyContent: "space-between",
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+
+  // CONTAINER - MESSAGES
+  containerMessages: {
+    justifyContent: "space-between",
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+
+  // CONTAINER - PROFILE
+  containerProfile: { marginHorizontal: 0 },
+  photo: {
+    width: DIMENSION_WIDTH,
+    height: 450,
+  },
+  topIconLeft: {
+    paddingLeft: 20,
+  },
+  topIconRight: {
+    paddingRight: 20,
+  },
+  actionsProfile: {
+    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  textButton: {
+    fontSize: 15,
+    color: WHITE,
+    paddingLeft: 5,
+  },
+  circledButton: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: PRIMARY_COLOR,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 10,
+  },
+  roundedButton: {
+    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    marginLeft: 10,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: SECONDARY_COLOR,
+    paddingHorizontal: 20,
+  },
+
+  // MENU
+  tabButtonText: {
+    textTransform: "uppercase",
+  },
+  iconMenu: {
+    alignItems: "center",
+  },
+
+
+  //Search
+  searchBarContainer: {
+    margin: 15,
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    width: "90%",
+
+  },
+  searchBar__unclicked: {
+    padding: 10,
+    flexDirection: "row",
+    width: "95%",
+    backgroundColor: "#d9dbda",
+    borderRadius: 15,
+    alignItems: "center",
+  },
+  searchBar__clicked: {
+    padding: 10,
+    flexDirection: "row",
+    width: "80%",
+    backgroundColor: "#d9dbda",
+    borderRadius: 15,
+    alignItems: "center",
+    justifyContent: "space-evenly",
+  },
+  searchInput: {
+    fontSize: 20,
+    marginLeft: 10,
+    width: "90%",
+  },
+
+  //FlatList
+  flatListContainer: 
+  {
+    marginTop:30,
+    padding:2,
+    },
+    flatListItem: {
+    backgroundColor: 'orange',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 8,
+    shadowColor: '#808080',
+    shadowOffset: { width: 3, height: 3 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    },
+
+
+    containerHomePage: {
+      flex: 1,
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "#fff",
+      position: "relative"
+    },
+
+    containerFlatList: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "#808080",
+      borderRadius: 8,
+      marginVertical: 20,
+      marginHorizontal: 16,
+    },
+
+
+    catSitterCard: {
+      justifyContent: "center",
+      flexDirection: "row",
+      alignItems: "center",
+      marginLeft: 10,
+      height: 50,
+      backgroundColor: "#808080",
+
+    },
+
+});

components/CardItem.tsx

+import React from "react";
+import { Text, View, Image, Dimensions, TouchableOpacity } from "react-native";
+import Icon from "./Icon";
+import { CardItemT } from "../types";
+import styles, {
+  DISLIKE_ACTIONS,
+  FLASH_ACTIONS,
+  LIKE_ACTIONS,
+  STAR_ACTIONS,
+  WHITE,
+} from "../assets/styles";
+
+const CardItem = ({
+  description,
+  hasActions,
+  hasVariant,
+  image,
+  isOnline,
+  matches,
+  name,
+}: CardItemT) => {
+  // Custom styling
+  const fullWidth = Dimensions.get("window").width;
+
+  const imageStyle = [
+    {
+      borderRadius: 8,
+      width: hasVariant ? fullWidth / 2 - 30 : fullWidth - 80,
+      height: hasVariant ? 170 : 350,
+      margin: hasVariant ? 0 : 20,
+    },
+  ];
+
+  const nameStyle = [
+    {
+      paddingTop: hasVariant ? 10 : 15,
+      paddingBottom: hasVariant ? 5 : 7,
+      color: "#363636",
+      fontSize: hasVariant ? 15 : 30,
+    },
+  ];
+
+  return (
+    <View style={styles.containerCardItem}>
+      {/* IMAGE */}
+      <Image source={image} style={imageStyle} />
+
+      {/* MATCHES */}
+      {matches && (
+        <View style={styles.matchesCardItem}>
+          <Text style={styles.matchesTextCardItem}>
+            <Icon name="heart" color={WHITE} size={13} /> {matches}% Match!
+          </Text>
+        </View>
+      )}
+
+      {/* NAME */}
+      <Text style={nameStyle}>{name}</Text>
+
+      {/* DESCRIPTION */}
+      {description && (
+        <Text style={styles.descriptionCardItem}>{description}</Text>
+      )}
+
+      {/* STATUS */}
+      {!description && (
+        <View style={styles.status}>
+          <View style={isOnline ? styles.online : styles.offline} />
+          <Text style={styles.statusText}>
+            {isOnline ? "Online" : "Offline"}
+          </Text>
+        </View>
+      )}
+
+      {/* ACTIONS */}
+      {hasActions && (
+        <View style={styles.actionsCardItem}>
+          <TouchableOpacity style={styles.miniButton}>
+            <Icon name="star" color={STAR_ACTIONS} size={14} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.button}>
+            <Icon name="heart" color={LIKE_ACTIONS} size={25} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.button}>
+            <Icon name="close" color={DISLIKE_ACTIONS} size={25} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.miniButton}>
+            <Icon name="flash" color={FLASH_ACTIONS} size={14} />
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default CardItem;

components/City.tsx

+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+import Icon from "./Icon";
+import styles, { DARK_GRAY } from "../assets/styles";
+
+const City = () => (
+  <TouchableOpacity style={styles.city}>
+    <Text style={styles.cityText}>
+      <Icon name="location-sharp" size={13} color={DARK_GRAY} /> New York
+    </Text>
+  </TouchableOpacity>
+);
+
+export default City;

components/Filters.tsx

+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+import Icon from "./Icon";
+import styles, { DARK_GRAY } from "../assets/styles";
+
+const Filters = () => (
+  <TouchableOpacity style={styles.filters}>
+    <Text style={styles.filtersText}>
+      <Icon name="filter" size={13} color={DARK_GRAY} /> Filters
+    </Text>
+  </TouchableOpacity>
+);
+
+export default Filters;

components/Icon.tsx

+import React from "react";
+import { Ionicons } from "@expo/vector-icons";
+import { IconT } from "../types";
+
+const Icon = ({ color, name, size, style }: IconT) => (
+  <Ionicons name={name} size={size} color={color} style={style} />
+);
+
+export default Icon;

components/Message.tsx

+import React from "react";
+import { Text, View, Image } from "react-native";
+import { MessageT } from "../types";
+import styles from "../assets/styles";
+
+const Message = ({ image, lastMessage, name }: MessageT) => (
+  <View style={styles.containerMessage}>
+    <Image source={image} style={styles.avatar} />
+    <View>
+      <Text>{name}</Text>
+      <Text style={styles.message}>{lastMessage}</Text>
+    </View>
+  </View>
+);
+
+export default Message;