React Native paper BottomNavigation: How to create stack for each Tab?

[abdulraufdev]

React Native paper BottomNavigation: How to create stack for each Tab?

I have an expo react native app using react-native-paper for bottom tabs. I want to create a stack for each of my tabs for nested navigation.
For instance, see the sitemap:

(tabs)

home

_layout.tsx (stack layout)
index.tsx
createExpense.tsx

budgets

...

_layout.tsx (tabs layout)

_layout.tsx (stack layout)

The Tabs layout code is here:

import * as React from 'react';
import { BottomNavigation } from 'react-native-paper';

import Home from './home/createExpensePage'
import Settings from './settings/settings'
import Reports from './reports/reports'
import Budget from './budget/budget'
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import Octicons from '@expo/vector-icons/Octicons';

type renderIcon = {
  route: { library: any, focusedIcon: string },
  focused: boolean,
  color: string,
}

const HomeRoute = () => <Home/>;

const SettingsRoute = () => <Settings/>;

const ReportsRoute = () => <Reports/>;

const BudgetRoute = () => <Budget/>;

const TabsLayout = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'home', title: 'Home', focusedIcon: 'home', library: MaterialCommunityIcons },
    { key: 'reports', title: 'Reports', focusedIcon: 'analytics', library: MaterialIcons },
    { key: 'budget', title: 'Budget', focusedIcon: 'credit-card', library: Octicons },
    { key: 'settings', title: 'Settings', focusedIcon: 'cog', library: MaterialCommunityIcons },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    home: HomeRoute,
    reports: ReportsRoute,
    budget: BudgetRoute,
    settings: SettingsRoute,
  });

  const renderIcon = ({ route, focused, color } : renderIcon) => {
    const { library: IconComponent} = route;
    return <IconComponent name={route.focusedIcon} size={24} color={color} />;
  };

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
      renderIcon={renderIcon}
    />
    
  );
};
export default TabsLayout;

The stack layout for home route is here:

import { Stack } from 'expo-router'
import React from 'react'

const HomeLayout = () => {
  return (
    <Stack />
  )
}

export default HomeLayout

Problem is that the home tab is not navigating to anywhere in its stack.

Home page code:

import { View, Image, StyleSheet } from 'react-native'
import { Text } from 'react-native-paper'
import { useEffect, useState } from 'react'
import { useTheme, Button } from 'react-native-paper'
import {fetchExpensesORIncomes } from '@/database/myDBModules'
import { Expense } from '@/database/schemas/Expense'
import { Income } from '@/database/schemas/Income'
import { Link, router } from 'expo-router'

const  illus = require('@/assets/images/emptypage/Fast-Internet.png');

const home = () => {
  const theme = useTheme();
  const [expenses, setExpenses] = useState<Expense[] | Income[]>([]);
  useEffect(()=>{
    fetchExpensesORIncomes('expenses').then((data)=>{
    setExpenses(data);
    })
  });

  return (
    <View style={{backgroundColor: theme.colors.background, flex:1}}>
      <View style={{flex: 1, justifyContent: 'center', alignItems:'center'}}>
        {expenses.length == 0 ? 
        <View>
          <Image source={illus} style={{width: 360, height: 360}}/>
          <Text style={styles.title}>Start your journey by recording what you spent today.</Text>
          <Link href='/(app)/(tabs)/createExpensePage/dummy'>
            Click me 
          </Link>
          
          </View> :
            expenses.map((expense: Expense | Income, index: number) => {
              return (
                <View key={index} style={{backgroundColor: theme.colors.surface, width: '90%', padding: 10, margin: 10, borderRadius: 10}}>
                  <Text style={{color: theme.colors.onBackground}}>{expense.description}</Text>
                  <Text style={{color: theme.colors.onBackground}}>{expense.amount}</Text>
                </View>
              )
            })
          }
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  title:{
    fontSize: 24,
    fontWeight: 'bold',
  },
  btn:{
    borderRadius: 4,
    marginTop: 20,
    paddingVertical: 4,
}
})

export default home

Would appreciate your advice.

[relez]

Hi @abdulraufedits check this link:

https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar

[lukewalczak]

Hey @abdulraufdev, I recommend checking the guide for integrating BottomNavigation with react-navigation. Also, take a look at the BottomNavigationBar component and its [usage](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar/#usage example.