import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import * as React from "react"; import TabBarIcon from "../components/TabBarIcon"; import PayByLinkScreen from "../screens/PayByLinkScreen"; import ComponentListScreen from "../screens/ComponentListScreen"; const BottomTab = createBottomTabNavigator(); const INITIAL_ROUTE_NAME = "PayByLink"; export default function BottomTabNavigator({ navigation, route }) { // Set the header title on the parent stack navigator depending on the // currently active tab. Learn more in the documentation: // https://reactnavigation.org/docs/en/screen-options-resolution.html navigation.setOptions({ headerTitle: getHeaderTitle(route) }); return ( <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}> <BottomTab.Screen name="PayByLink" component={PayByLinkScreen} options={{ title: "Pay by Link", tabBarIcon: ({ focused }) => ( <TabBarIcon focused={focused} name="logo-buffer" /> ), }} /> <BottomTab.Screen name="Components" component={ComponentListScreen} options={{ title: "API only", tabBarIcon: ({ focused }) => ( <TabBarIcon focused={focused} name="md-card" /> ), }} /> </BottomTab.Navigator> ); } function getHeaderTitle(route) { const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME; switch (routeName) { case "PayByLink": return "Pay by Link integration"; case "Components": return "Components with API only"; } }