File Structure

1Expo Firebase Starter
2├── assets ➡️ All static assets, includes app logo
3├── components ➡️ All re-suable UI components for form screens
4│   └── Button.js ➡️ Custom Button component using Pressable, comes with two variants and handles opacity
5│   └── TextInput.js ➡️ Custom TextInput component that supports left and right cons
6│   └── Icon.js ➡️ Icon component
7│   └── FormErrorMessage.js ➡️ Component to display server errors from Firebase
8│   └── LoadingIndicator.js ➡️ Loading indicator component
9│   └── Logo.js ➡️ Logo component
10│   └── View.js ➡️ Custom View component that supports safe area views
11├── hooks ➡️ All custom hook components
12│   └── useTogglePasswordVisibility.js ➡️ A custom hook that toggles password visibility on a TextInput component on a confirm password field
13├── config ➡️ All configuration files
14│   └── firebase.js ➡️ Configuration file to initialize firebase with firebaseConfig and auth
15│   └── images.js ➡️ Require image assets, reusable values across the app
16│   └── theme.js ➡️ Default set of colors, reusable values across the app
17├── providers ➡️ All custom providers that use React Context API
18│   └── AuthenticatedUserProvider.js ➡️ An Auth User Context component that shares Firebase user object when logged-in
19├── navigation
20│   └── AppStack.js ➡️ Protected routes such as Home screen
21│   └── AuthStack.js ➡️ Routes such as Login screen, when the user is not authenticated
22│   └── RootNavigator.js ➡️ Switch between Auth screens and App screens based on Firebase user logged-in state
23├── screens
24│   └── ForgotPassword.js ➡️ Forgot Password screen component
25│   └── HomeScreen.js ➡️ Protected route/screen component
26│   └── LoginScreen.js ➡️ Login screen component
27│   └── SignupScreen.js ➡️ Signup screen component
28├── App.js ➡️ Entry Point for Mobile apps, wrap all providers here
29├── app.config.js ➡️ Expo config file
30└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)