Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndrewwCO/Panahashi/llms.txt

Use this file to discover all available pages before exploring further.

Panahashi’s navigation is built with React Navigation and composed of two layers: a native stack (RootNavigator) that controls which screens are available based on authentication state, and a bottom tab navigator (MainTabs) that forms the core of the authenticated experience. Both layers are mounted inside a NavigationContainer at the root of App.js, with AuthProvider and CartProvider wrapping the entire tree. RootNavigator is a native stack that reads user and loading from useAuth(). Depending on auth state, it conditionally renders different sets of screens:
StateAccessible screens
Authenticated (user is set)Main (bottom tabs) + all detail/flow screens
Unauthenticated (user is null)Login only
When authenticated, the full screen tree available in the stack is: 
RootNavigator (Stack)
├── Main → MainTabs (Bottom Tab Navigator)
│   ├── Home
│   ├── Bakeries
│   ├── Cart
│   ├── Orders
│   └── Profile
├── BakeryDetail
├── ProductDetail
├── Search
├── Payment
├── OrderConfirmation
├── OrderDetail
├── Loyalty
└── Favorites
The detail and flow screens (BakeryDetail, Payment, etc.) sit in the stack above Main so they can overlay the tab bar when pushed — standard React Navigation layering for modal-style flows.

​
Bottom tab bar

MainTabs renders five tabs. All headers are hidden (headerShown: false) so each screen owns its own header if needed.
Tab nameLabelRoute
HomeInicioHomeScreen
BakeriesPanaderíasBakeriesScreen
CartCarritoCartScreen
OrdersPedidosOrdersScreen
ProfilePerfilProfileScreen
Tab bar colors are configured via screenOptions:
  • Active tint: #F97316 (Panahashi orange)
  • Inactive tint: #aaa
  • Height: 65px, with paddingBottom: 10 and paddingTop: 6

​
Cart badge

The Cart tab uses a custom CartBadge component instead of a plain icon. It reads itemCount from useCart() and renders a count bubble when the cart is non-empty: 
function CartBadge({ focused }) {
  const { itemCount } = useCart();
  return (
    <View>
      <Text style={{ fontSize: 22 }}>🛒</Text>
      {itemCount > 0 && (
        <View style={{ position: 'absolute', top: -4, right: -6, backgroundColor: '#F97316', ... }}>
          <Text style={{ color: '#fff', fontSize: 9, fontWeight: '800' }}>{itemCount}</Text>
        </View>
      )}
    </View>
  );
}
The badge is positioned absolutely relative to the cart emoji, offset slightly up and to the right (top: -4, right: -6). It uses CartContext’s itemCount, which is the sum of all item quantities in the current cart.
CartBadge relies on CartProvider being mounted above NavigationContainer in the tree. The provider order in App.js — AuthProvider → CartProvider → NavigationContainer — ensures this is always satisfied.

​
Auth guard

RootNavigator implements the auth guard pattern directly in JSX using a conditional block: 
function RootNavigator() {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFBF5' }}>
        <ActivityIndicator size="large" color="#F97316" />
      </View>
    );
  }

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {user ? (
        <>
          <Stack.Screen name="Main" component={MainTabs} />
          {/* ...detail screens */}
        </>
      ) : (
        <Stack.Screen name="Login" component={LoginScreen} />
      )}
    </Stack.Navigator>
  );
}
While loading is true (before Firebase’s onAuthStateChanged fires for the first time), a centered ActivityIndicator is shown. This prevents a flash of the Login screen before the persisted session is restored. Once loading resolves, the stack renders either the authenticated screens or the Login screen — there is no manual redirect needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us