@armiasystems/react-native-armia-chat-sdk

Getting started

NPM

$ npm install @armiasystems/react-native-armia-chat-sdk --save

YARN

$ yarn add @armiasystems/react-native-armia-chat-sdk

Firebase Set up

For Firebase setup you need to follow this instructions

Setup the RealTime Database and Storage in Firebase with edited rules

Install dependencies

@react-native-community/async-storage, @react-native-community/masked-view @react-native-firebase/app, @react-native-firebase/auth, @react-native-firebase/database, @react-native-firebase/firestore, @react-native-firebase/storage, mobx, mobx-react, react-native-animatable, react-native-audio-recorder-player, react-native-device-info, react-native-document-picker, react-native-fast-image, react-native-fetch-blob, react-native-file-provider, react-native-file-viewer, react-native-fs, react-native-gesture-handler, react-native-image-picker, react-native-modal, react-native-permissions react-native-phone-input, react-native-reanimated, react-native-safe-area-context, react-native-screens, react-native-size-matters, react-native-snackbar, react-native-sound, react-native-svg, react-native-vector-icons,

Make sure all dependencies settings/installation are done by refering respective npm package to avoid build errors

Usage

Sign up, login using firebase email authentication

import auth from "@react-native-firebase/auth";
import database from "@react-native-firebase/database";
import {saveKey,saveUserDisplayName,saveEmail} from"@armiasystems/react-native-armia-chat-sdk/src/utils/asyncStorage";

async function register(name, email, password) {
  try {
    let result = await auth().createUserWithEmailAndPassword(email, password);
    if (result) {
      //save result
      //save userKey into async storage 
      saveKey(result.data.key);
      saveUserDisplayName(result.data.name);
      saveEmail(result.data.email);
    } 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
      //save userKey into async storage 
    } else {
      console.log("error", result);
    }
  } catch (e) {
    console.log(e);
  }
}

Sign up, login using firebase phone authentication

For Firebase phone authentication you need to follow this instructions

import React, { useState} from 'react';
import auth from "@react-native-firebase/auth";
import {saveKey,saveUserDisplayName,saveEmail} from"@armiasystems/react-native-armia-chat-sdk/src/utils/asyncStorage";

function PhoneSignIn() {
   // If null, no SMS has been sent
  const [confirm, setConfirm] = useState(null);

  // verification code (OTP - One-Time-Passcode)
  const [code, setCode] = useState('');
  async function register(phoneNumber) {
    try {
      let result = await auth().signInWithPhoneNumber(phoneNumber);
      if (result) {
        //save result
        //save userKey into async storage 
      saveKey(result.data.key);
      saveUserDisplayName(result.data.name);
      saveEmail(result.data.email);
      setConfirm(confirmation);
      } else {
        console.log("error", result);
      }
    } catch (e) {
      console.log(e);
    }
  }
  async function confirmCode() {
    try {
      await confirm.confirm(code);
    } catch (error) {
      console.log('Invalid code.');
    }
  }
}

Logout

import auth from "@react-native-firebase/auth";
import database from "@react-native-firebase/database";
import {removeAllKeys} from"@armiasystems/react-native-armia-chat-sdk/src/utils/asyncStorage";

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 () => {
      removeAllKeys();
      await auth().signOut();
      dispatch({ type: "SIGN_OUT" });
    });
    //clear values in onSignOut function and switch the stack
  } catch (e) {
    console.error(e);
  }
}

app.js setup

import { Provider } from "mobx-react";
import stores from "@armiasystems/react-native-armia-chat-sdk/src/store";

function App() {
  return (
    <Provider {...stores}>   
       // Add the Navigation Container
    </Provider>
  );
}

export default App;

List all threads [The Conversation List]

//A class component with ConversationList component will give chat list

import ConversationList from '@armiasystems/react-native-armia-chat-sdk/src/chatComponents/conversationList';
import Conversations from '@armiasystems/react-native-armia-chat-sdk/src/store/conversation';
import ConversationItem from '@armiasystems/react-native-armia-chat-sdk/src/chatComponents/conversationItem';
import Snackbar from 'react-native-snackbar';
import moment from 'moment';
    
render(){
  let keyFromAsync = await loadKey();
  return(
  <ConversationList
    primaryColor={'#4090B3'}
    Preview={(data, index) =>
      this.CustomListItemPreview(data, index)
    }
    token={this.state.key}//keyFromAsync saved to state as 'key'
    navigation={this.props.navigation}
    contentContainerStyle={{
      paddingBottom: 80,
      flexGrow: 1,
      paddingTop: 15,
    }}
    goToDetails={() => {}}
    ref={(inst) => (this.listRef = inst)}
    deleteConversations={(item) => {
      this.deleteConversation(item);
    }}
    listEmptyComponent={this.renderListEmpty()}
    customLoader={()=>{
      //Provide any loader component
    }}
  />
  )
}


  CustomListItemPreview = (item, index) => {

    let result = '';
    let you = '';
    if (item.lastType === 'info') {
      let text = item.lastMessage;
      // Save the username to state as 'name'
      if (text.includes(this.state.name)) {
        result = text.replace(this.state.name, 'You');
      } else {
        result = item.lastMessage;
      }
    }
    if (item.lastMsgUser.split('***')[0] === item.userId) {
      you = 'true';
    }
    this.filterUnreadConversationCount(item, this.state.key);
    return (
      <ConversationItem
        isGroup={item.type === 'group'}
        navigation={this.props.navigation}
        imageSrc={item.avatarSource ? item.avatarSource : undefined}
        username={item.name ? item.name : item.email}
        bio=""
        description={

          item.type === 'group'
            ? item.lastType !== 'info'
              ? item.lastMsgUser
                ? item.lastMsgUser.split('***')[0] === item.userId
                  ? 'You' + ': ' + item.lastMessage
                  : item.lastMsgUser.split('***')[1] + ': ' + item.lastMessage
                : item.lastMessage
              : result
            : item.lastMessage
        }
        type={item.lastType}
        time={this.formatedTime(item.lastTime)}
        notification={
          item.userUnreadCount !== 0 &&
            item.userUnreadCount !== undefined &&
            item.userUnreadCount !== null
            ? item.userUnreadCount
            : ''
        }
        isBlocked={false}
        isMuted={false}
        hasStory={false}
        ownKey={this.state.key}//keyFromAsync saved to state as 'key'
        receiverKey={item.userKey}
        chatInfo={item}
        onPress={() => {
          this.onPressListItem(item);
        }}
        onLongPress={() => {
          this.deleteConversation(item);
        }}
        goToProfile={() => {
          this.onPressListItem(item);
        }}
        yourMessage={you}
      />
    );
  };

  deleteConversation = (item) => {
    if (item.type !== 'group') {
      Alert.alert('Remove', 'Do you want to remove the conversation?', [
        {
          text: 'NO',
          onPress: () => console.log('Cancel Pressed'),
        },
        {
          text: 'YES',
          onPress: async () =>
          {
            //keyFromAsync saved to state as 'key'
            Conversations.deleteConversation(this.state.key, item.key)
              .then((result) => {
                if (result) {
                  this.listRef.removeItemFromList(item.key);
                } else {
                  Snackbar.show({
                    text: 'Something went wrong, Please try again later',
                    duration: Snackbar.LENGTH_SHORT,
                  });
                }
              })
              .catch((err) => console.warn('error====>', err));
           },
        },
      ]);
    }
  };

  onPressListItem = (item) => {
        this.props.navigation.navigate('ChatView', {
        conversationKey: item.type === 'group' ? item.conversation_key : item.key,
        currentUserKey: this.state.key,//keyFromAsync saved to state as 'key'
        title: item.name ? item.name : item.email,
        imageURL: item.avatarSource,
        unreadCount: item.unreadCount,
        userkey_unreadCount: item.userkey_unreadCount,
        update: this.update(),
        lastseen: item.lastSeen,
        isOnline: item.online,
        type: item.type,
        receiverKey: item.userKey,
        chatInfo: item,
        isAGroupMember:'',
      });
  };
  renderListEmpty = () => {
    return (
      <View style={styles.emptyListContainer}>
        <Text>No chats yet</Text>
      </View>
    );
  };
   update = async () => {
    this.listRef.refreshList();
  };
  formatedTime = (time) => {
    var formatted = '';
    let timestempFormated;

    let fulltoday = new Date();
    var today =
      fulltoday.getDate() +
      '-' +
      parseInt(fulltoday.getMonth() + 1) +
      '-' +
      fulltoday.getFullYear();
    let yesterday =
      fulltoday.getDate() -
      1 +
      '-' +
      parseInt(fulltoday.getMonth() + 1) +
      '-' +
      fulltoday.getFullYear();
    if (time) {
      var timestemp = new Date(time);

      let hour = timestemp.getHours() % 12 || 12;
      let ampm = timestemp.getHours() < 12 ? ' AM' : ' PM';

      timestempFormated =
        timestemp.getDate() +
        '-' +
        parseInt(timestemp.getMonth() + 1) +
        '-' +
        timestemp.getFullYear();

      if (timestempFormated === today) {
        formatted =
          hour + ':' + ('0' + timestemp.getMinutes()).slice(-2) + ampm;
      } else if (timestempFormated === yesterday) {
        formatted = 'Yesterday';
      } else {

        formatted = moment(timestemp).format('DD/MM/YYYY');

        // formatted =
        //   ('0' + timestemp.getDate()).slice(-2) +
        //   '/' +
        //   ('0' + timestemp.getMonth()).slice(-2) +
        //   '/' +
        //   timestemp.getFullYear();
      }
    }
    return formatted;
  };

   filterUnreadConversationCount = async (data, userkey) => {
    const unreadCountVal = data.userUnreadCount;
    if (unreadCountVal !== 0) {
      if (this.state.contactsListFiltered.includes(data.conversation_key) === false) {
        this.state.contactsListFiltered.push(data.conversation_key);
      }
    }
    const count = this.state.contactsListFiltered.length;
    //  console.log('Count', count);
    if (count !== 0) {
      await database()
        .ref('Users')
        .child(userkey)
        .update({ unreadChatCount: count });
    } else {
      await database()
        .ref('Users')
        .child(userkey)
        .update({ unreadChatCount: 0 });
    }
  };

To use single contact list item

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

<Contact
  name={item.name}
  item={item}
  avatarUrl={{
    uri: item.avatarSource !== "" ? item.avatarSource : undefined
  }}
  bio={item.bio}
  onPress={() =>
   //check whether the current user is a member of the group & then add isAGroupMember value
    startConversation(item.key).then(val => {
      //Navigate to a screen called "ChatView" that has ChatDetails component(Can be found in SDK) with below props
      //** Make sure the component name should be "ChatView" in navigator stack (Since many internal redirection are done using this route name)
    
      navigation.navigate("ChatView", {
        conversationKey: item.type === 'group' ? item.conversation_key : item.key,
        currentUserKey: key,
        title: item.name ? item.name : item.email,
        imageURL: item.avatarSource,
        unreadCount: item.unreadCount,
        userkey_unreadCount: item.userkey_unreadCount,
        update: this.update(),
        lastseen: item.lastSeen,
        isOnline: item.online,
        type: item.type,
        receiverKey: item.userKey,
        chatInfo: item,
        isAGroupMember:isAGroupMember !== undefined ? isAGroupMember : '',
      });
    })
  }
  reRenderFlatList={(index, unreadvalue) => {}}
/>;

  update = async () => {
    //Add a ref to refresh the list
  };

 startConversation = async (receiver) => {
  const keyFromAsync = await loadKey();
    try {
      let key = null;

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

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

      snapshot.forEach((item) => {
        item.forEach((subItem) => {
          if (
            subItem.key === receiver &&
            item.child('type').val() !== 'group'
          ) {
            key = item.key;
            return;
          }
        });
      });

      if (key === null || key === undefined) {
        key = await database().ref('Conversations').push(Users).key;
      }

      return Promise.resolve(key);
    } catch (error) {
      return Promise.reject(error);
    }
  };

To use chat details page

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

 <ChatDetails
  conversationKey={conversationKey}
  currentUserKey={keyFromAsync}
  uri={imgUrl}
  title={title}
  goBack={() => {
    navigation.goBack();
  }}
  navigation={navigation}
  unreadCount={unreadCount}
  lastseen={lastseen}
  isOnline={isOnline}
  type={type}
  userName={userName}
  isAMemberOfGroup={
     //check whether the current user is a member of the group & then check
    isAGroupMember
    ? isAGroupMember
    : 'No'
  }
  goToProfile={() => {
    if (type === 'group') {
      //navigate to group details screen
    }
  }}
  customHeader={(isOnline, lastSeen, type, typingInfo) =>
    //Add a customHeader to chat details screen(You can refer to ChatHeader component in SDK)
  }
  placeHolder={'Type Something…'}
  customSenderMsg={(data) => {
    // Add the message component (You can refer to ChatCard component in SDK with isLeft={false}) 
  }}
  customReceiverMsg={(data) => {
     // Add the message component (You can refer to ChatCard component in SDK with isLeft={true}) 
  }}
  customFooterMainContainerStyle={{
          paddingHorizontal: 10,
          justifyContent: 'space-between',
          alignItems: 'center',
          flexDirection: 'row',
          paddingVertical: 10,
          backgroundColor: 'white',
          borderWidth: 0,
          elevation: 0,
          borderRadius: 0,
          margin: 0,
    //Messagebar container  style
  }}
  customFooterInnerContainerStyle={{
          flexDirection: 'row',
          backgroundColor: 'white',
          flex: 3,
          marginHorizontal: 10,
          paddingVertical: Platform.OS === 'ios' ? 10 : 0,
          borderRadius: 30,
          alignItems: 'center',
          justifyContent: 'space-between',
          elevation: 2,
    //Messagebar inner style
  }}
  textInputStyle={{ 
    fontWeight: '400',
    //Message bar text style
  }}
  sendIconSize={25}
  sendIconColor={'white'
    //Send icon background color
  }
  primaryColor={'#4090B3'}
  senderBg={
    '#4090B3'
    //Sender chat bubble background color
  }
  receiverBg={
     '#F5F5F5'
    //Reciever chat bubble background color
  }
  sendIconContainerStyle={{ 
     backgroundColor: '#4090B3',
    //Send button background color
  }}
  receiverKey={receiverKey}
  mediaPress={(type,url)=>{
    console.log('Type',type);
    console.log('Url',url);
    //case 'image':
         //Add image view screen
    //case 'video':
         //Add video view screen with video player
    // case 'doc':
         //Add FileViewer to open files or documents
  }
      
  }
  isVoiceShareAvailable={true}
  fileSharingEnable={true}
  isTypingIndicatorEnabled={true}
  ref={(inst) => (this.chatListRef = inst)}
  />

ChatHeader

import ChatHeader from '@armiasystems/react-native-armia-chat-sdk/src/components/chatComponents/ChatHeader';
import SDKGroup from '@armiasystems/react-native-armia-chat-sdk/src/store/group';

//Info needed for GroupDetials screen
const [groupDetails, setGroupDetails] = useState([]);
const [admin, setAdmin] = useState('');
 async function loadGroupDetails() {
    let keyFromAsync = await loadKey();
    SDKGroup.loadGroupInfo(
      keyFromAsync,
      props.route.params.conversationKey,
    ).then(result => {
      if (result) {
        setGroupDetails(result);
        if (result.data.adminKey) {
          if (keyFromAsync === result.data.adminKey) {
            setAdmin(true);
          } else {
            setAdmin(false);
          }
        }
      }
    });
  }


<ChatHeader
  type={type}
  onOpenProfile={() => {
     //Can either use SDK friendProfilePage & GroupDetails screen or provide a custom Profile screen
     //**********Usage *********

    if (type === 'group') {

       // 1) Add the  GroupDetail screen to the navigation stack
      import GroupDetails from '@armiasystems/react-native-armia-chat-sdk/src/screens/groupDetails';

      // 2) Add the below navigation step 
      navigation.navigate('GroupDetails', {
              conversationKey: conversationKey, 
              title: 'Group detail',
              addedList: groupDetails?.data.participantList,
              name: groupDetails?.data.groupName,
              profileImage: groupDetails?.data.groupImage,
              groupKey: groupDetails?.data.groupKey,
              createUserId: groupDetails?.data.createUser,
              adminKey: groupDetails?.data.adminKey,
              returnScreen:'Home' 

              // "returnScreen"-> screen which you want to return after certain function like exist/delete group

            });
    } else {

      // 1) Add the  FriendProfilePage screen to the navigation stack
      import FriendsProfilePage from '@armiasystems/react-native-armia-chat-sdk/src/screens/friendsProfilePage';

      // 2) Add the below navigation step
            navigation.navigate('FriendsProfilePage', {
              username: title,
              bio: '',
              imageSrc: imgUrl,
              isBlocked: false,
              isMuted: false,
              ownKey: key,
              receiverKey:receiverKey,
              chatInfo: chatInfo,
            });
    }
  }}
  onPress={() => navigation.goBack()}
  username={title}
  imageSrc={imgUrl}
  receiverKey={receiverKey}
  onlineStatus={
   isOnline ? 'Online' : 'Last seen at ' + this.getLastSeen(lastSeen)
  }
  lastSeen={lastSeen}
  typingInfo={typingInfo}
  />

  getLastSeen = (lastseenVal) => {
    var formatted = 'unknown';
    let lastseen = lastseenVal;
    let dispayTimestempDay = '';
    let timestempday = '';
    if (lastseen) {
      var fulltoday = new Date();
      var today =
        fulltoday.getDate() +
        '-' +
        parseInt(fulltoday.getMonth() + 1) +
        '-' +
        fulltoday.getFullYear();

      fulltoday.setDate(fulltoday.getDate() - 1);
      var yesterday =
        fulltoday.getDate() +
        '-' +
        parseInt(fulltoday.getMonth() + 1) +
        '-' +
        fulltoday.getFullYear();

      var timestemp = new Date(lastseen);
      timestempday =
        timestemp.getDate() +
        '-' +
        parseInt(timestemp.getMonth() + 1) +
        '-' +
        timestemp.getFullYear();
      dispayTimestempDay =
        (timestemp.getDate() < 9
          ? '0' + timestemp.getDate()
          : timestemp.getDate()) +
        '-' +
        (parseInt(timestemp.getMonth() + 1) < 9
          ? '0' + parseInt(timestemp.getMonth() + 1)
          : parseInt(timestemp.getMonth() + 1)) +
        '-' +
        timestemp.getFullYear();

      let hour = timestemp.getHours() % 12 || 12;
      let ampm = timestemp.getHours() < 12 ? ' AM' : ' PM';

      if (timestempday === today) {
        formatted =
          (hour >= 10 ? hour : '0' + hour) +
          ':' +
          ('0' + timestemp.getMinutes()).slice(-2) +
          ampm;
      } else if (timestempday === yesterday) {
        formatted = 'Yesterday';
      } else {
        formatted = dispayTimestempDay;
      }
    }
    return formatted;
  };

ChatCard (Message bubble)

import ChatCard from '@armiasystems/react-native-armia-chat-sdk/src/components/chatComponents/chatCard';

<ChatCard
  time={time}
  isLeft={false} //Sender=false, Reciever=true  
  chat={content}
  type={type}
  name={name}
  isSeen={isSeen}
  isDelivered={isDelivered}
  messageKey={messageKey}
  conversationKey={conversationKey}
  deleteMsg={(messageKey, deleteValue) => {
      if (this.chatListRef) {
        //--------Sender
        //this.chatListRef.removeMessageFromList(messageKey, deleteValue);
        //---------Reciever
        //this.chatListRef.removeMessageFromList(messageKey);
      }
    //Do function to remove message
  }}
  showAvatar={showAvatar}
  messageType={messageType}
  />

Searching users

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

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);
      }
    }
  }
});

Block & Unblock user

import database from '@react-native-firebase/database';
import {Alert} from 'react-native';

async function fetchBlockUserList (shouldBlock) {
  let keyFromAsync = await loadKey(); //ownKey
  const referencePath = '/blocked/' + keyFromAsync;
  database().ref(referencePath)once('value').then((snapshot) => {
    let blockList = [];
    if (snapshot.val() != null && snapshot.val().length !== 0) {
      blockList = snapshot.val();
    }
    if (shouldBlock) {
      Alert.alert('Block', 'Are you sure you want to block?', [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        { text: 'Block', onPress: () => blockTheUser(blockList) },
      ]);
    } else {
      unblockTheUser(blockList);
    }
  });
}

async function blockTheUser(blockList){
  let keyFromAsync = await loadKey(); //ownKey
  const referencePath = '/blocked/' + keyFromAsync;

  let updatedList = blockList;
  //Push the user key which you want to block to updatedList
  updatedList.push(userkey); 
  database().ref(referencePath).set(updatedList).then(() => {
    // Save the result to state to refer whether the user is blocked or not
  });
};

async function unblockTheUser(blockList){
  let keyFromAsync = await loadKey();//ownKey
  const referencePath = '/blocked/' + keyFromAsync;

  let filtered = blockList.filter((item) => item !== userkey);
  database().ref(referencePath).set(filtered).then(() => {
    // Save the result to state to refer whether the user is blocked or not
  });
};

Creating a group

//Initailly add below screen from the SDK to the stack navigator

//Make sure the stack screen name should be same as import name(eg:GroupDetails)

import GroupDetails from '@armiasystems/react-native-armia-chat-sdk/src/screens/groupDetails';
import CreateGroup from '@armiasystems/react-native-armia-chat-sdk/src/screens/createGroup';
import AddParticipants from '@armiasystems/react-native-armia-chat-sdk/src/screens/addParticipants';


<TouchableOpacity
  onPress={() =>
 
    this.props.navigation.navigate('AddParticipants', {
      title: 'Create Group', 
      returnScreen: 'Home',//Screen which the user will redirected after group creation
      })
  }>
  <Text>Create Group</Text>
</TouchableOpacity>

//The above Touchable opacity onPress will navigate you to AddParticipants screen which is added to your app stack navigator

//Here we will see the list of user where we can select the participant and the press the botton arrow to CreateGroup with name & photo then press forward arrow in the bottom to create group

//Here a return screen  will redirect to specified screen

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;
}

Mini Profile

import MiniPofile from '@armiasystems/react-native-armia-chat-sdk/src/components/miniProfile';

//This component can be used inside a modal
 <MiniProfile
  isGroup={isGroup}
  username={username}
  imageSrc={imageSrc}
  bio={bio}
  isBlocked={isBlocked}
  isMuted={isMuted}
  ownKey={ownKey}
  receiverKey={receiverKey}
  chatInfo={chatInfo}
  hide={
    //set state to hide the profile (hide the modal)
  }
  navigation={navigation}
  goToProfile={() => {
             //Navigate to profile
  }}
  returnScreen={isGroup&&'Home'} //if the type is a 'group' it should have a return screen route name given
  />

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
    });
  }
};

import ProfileHeader from '@armiasystems/react-native-armia-chat-sdk/src/components/profileComponents/ProfileInfo';

 <ProfileInfo
  myProfile
  username={''}
  bio=""
  profilePicture={''}
  onPressNameEdit={() => {}}
  onPressImageEdit={() => {}}
  />

Open Room Chat creation

//Add both the import to Stack navigator as a screen 

import RoomList from '@armiasystems/react-native-armia-chat-sdk/src/screens/roomList';
import RoomChat from '@armiasystems/react-native-armia-chat-sdk/src/screens/roomChat';

//Below onPress in touchableOpacity will navigate to the screen call RoomList

<TouchableOpacity
  onPress={() =>{
 //You can create any number of rooms with different name 

    this.props.navigation.navigate('RoomList', {
      hideOption: false,
      rooms:[
         { id: 'room_1', name: 'Startups' },
         { id: 'room_2', name: 'Sports' },
         { id: 'room_3', name: 'Health and Wellness' },
         { id: 'room_4', name: 'Stock Market' },
         { id: 'room_5', name: 'Travel & Tourism' },
      ],
      imageViewScreen:'', //(Image full view on press in chat)Provide the name of screen where image full view is implemented 
      videoViewScreen:'', //(Video Player screen) Provide the name of the screen where video player is implemented
      });
  }}>
  <Text>Room List</Text>
</TouchableOpacity>

Delete account

import auth from "@react-native-firebase/auth";
import database from "@react-native-firebase/database";
import {removeAllKeys} from"@armiasystems/react-native-armia-chat-sdk/src/utils/asyncStorage";

async function deleteAccount() {
  try {
    let keyFromAsync = await loadKey();
    
    await database()
      .ref("Users")
      .child(keyFromAsync)
      .update({ online: false });
    await database()
      .ref("Users")
      .child(keyFromAsync)
      .update({ lastSeen: Date.now() });
    await database()
      .ref('Users')
      .child(key)
      .update({ deletedAccount: true });
    await auth().currentUser.delete();
    onSignOut().then(async () => {
      removeAllKeys();
      await auth().signOut();
      dispatch({ type: "SIGN_OUT" });
    });
    //clear values in onSignOut function and switch the stack
  } catch (e) {
    console.error(e);
  }
}

Push Notification

For Push notification implementation, you can follow Firebase Cloud Messaging and react-native-push-notification

Check out the sample app https://gitlab.armiasystems.com/mobilelearningprojects/chatwithme.git