Function Main

example/src/components/App/Main.tsx:15–72

()

const Tab = createBottomTabNavigator<MainScreenParamList>();

export const Main = () => {
  const {
    isInboxTab,
    returnToInboxTrigger,
    setIsInboxTab,
    setReturnToInboxTrigger,
  } = useIterableApp();

  return (
    <>
      <Tab.Navigator
        screenOptions={({ route }) => {
          const iconName = routeIcon[route.name];
          return {
            tabBarIcon: (props) => getIcon(iconName as Route, props),
            tabBarActiveTintColor: colors.brandPurple,
            tabBarInactiveTintColor: colors.textSecondary,
            headerShown: false,
          };
        }}
      >
        <Tab.Screen
          name={Route.Inbox}
          component={Inbox}
          listeners={() => ({
            tabPress: () => {
              if (isInboxTab) {
                setReturnToInboxTrigger(!returnToInboxTrigger);
              }
              setIsInboxTab(true);
            },
          })}
        />
        <Tab.Screen
          name={Route.Embedded}
          component={Embedded}
          listeners={() => ({
            tabPress: () => setIsInboxTab(false),
          })}
        />
        <Tab.Screen
          name={Route.Commerce}
          component={Commerce}
          listeners={() => ({
            tabPress: () => setIsInboxTab(false),
          })}
        />
        <Tab.Screen
          name={Route.User}
          component={User}
          listeners={() => ({
            tabPress: () => setIsInboxTab(false),
          })}
        />
      </Tab.Navigator>
    </>
  );
};