App initialization flow

• index.js - Entry point
  • Loads polyfills isomorphic-webcrypto, text-encoding-polyfill, react-native-url-polyfill, react-native-get-random-values
  • Imports App from ./app/app.tsx and connects to RNBootSplash as IgniteApp
  • Registers the IgniteApp component with react-native and exports App as default
• app/app.tsx - The root component of the application
  • Initializes internationalization (./i18n) and sets up warnings handling (./utils/ignoreWarnings)
  • Manages custom fonts loading via useFonts from expo-font
  • Sets up a safety area for the app using SafeAreaProvider from react-native-safe-area-context
  • Sets up deep linking for the app using Linking from expo-linking and provides a configuration for screens and paths
  • Uses useInitialRootStore hook for initializing and rehydrating the root store of the application
  • Manages navigation state persistence with useNavigationPersistence and uses the state to initialize AppNavigator
  • Sets up an ErrorBoundary to catch and handle any unhandled errors occurring in the app
  • Incorporates RelayProvider for handling data fetching with GraphQL and GestureHandlerRootView for managing user gesture interactions
  • Checks if the app state is ready (fonts loaded, root store rehydrated, navigation state restored), if not, returns null to prevent rendering
  • Once everything is ready, the app renders the AppNavigator inside GestureHandlerRootView, RelayProvider, and ErrorBoundary
  • Also includes setup for Reactotron debugging tool with configurations like clearing on load, monitoring AsyncStorage, and logging the initial state and snapshots
  • Exports the App function as default
• app/navigators/AppNavigator.tsx - Main app navigation configuration
  • Imports necessary modules, components, and screens
  • Defines AppStackParamList type for available routes
  • Creates Stack using createNativeStackNavigator
  • Defines AppStack component
    • Uses observer to make it reactive
    • Fetches isLoggedIn state from userStore
    • Renders screens conditionally based on isLoggedIn state
  • Defines NavigationProps type for navigation component props
  • Defines AppNavigator component
    • Uses observer to make it reactive
    • Retrieves color scheme using useColorScheme
    • Uses useBackButtonHandler to handle back navigation
    • Returns NavigationContainer wrapping AppStack with theme and props
  • Exports AppNavigator component
• app/navigators/TabNavigator.tsx - Tab-based navigation configuration
  • Imports necessary modules, components, and screens
  • Defines DemoTabParamList and DemoTabScreenProps types
  • Creates a Tab using createBottomTabNavigator
  • Defines the TabNavigator component
    • Returns the Tab.Navigator with options
      • Hides the header and tab bar on keyboard
      • Sets the initial route as "Home"
      • Renders three Tab.Screen components for each tab
        • Contacts screen: Renders ContactsScreen with icon
        • Home screen: Renders HomeMessagesScreen with icon
        • Profile screen: Renders ProfileScreen with icon
    • Defines styles for tab icons using StyleSheet.create
  • Exports the TabNavigator component
• app/screens/HomeMessagesScreen.tsx - Home messages screen component
  • Imports necessary modules, components, and hooks
  • Defines colors object for styling
  • Defines HomeMessagesScreen function component
    • Uses observer to make it reactive
    • Retrieves Relay context and channel manager
    • Retrieves channels and private messages from user store
    • Uses useFocusEffect to fetch private messages on focus
    • Defines AI rooms data
    • Combines channels, private messages, and AI rooms data
    • Defines renderItem function to render item components based on kind
    • Returns screen component with sidebar, status bar, and flash list
  • Defines styles using StyleSheet.create
• app/screens/ChatScreen.tsx - Chat screen component
  • Imports necessary modules, components, and hooks
  • Defines ChatScreen function component
    • Uses observer to make it reactive
    • Retrieves Relay context and channel manager
    • Pulls in navigation via hook
    • Retrieves stores and channel from models
    • Defines leaveJoinedChannel function to prompt for leaving channel
    • Defines back function to handle back navigation
    • Uses useLayoutEffect to set navigation options
    • Uses useFocusEffect to handle new messages and subscription
      • Defines handleNewMessage function to handle incoming messages
      • Subscribes to channel updates using channelManager.sub
        • Sets the callback to handleNewMessage to handle new messages
        • Sets a filter to receive messages since the current timestamp
        • Includes the private key if available
      • Unsubscribes from channel updates on cleanup using pool.unsub
    • Uses useEffect to fetch messages
      • Fetches messages for the channel using channel.fetchMessages and channelManager
        • Retrieves messages from the channel by calling getChannel(id) on the channel store
        • Fetches the messages using channel.fetchMessages with the channel manager
    • Defines renderItem function to render message items
    • Returns screen component with header, flash list, and channel message form
  • Defines styles using $ variables and StyleSheet.create