Setting up a sample application

Firebase setup

This tutorial assumes that you have integrated Firebase by following these instructions.

Application setup

Using components and functions

Sign up, login, logout using firebase 


                import auth from "@react-native-firebase/auth";
                import database from "@react-native-firebase/database";

                async function register(name, email, password) {
                  try {
                    let result = await auth().createUserWithEmailAndPassword(email, password);
                    if (result) {
                      //save result
                    } else {
                      console.log("error", result);
                    }
                  } catch (e) {
                    console.log(e);
                  }
                }
                async function login(email, password) {
                  try {
                    let result = await auth().signInWithEmailAndPassword(email, password);
                    if (result) {
                      //save result
                    } else {
                      console.log("error", result);
                    }
                  } catch (e) {
                    console.log(e);
                  }
                }

                async function logout() {
                  try {
                    let keyFromAsync = await loadKey();
                    const reference = database().ref(`/online/${keyFromAsync}`);

                    reference.set(true).then(() => console.log("Online presence set"));

                    // Remove the node whenever the client disconnects
                    reference
                      .onDisconnect()
                      .remove()
                      .then(() => console.log("On disconnect function configured."));
                    await database()
                      .ref("Users")
                      .child(keyFromAsync)
                      .update({ online: false });
                    await database()
                      .ref("Users")
                      .child(keyFromAsync)
                      .update({ lastSeen: Date.now() });

                    onSignOut().then(async () => {
                      await auth().signOut();
                      dispatch({ type: "SIGN_OUT" });
                    });
                    //clear values in onSignOut function and switch the stack
                  } catch (e) {
                    console.error(e);
                  }
                }

List all threads

import UsersList from "@armiasystems/react-native-armia-chat-sdk/src/chatComponents/usersList"; 


         {}}
          ref={listRef}
          deleteConversations={item => {}}
          listEmptyComponent={<>}
        />;

To use single contact list item

import Contact from "@armiasystems/react-native-armia-chat-sdk/src/components/contact"; 


        
            startConversation(item.key).then(val => {
              navigation.navigate("ChatView", {
                conversationKey: val,
                currentUserKey: key,
                title: item.name,
                imageURL: item.avatarSource,
                unreadCount: 0,
                userkey_unreadCount: item.userkey_unreadCount,
                lastseen: item.lastSeen,
                isOnline: item.online
              });
            })
          }
          reRenderFlatList={(index, unreadvalue) => {}}

To use chat details page

import ChatDetails from "@armiasystems/react-native-armia-chat-sdk/src/chatComponents/chatDetails"; 


        const snapshot = await database()
            .ref('Users')
            .once('value');
          let contacts = []
          snapshot.forEach(item => {
            if (item.val().name) {
              if (
                item
                  .val()
                  .name.toLowerCase()
                  .includes(text.toLowerCase())
              ) {
                const contact = {
                  key: item.key,
                  lastTime: '',
                  lastMessage: ''
                  ...item.val(),
                };
                if (item.key !== key) {
                  contacts.push(contact);
                }
              }
            }
          });

Searching users

import database from '@react-native-firebase/database'; 


         {
            this.props.navigation.goBack();
          }}
          unreadCount={unreadCount}
          lastseen={lastseen}
          isOnline={isOnline}
          type={type} //group or single
          userName={userName}
          goToProfile={() => {}}
        />;

Creating a group

import database from '@react-native-firebase/database'; 


        async function handleCreateGroup() {
          let keyFromAsync = await loadKey();
          const imgData = await imageUpload();
          var participantsId = [];

          addedList.forEach(element => {
            participantsId.push(element.key);
          });

          const group = {
            groupName: groupName,
            groupSource: imgData.groupSource,
            groupRef: imgData.groupRef,
            participants: participantsId
          };

          const groupKey = await database()
            .ref("Groups")
            .push(group).key;

          addToConversations(keyFromAsync, participantsId, groupKey)
            .then(key => {
              updateConversation(key, keyFromAsync);
            })
            .catch(error => console.log("error->", error));
        }
        async function addToConversations(keyFromAsync, participantsId, groupKey) {
          try {
            let key = null;

            let Users = {};
            Users[keyFromAsync] = true;

            Users.onlineUsers = {
              [keyFromAsync]: { status: true }
            };

            participantsId.forEach(element => {
              Users[element] = true;
              Users.onlineUsers[element] = { status: false };
            });

            const snapshot = await database()
              .ref("Conversations")
              .orderByChild(keyFromAsync)
              .equalTo(true)
              .once("value");

            snapshot.forEach(item => {
              item.forEach(subItem => {
                participantsId.forEach(element => {
                  if (subItem.key === element) {
                    key = item.key;
                    return;
                  }
                });
              });
            });

            key = await database()
              .ref("Conversations")
              .push(Users).key;

            await database()
              .ref("Conversations")
              .child(key)
              .update({
                type: "group",
                group_key: group_key,
                conversation_key: key,
                userkey: keyFromAsync
              });

Image Upload

import storage from "@react-native-firebase/storage"; 


        async function imageUpload() {
          let url = "",
            ref = "";
          let data = {
            groupSource: groupImage,
            groupRef: groupImage
          };
          if (fileName !== "") {
            const rImage = await storage()
              .ref("/groupPics/" + getFileName(fileName))
              .putFile(groupImage);

            url = await storage()
              .ref(rImage.metadata.fullPath)
              .getDownloadURL();

            ref = rImage.metadata.fullPath;

            data = {
              groupSource: url,
              groupRef: ref
            };
          }
          return data;
        }

        function getFileName(originalName) {
          const re = /(?:\.([^.]+))?$/;
          return "IMG-" + getFormattedTime() + "." + re.exec(originalName)[1];
        }

        function getFormattedTime() {
          var today = new Date();
          var y = today.getFullYear();
          var m = today.getMonth() + 1;
          var d = today.getDate();
          var h = today.getHours();
          var mi = today.getMinutes();
          var s = today.getSeconds();
          return y + "-" + m + "-" + d + "-" + h + "-" + mi + "-" + s;
        }

Profile view 


        getCurrentUser = async () => {
          let key;
          let keyFromAsync = await loadKey();
          let emailFromAsync = await loadEmail();

          this.setState({
            key: keyFromAsync
          });

          if (keyFromAsync) {
            key = keyFromAsync;
          } else {
            const snapshot = await database()
              .ref("Email")
              .once("value");
            if (snapshot.val() !== null) {
              key = snapshot.val()[emailFromAsync];
              if (key === undefined) {
                return;
              }
            }
          }

          const userSnapshot = await database()
            .ref("Users")
            .child(key)
            .once("value");

          const _user = userSnapshot.val();
          if (_user) {
            this.setState({
              userDetails: _user,
              profileImage: _user.avatarSource !== undefined ? _user.avatarSource : "",
              name: _user.name
            });
          }
        };

Next Folder Structure