2️⃣ Chapter 2.3: Unify Native Stack

Author: nandorojo

apps/expo/app/(tabs)/(home).tsx

@@ -1,21 +1,9 @@
-import { NativeStack as Stack } from 'expo-router'
 import { useDripsyTheme } from 'dripsy'
+import { Stack } from '../../src/stack'
 
-export default function MyStack({ children }) {
-  const { colors } = useDripsyTheme().theme
+export default function HomeTab({ children }) {
   return (
-    <Stack
-      screenOptions={{
-        headerStyle: {
-          backgroundColor: colors.$background2,
-        },
-        headerTitleStyle: {
-          color: colors.$text,
-        },
-        headerTintColor: '#D864D8',
-        headerShadowVisible: false,
-      }}
-    >
+    <Stack>
       <Stack.Screen
         name="index"
         options={{

apps/expo/app/(tabs)/users.tsx

@@ -1,21 +1,9 @@
-import { NativeStack as Stack } from 'expo-router'
 import { useDripsyTheme } from 'dripsy'
+import { Stack } from '../../src/stack'
 
-export default function MyStack({ children }) {
-  const { colors } = useDripsyTheme().theme
+export default function UserTab({ children }) {
   return (
-    <Stack
-      screenOptions={{
-        headerStyle: {
-          backgroundColor: colors.$background2,
-        },
-        headerTitleStyle: {
-          color: colors.$text,
-        },
-        headerTintColor: '#D864D8',
-        headerShadowVisible: false,
-      }}
-    >
+    <Stack>
       <Stack.Screen
         name="index"
         options={{

apps/expo/package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "@react-native-firebase/app": "^15.7.0",
+    "@react-native-firebase/auth": "^15.7.0",
     "app": "*",
     "expo": "46.0.13",
     "expo-router": "^0.0.25",

apps/expo/src/stack.tsx

@@ -0,0 +1,24 @@
+import { NativeStack } from 'expo-router'
+import { useDripsyTheme } from 'dripsy'
+
+export function Stack({ children }) {
+  const { colors } = useDripsyTheme().theme
+  return (
+    <NativeStack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: colors.$background2,
+        },
+        headerTitleStyle: {
+          color: colors.$text,
+        },
+        headerTintColor: '#D864D8',
+        headerShadowVisible: false,
+      }}
+    >
+      {children}
+    </NativeStack>
+  )
+}
+
+Stack.Screen = NativeStack.Screen

packages/app/features/auth/firebase/index.native.ts

@@ -0,0 +1,17 @@
+import Constants from 'expo-constants'
+import { Firebase } from './types'
+
+const isExpoGo = Constants.appOwnership == 'expo'
+
+let exports: Firebase
+
+// here we check if the user has properly set up their native app
+// if not, we fall back to firebase JS
+
+if (isExpoGo) {
+  exports = require('./init.web')
+} else {
+  exports = require('./init.native')
+}
+
+module.exports = exports

packages/app/features/auth/firebase/index.ts

@@ -0,0 +1 @@
+export * from './init.web'

packages/app/features/auth/firebase/init.native.ts

@@ -0,0 +1,17 @@
+import auth from '@react-native-firebase/auth'
+import { Firebase } from './types'
+
+const getIsSignedIn: Firebase['getIsSignedIn'] = () =>
+  Boolean(auth().currentUser)
+
+const signOut: Firebase['signOut'] = () => auth().signOut()
+
+const signInAnonymously: Firebase['signInAnonymously'] = async () => {
+  return (await auth().signInAnonymously()).user
+}
+
+const onIdTokenChanged: Firebase['onIdTokenChanged'] = (callback) => {
+  return auth().onIdTokenChanged(callback)
+}
+
+export { getIsSignedIn, signOut, signInAnonymously, onIdTokenChanged }

packages/app/features/auth/firebase/init.web.ts

@@ -0,0 +1,37 @@
+import { initializeApp } from 'firebase/app'
+import {
+  initializeAuth,
+  browserPopupRedirectResolver,
+  browserLocalPersistence,
+  signInAnonymously as signInAnonymouslyFirebase,
+  onIdTokenChanged as onIdTokenChangedFirebase,
+} from 'firebase/auth'
+import { Firebase } from './types'
+
+let auth: ReturnType<typeof initializeAuth>
+
+if (typeof window !== 'undefined') {
+  const firebaseApp = initializeApp({
+    // REPLACE THIS WITH YOUR AUTH CONFIG
+  })
+
+  auth = initializeAuth(firebaseApp, {
+    popupRedirectResolver: browserPopupRedirectResolver,
+    persistence: browserLocalPersistence,
+  })
+}
+
+const getIsSignedIn: Firebase['getIsSignedIn'] = () =>
+  Boolean(auth?.currentUser)
+
+const signOut: Firebase['signOut'] = () => auth.signOut()
+
+const signInAnonymously: Firebase['signInAnonymously'] = async () => {
+  return (await signInAnonymouslyFirebase(auth)).user
+}
+
+const onIdTokenChanged: Firebase['onIdTokenChanged'] = (callback) => {
+  return onIdTokenChangedFirebase(auth, callback)
+}
+
+export { getIsSignedIn, signInAnonymously, signOut, onIdTokenChanged }

packages/app/features/auth/firebase/types.ts

@@ -0,0 +1,10 @@
+import type * as firebase from 'firebase/auth'
+
+export type Firebase = {
+  getIsSignedIn: () => boolean
+  signInAnonymously: () => Promise<Pick<firebase.User, 'uid'>>
+  signOut: () => Promise<void>
+  onIdTokenChanged: (
+    callback: (user: { uid: string } | null) => void
+  ) => () => void
+}

packages/app/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "dripsy": "^3.6.0",
     "expo-linking": "^3.0.0",
+    "firebase": "^9.11.0",
     "moti": "0.19.0-alpha.6",
     "react-native-reanimated": "2.9.1",
     "solito": "latest"