Expo Chat App Support Codes

gistfile1.txt

Tailwidcss Config
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#43C651",
        primaryBold: "#056526",
        primaryText: "#555",
      },
    },
  },
  plugins: [],
};

*******************************************
Support.js
*******************************************
export const avatars = [
  {
    _id: "d97206a2-93bb-434e-9f7a-34d747404150",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/58efab3fcd310ee26c62f8df400b0048881bba3b-1083x1083.png",
      },
    },
    title: "Avatar1",
  },
  {
    _id: "1e8661ce-4b9b-4193-8f79-c2acd7681fa8",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/db39b602de6ade3cbe6e5dd962f9544f07b28edd-1083x1083.png",
      },
    },
    title: "Avatar2",
  },
  {
    _id: "c4a48f2e-1bc2-4a2e-9110-4f8bb4a84e31",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/9962f6fb7ba946ce4e10ddc971bbbf038f852004-1083x1083.png",
      },
    },
    title: "Avatar3",
  },
  {
    _id: "8a43b670-55d6-4d7f-bdcf-f3cf4280e415",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/a1f233e88cb8e64e4778dac82b067e81cd55e04d-1083x1083.png",
      },
    },
    title: "Avatar4",
  },
  {
    _id: "1057b6ee-f5ab-4f79-80a0-e94a9042bf59",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/c5dfffc077b536c1374216f89cd445ac757aad8f-1083x1083.png",
      },
    },
    title: "Avatar5",
  },
  {
    _id: "261aa1f4-852b-4acb-b4ad-a24a1744285b",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/08e67d5d7f6c08a571f3aa6850f6af330ac931fa-1083x1083.png",
      },
    },
    title: "Avatar6",
  },
  {
    _id: "d41e0f7a-7270-4d33-b3ce-25591ffd1996",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/b9b1dbcb6989773791aa7f3e99f9bcd45ab449a6-1083x1083.png",
      },
    },
    title: "Avatar7",
  },
  {
    _id: "a872a966-6ce2-4959-ad93-ddec71fc8c15",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/5c6b379d9b6c54f3cc58db37d56ab6904cbf932c-1083x1083.png",
      },
    },
    title: "Avatar8",
  },
  {
    _id: "65aced09-cbe5-430d-8500-9462f140e30b",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/2681d86fb9315be9dc18d3b83b9d068b5ed81296-1083x1083.png",
      },
    },
    title: "Avatar9",
  },
  {
    _id: "cde6d74f-e6cb-472f-a450-88a0ec87eaf8",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/967b16fbcb8f3fedadd97bfca9f9d4d8cc589685-1083x1083.png",
      },
    },
    title: "Avatar10",
  },
  {
    _id: "7d54912c-12d1-4401-bfd2-e857ba98026b",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/a8cbc6bd3f43217fcd8724c2ab8847b1a49f58a7-1083x1083.png",
      },
    },
    title: "Avatar11",
  },
  {
    _id: "78dd08cb-573e-434f-af0e-1710e1aa9ae0",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/a05bd82efd1ccb0bc69057912830e6b28e137403-1083x1083.png",
      },
    },
    title: "Avatar12",
  },
  {
    _id: "0345f294-e946-4bfd-af85-35b41cad2c35",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/78afd9e832889ebf5a524401f534ed610280783b-1083x1083.png",
      },
    },
    title: "Avatar13",
  },
  {
    _id: "76f75387-af0f-4e8c-8bd2-ccead46053eb",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/fc5cf820abbef2caa81532a5c906b4aa74927d5d-1083x1083.png",
      },
    },
    title: "Avatar14",
  },
  {
    _id: "4bf58587-d5c4-4240-8089-8251a2e866aa",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/01d393ecefcbd459555901257e3dacc0ac72a066-1083x1083.png",
      },
    },
    title: "Avatar15",
  },
  {
    _id: "e57b710c-811a-4949-8c6c-19407829597f",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/d879892f276336d6b7fac4d0e885cfca305b9b07-1083x1083.png",
      },
    },
    title: "Avatar16",
  },
  {
    _id: "2a9b1760-c7c4-46b2-94a9-59743a775510",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/2baf33196cbfeb44be27b1647b14553ea164e705-1083x1083.png",
      },
    },
    title: "Avatar17",
  },
  {
    _id: "8e20fec4-a08d-4314-966a-f86f529cdb6d",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/0014da9fe1db958a09ca107722b0062d45a55416-1083x1083.png",
      },
    },
    title: "Avatar18",
  },
  {
    _id: "bd2da43e-6c34-425f-910c-328bba428102",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/17611eb818ff6e6e23d6829ab50ba21c58034fde-1083x1083.png",
      },
    },
    title: "Avatar19",
  },
  {
    _id: "38171371-e5ce-46b8-a8ea-368f7c46b62e",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/9acd7db16fbdb81874cdc90762ea26bdf5657b65-1083x1083.png",
      },
    },
    title: "Avatar20",
  },
  {
    _id: "81f108c9-281c-4d4c-97df-6f158d11d2db",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/22e0a14a3169cea4655e639ba9d6e7dc454f808a-1083x1092.png",
      },
    },
    title: "Avatar21",
  },
  {
    _id: "6eb71306-177a-41f9-a58b-cd1d2a35b630",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/1b9daad115c8f5acfcd07de5ca3aaa87c5bea078-1083x1083.png",
      },
    },
    title: "Avatar22",
  },
  {
    _id: "eb1a3e27-357a-4c2d-99e6-33e60c4affe1",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/8239c216ab2148bd5641039b28b32711ab66bf53-1083x1083.png",
      },
    },
    title: "Avatar23",
  },
  {
    _id: "d166a243-3ce3-4b53-8a06-30b76b57c8a7",
    image: {
      asset: {
        url: "https://cdn.sanity.io/images/e3a07iip/production/f658f1b8f3e7b345ac981f5e22160346ccfdec44-1083x1083.png",
      },
    },
    title: "Avatar24",
  },
];




*******************************************
Query to fetch
*******************************************

Query to fetch chat rooms

  useLayoutEffect(() => {
    const chatQuery = query(
      collection(firestoreDB, "chats"),
      orderBy("_id", "desc")
    );

    const unsubscribe = onSnapshot(chatQuery, (querySnapShot) => {
      const chatRooms = querySnapShot.docs.map((doc) => doc.data());
      setChats(chatRooms);
      setIsLoading(false);
    });

    //  Return the unsubscribe funciton to stop listening to the updates
    return unsubscribe;
  }, []);

Query to fetch chat messages


  useLayoutEffect(() => {
    const msgQuery = query(
      collection(firestoreDB, "chats", room?._id, "messages"),
      orderBy("timeStamp", "asc")
    );

    const unsubscribe = onSnapshot(msgQuery, (querySnap) => {
      const upMsg = querySnap.docs.map((doc) => doc.data());
      setMessages(upMsg);
      setIsLoading(false);
    });

    return unsubscribe;
  }, []);
  
  



*******************************************
Media Shared
*******************************************