Skip to content

App initialization flow

Jump to bottom
Christopher David edited this page Jun 12, 2023 · 30 revisions
  • 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
Clone this wiki locally