Merge branch 'main' of github.com:BrosSquad/go-collect

rn-app/App.tsx

@@ -23,15 +23,15 @@ export default function App() {
     <>
       <QueryClientProvider client={queryClient}>
         <IconRegistry icons={EvaIconsPack} />
-        <ApplicationProvider
-          {...eva}
-          theme={{ ...eva[colorScheme], ...goCollectTheme }}
-        >
-          <SafeAreaProvider>
+        <SafeAreaProvider>
+          <ApplicationProvider
+            {...eva}
+            theme={{ ...eva[colorScheme], ...goCollectTheme }}
+          >
             <Navigation colorScheme={colorScheme} />
             <StatusBar />
-          </SafeAreaProvider>
-        </ApplicationProvider>
+          </ApplicationProvider>
+        </SafeAreaProvider>
       </QueryClientProvider>
     </>
   )

rn-app/assets/lottie/trash.json

@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.9","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":59.0000024031193,"w":800,"h":800,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Dustbin Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[17]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":34,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[-0.133]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":38,"s":[3.903]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":41,"s":[-2.544]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":43,"s":[6.092]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":46,"s":[1.046]},{"t":49.0000019958109,"s":[4]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[401,317,0],"to":[0,4.167,0],"ti":[0,9.167,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[401,342,0],"to":[0,-9.167,0],"ti":[0,16,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[401,262,0],"to":[0,-16,0],"ti":[0,-0.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[401,246,0],"to":[0,0.333,0],"ti":[0,-11.833,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":34,"s":[401,264,0],"to":[0,1.892,0],"ti":[0,-2.76,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[401,290.067,0],"to":[0,1.477,0],"ti":[0,-1.293,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":38,"s":[401,313.215,0],"to":[0,1.023,0],"ti":[0,-0.643,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":41,"s":[401,299.697,0],"to":[0,1.529,0],"ti":[0,-1.37,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":43,"s":[401,314.025,0],"to":[0,2.322,0],"ti":[0,0.406,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":46,"s":[401,309.406,0],"to":[0,-0.377,0],"ti":[0,-2.237,0]},{"t":49.0000019958109,"s":[401,317,0]}],"ix":2},"a":{"a":0,"k":[201.676,144.693,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":5,"s":[195,195,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[195,195,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":41,"s":[195,196,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":43,"s":[195,199.75,100]},{"t":49.0000019958109,"s":[195,195,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[-0.024,-0.42],[0,0],[-0.422,0.025],[0,0],[0.033,0.419],[0,0],[0.429,-0.029]],"o":[[0,0],[0,0],[0,0],[0,0],[-0.419,0.029],[0,0],[0.03,0.418],[0,0],[0.42,-0.029],[0,0],[-0.025,-0.418],[0,0]],"v":[[10.142,0.779],[9.253,-8.87],[-10.901,-7.044],[-10.061,2.126],[-37.766,3.967],[-38.482,4.782],[-38.253,8.133],[-37.436,8.846],[37.764,3.838],[38.474,3.015],[38.243,-0.335],[37.426,-1.046]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2549019607843137,0.8509803921568627,0.5333333333333333,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[201.368,140.49],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":59.0000024031193,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Dustbin Outlines","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,200,0],"ix":2},"a":{"a":0,"k":[200,200,0],"ix":1},"s":{"a":0,"k":[99.398,99.398,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[1.197,0],[0,0],[0,1.069],[0,0],[-1.196,0],[0,0],[0,-1.069]],"o":[[0,1.069],[0,0],[-1.196,0],[0,0],[0,-1.069],[0,0],[1.197,0],[0,0]],"v":[[17.567,30.003],[15.389,31.949],[14.698,31.949],[12.53,30.003],[12.53,-31.128],[14.698,-33.068],[15.389,-33.068],[17.567,-31.128]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[1.196,0],[0,0],[0,1.069],[0,0],[-1.204,0],[0,0],[0,-1.07]],"o":[[0,1.069],[0,0],[-1.204,0],[0,0],[0,-1.07],[0,0],[1.196,0],[0,0]],"v":[[2.457,30.219],[0.296,32.158],[-0.395,32.158],[-2.564,30.219],[-2.564,-30.911],[-0.395,-32.861],[0.296,-32.861],[2.457,-30.911]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[1.195,0],[0,0],[0,1.069],[0,0],[-1.185,0],[0,0],[0,-1.068]],"o":[[0,1.069],[0,0],[-1.185,0],[0,0],[0,-1.068],[0,0],[1.195,0],[0,0]],"v":[[-12.636,30.426],[-14.813,32.368],[-15.506,32.368],[-17.673,30.426],[-17.673,-30.706],[-15.506,-32.643],[-14.813,-32.643],[-12.636,-30.706]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[1.682,0],[0,0],[-0.123,-1.683],[0,0],[-1.681,-0.017],[0,0],[-0.117,1.674],[0,0]],"o":[[0,0],[-1.698,0],[0,0],[0.123,1.682],[0,0],[1.689,0.017],[0,0],[0.116,-1.683]],"v":[[32.23,-46.814],[-32.218,-46.814],[-35.289,-43.747],[-28.916,43.174],[-25.85,46.236],[26.271,46.798],[29.33,43.734],[35.296,-43.747]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2549019607843137,0.8509803921568627,0.5333333333333333,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[200.894,198.909],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":59.0000024031193,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"Dustbin Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[-8]},{"i":{"x":[0.667],"y":[0.82]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[-0.478]},"t":35,"s":[-2.408]},{"t":38.0000015477717,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[399,395,0],"to":[0,2.5,0],"ti":[0,3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[399,410,0],"to":[0,-3.333,0],"ti":[0,4.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[399,375,0],"to":[0,-4.667,0],"ti":[0,-3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":29,"s":[399,382,0],"to":[0,3.333,0],"ti":[0,-2.167,0]},{"t":38.0000015477717,"s":[399,395,0]}],"ix":2},"a":{"a":0,"k":[200,200,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":5,"s":[166,166,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[166,136,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":24,"s":[166,168,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":29,"s":[166,166,100]},{"t":38.0000015477717,"s":[166,166,100]}],"ix":6}},"ao":0,"ip":0,"op":59.0000024031193,"st":0,"bm":0}],"markers":[]}

rn-app/components/Logo.tsx

@@ -0,0 +1,30 @@
+import { Text } from '@ui-kitten/components'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { goCollectTheme } from '../go-collect-theme'
+
+type LogoProps = {
+  style?: ViewStyle
+}
+
+const Logo = ({ style }: LogoProps) => {
+  return (
+    <View style={StyleSheet.flatten([styles.container, style])}>
+      <Text category="h1" style={styles.go}>
+        Go
+      </Text>
+      <Text category="h1">Collect</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  go: {
+    color: goCollectTheme['color-primary-400'],
+  },
+  collect: {},
+})
+
+export default Logo

rn-app/components/ScreenLayout.tsx

@@ -0,0 +1,30 @@
+import { Layout } from '@ui-kitten/components'
+import { ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+type ScreenLayoutProps = {
+  children: JSX.Element
+  style?: ViewStyle
+}
+
+const PADDING_X = 24
+
+const ScreenLayout = ({ children, style }: ScreenLayoutProps) => {
+  const { top, bottom, left, right } = useSafeAreaInsets()
+  return (
+    <Layout
+      style={{
+        flex: 1,
+        paddingTop: top,
+        paddingBottom: bottom,
+        paddingLeft: PADDING_X + left,
+        paddingRight: PADDING_X + right,
+        ...style,
+      }}
+    >
+      {children}
+    </Layout>
+  )
+}
+
+export default ScreenLayout

rn-app/components/animations/TrashAnimation.tsx

@@ -0,0 +1,31 @@
+import LottieView from 'lottie-react-native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+const TrashAnimation = () => {
+  return (
+    <View style={styles.animationContainer}>
+      <LottieView
+        autoPlay
+        loop
+        style={{
+          width: 300,
+          height: 300,
+        }}
+        source={require('../../assets/lottie/trash.json')}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  animationContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 50,
+    height: 150,
+    overflow: 'hidden',
+  },
+})
+
+export default TrashAnimation

rn-app/go-collect-theme.ts

@@ -3,6 +3,9 @@ import eva from '@eva-design/eva'
 export const goCollectTheme = {
   ...eva,
 
+  googleRed: '#DB4437',
+  facebookBlue: '#4267B2',
+
   'color-primary-100': '#CEFBD7',
   'color-primary-200': '#9EF7BA',
   'color-primary-300': '#6BE89E',

rn-app/navigation/AppNavigator.tsx

@@ -0,0 +1,59 @@
+import { FontAwesome } from '@expo/vector-icons'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import * as React from 'react'
+import { Pressable } from 'react-native'
+import Colors from '../constants/Colors'
+import useColorScheme from '../hooks/useColorScheme'
+import TabOneScreen from '../screens/TabOneScreen'
+import TabTwoScreen from '../screens/TabTwoScreen'
+import { RootTabParamList, RootTabScreenProps } from '../types'
+import TabBarIcon from './utils'
+
+const BottomTab = createBottomTabNavigator<RootTabParamList>()
+
+function AppNavigator() {
+  const colorScheme = useColorScheme()
+
+  return (
+    <BottomTab.Navigator
+      initialRouteName="TabOne"
+      screenOptions={{
+        tabBarActiveTintColor: Colors[colorScheme].tint,
+      }}
+    >
+      <BottomTab.Screen
+        name="TabOne"
+        component={TabOneScreen}
+        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Pressable
+              onPress={() => navigation.navigate('Modal')}
+              style={({ pressed }) => ({
+                opacity: pressed ? 0.5 : 1,
+              })}
+            >
+              <FontAwesome
+                name="info-circle"
+                size={25}
+                color={Colors[colorScheme].text}
+                style={{ marginRight: 15 }}
+              />
+            </Pressable>
+          ),
+        })}
+      />
+      <BottomTab.Screen
+        name="TabTwo"
+        component={TabTwoScreen}
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </BottomTab.Navigator>
+  )
+}
+
+export default AppNavigator

rn-app/navigation/AuthNavigator.tsx

@@ -0,0 +1,20 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import * as React from 'react'
+import LoginScreen from '../screens/LoginScreen'
+
+const AuthStack = createNativeStackNavigator()
+
+function AuthNavigator() {
+  return (
+    <AuthStack.Navigator>
+      <AuthStack.Screen
+        name="Login"
+        component={LoginScreen}
+        options={{ headerShown: false }}
+      />
+      {/* Other auth related screens go here */}
+    </AuthStack.Navigator>
+  )
+}
+
+export default AuthNavigator

rn-app/navigation/RootNavigator.tsx

@@ -0,0 +1,25 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import * as React from 'react'
+import AppNavigator from './AppNavigator'
+import AuthNavigator from './AuthNavigator'
+
+const RootStack = createNativeStackNavigator()
+
+function RootNavigator() {
+  const isAuthenticated = false
+  return (
+    <RootStack.Navigator>
+      {isAuthenticated ? (
+        <RootStack.Screen name="App" component={AppNavigator} />
+      ) : (
+        <RootStack.Screen
+          name="Auth"
+          component={AuthNavigator}
+          options={{ headerShown: false }}
+        />
+      )}
+    </RootStack.Navigator>
+  )
+}
+
+export default RootNavigator

rn-app/navigation/index.tsx

@@ -1,107 +1,24 @@
-/**
- * If you are not familiar with React Navigation, refer to the "Fundamentals" guide:
- * https://reactnavigation.org/docs/getting-started
- *
- */
-import { FontAwesome } from '@expo/vector-icons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import * as React from 'react';
-import { ColorSchemeName, Pressable } from 'react-native';
-
-import Colors from '../constants/Colors';
-import useColorScheme from '../hooks/useColorScheme';
-import ModalScreen from '../screens/ModalScreen';
-import NotFoundScreen from '../screens/NotFoundScreen';
-import TabOneScreen from '../screens/TabOneScreen';
-import TabTwoScreen from '../screens/TabTwoScreen';
-import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
-import LinkingConfiguration from './LinkingConfiguration';
-
-export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+} from '@react-navigation/native'
+import * as React from 'react'
+import { ColorSchemeName } from 'react-native'
+import LinkingConfiguration from './LinkingConfiguration'
+import RootNavigator from './RootNavigator'
+
+export default function Navigation({
+  colorScheme,
+}: {
+  colorScheme: ColorSchemeName
+}) {
   return (
     <NavigationContainer
       linking={LinkingConfiguration}
-      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
+    >
       <RootNavigator />
     </NavigationContainer>
-  );
-}
-
-/**
- * A root stack navigator is often used for displaying modals on top of all other content.
- * https://reactnavigation.org/docs/modal
- */
-const Stack = createNativeStackNavigator<RootStackParamList>();
-
-function RootNavigator() {
-  return (
-    <Stack.Navigator>
-      <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
-      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
-      <Stack.Group screenOptions={{ presentation: 'modal' }}>
-        <Stack.Screen name="Modal" component={ModalScreen} />
-      </Stack.Group>
-    </Stack.Navigator>
-  );
-}
-
-/**
- * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
- * https://reactnavigation.org/docs/bottom-tab-navigator
- */
-const BottomTab = createBottomTabNavigator<RootTabParamList>();
-
-function BottomTabNavigator() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <BottomTab.Navigator
-      initialRouteName="TabOne"
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme].tint,
-      }}>
-      <BottomTab.Screen
-        name="TabOne"
-        component={TabOneScreen}
-        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
-          title: 'Tab One',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-          headerRight: () => (
-            <Pressable
-              onPress={() => navigation.navigate('Modal')}
-              style={({ pressed }) => ({
-                opacity: pressed ? 0.5 : 1,
-              })}>
-              <FontAwesome
-                name="info-circle"
-                size={25}
-                color={Colors[colorScheme].text}
-                style={{ marginRight: 15 }}
-              />
-            </Pressable>
-          ),
-        })}
-      />
-      <BottomTab.Screen
-        name="TabTwo"
-        component={TabTwoScreen}
-        options={{
-          title: 'Tab Two',
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-        }}
-      />
-    </BottomTab.Navigator>
-  );
-}
-
-/**
- * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
- */
-function TabBarIcon(props: {
-  name: React.ComponentProps<typeof FontAwesome>['name'];
-  color: string;
-}) {
-  return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />;
+  )
 }

rn-app/navigation/utils.tsx

@@ -0,0 +1,11 @@
+import { FontAwesome } from '@expo/vector-icons'
+import * as React from 'react'
+
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>['name']
+  color: string
+}) {
+  return <FontAwesome size={30} style={{ marginBottom: -3 }} {...props} />
+}
+
+export default TabBarIcon