RxJS + Firestore + React hooks basics

1.rxjs-firestore.js

import { Observable, combineLatest } from 'rxjs'
import { startWith } from 'rxjs/operators'
import { useEffect, useState } from 'react'

export const docData = doc => {
  const data = doc.data()
  const idKey = data && data.id ? 'firebaseId' : 'id' // if original data contains an id..

  return {
    ...data,
    [idKey]: doc.id
  }
}

export const ObservableFromRef = ref => {
  return new Observable(subscriber => {
    const unsubscribe = ref.onSnapshot(snapshot => subscriber.next(snapshot))
    return () => unsubscribe()
  })
}

export const useStream = (stream, initialValue = null) => {
  const [current, setCurrent] = useState(initialValue)

  useEffect(() => {
    const sub = stream.subscribe(setCurrent)
    return () => sub.unsubscribe()
  }, [])

  return current
}

2.users.js

import RNFirebase from '@react-native-firebase/app'

import { Observable, combineLatest } from 'rxjs'
import { shareReplay, map } from 'rxjs/operators'

import { docData, ObservableFromRef } from './utils'

const ObservableMap = new Map()
const dbRef = RNFirebase.firestore().collection('users')

export const allUsers = () => ObservableFromRef(dbRef).pipe(
  map(snapshot => snapshot.docs),
  map(docs => docs.map(docData)),
  shareReplay(1)
)

export const user = id => {
  if (!ObservableMap.has(id)) ObservableMap.set(id, ObservableFromRef(dbRef.doc(id)))

  return ObservableMap.get(id).pipe(
    map(doc => docData(doc)),
    shareReplay(1)
  )
}

3.UserView.js

import { ScrollView, Text } from 'react-native'

import { useStream } from './streams/utils'
import { allUsers } from './streams/users'

import { UserRow, UserDetail } from './components/Users'

export const UserList = props => {
  const users = useStream(allUsers(), [])

  return (
    <ScrollView>
    { users.length > 0 
      ? users.map(UserRow) 
      : <Text>No users exist.</Text> 
    }
    </ScrollView>
  )
}

export const UserDetail = ({ id }) => {
  const user = useStream(user(id), null)
  return (
    { user 
      ? <UserDetail user={user} />
      : <Text>No user found.</Text>
    }
  )
}