React Native Firebase update information for all users in real time based on other users actions

Hi I'm currently trying to add users to a page using react native, redux, and firebase. When User 1 clicks join, they get added to the feed and likewise for other users. However, a problem I'm facing is when user 2 clicks join, they get added to the feed but don't get displayed on user 1's page unless the user 1 refocuses on the page after going away.

Here is my code for the page itself in react native

import React, { Component } from 'react';
import { Text, View, Button, TouchableOpacity, SafeAreaView, ScrollView, Image  } from 'react-native';
import styles from '../styles.js'
import { connect } from 'react-redux'
import { FlatList } from 'react-native-gesture-handler';
import { FontAwesome5 } from '@expo/vector-icons'; 
import { Octicons } from '@expo/vector-icons'; 
import { FontAwesome } from '@expo/vector-icons'; 
import { addUser, removeUser, getLivingRoomUsers } from '../actions/livingRoomUser.js'
import { bindActionCreators } from 'redux'


class LivingRoom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        inRoom: false,
        isMuted: false
    };
  }
  componentDidMount(){
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      this.props.getLivingRoomUsers()
    });
  }

  joinRoom = () => {
    this.props.addUser()
    this.setState({ inRoom: true });
  }
  leaveRoom = () => {
    this.props.removeUser(this.props.livingRoomUser)
    this.setState({ inRoom: false });
  }
  ... 
  render(){
    return (
      <View>
        <SafeAreaView style={styles.livingRoomUserContainer}>
            <FlatList
          data={this.props.livingRoomUser.feed}

Here is my actions code for the redux portion:

export const addUser = () => {
    return async (dispatch, getState) => {
        try {
            const { user } = getState()
            const id = uuid.v4()
            const livingRoomUser = {
                id: id,
                avatar: user.avatar,
                username: user.username,
                isMuted: false,
                date: new Date().getTime(),
            }
            db.collection('livingroom').doc(id).set(livingRoomUser)
            dispatch({
                type: 'ADD_USER', payload: livingRoomUser
            })
            dispatch(getLivingRoomUsers())
        } catch (e) {
            alert(e)
        }
    }
} 


export const removeUser = (livingRoomUser) => {
    return async (dispatch, getState) => {
        try {
            db.collection('livingroom').doc(livingRoomUser.id).delete();
            dispatch(getLivingRoomUsers())
            //get living room users
        } catch (e) {
            alert(e)
        }
    }
} 

export const getLivingRoomUsers = () => {
    return async (dispatch, getState) => {
        try {
            const livingRoomUsers = await db.collection('livingroom').get()
            let array = []
            livingRoomUsers.forEach((livingRoomUser) => {   
                array.push(livingRoomUser.data())
            })  
            dispatch({
                type: 'GET_LIVING_ROOM_USERS', payload: orderBy(array, 'date', 'asc')
            })
        } catch (e) {
            alert(e)
        }
    }
}

To summarize. I want the getUsers to be updated anytime someone adds/removes themself from the page. However, from my implementation currently actions only get updated for the current user and the feed only gets updated when the page is focused. How do I go about this?