RN Lez 26: React Navigation — Tab

Docs: Navigation, React Navigation tabs docs

Obiettivi

• Creare Bottom Tab navigator
• Aggiungere icone con @expo/vector-icons
• Combinare Tab + Stack

---

1. Installazione

npm install @react-navigation/bottom-tabs
npx expo install @expo/vector-icons

---

2. Tab Navigator base

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

type TabParamList = {
    Home: undefined;
    Cerca: undefined;
    Profilo: undefined;
};

const Tab = createBottomTabNavigator<TabParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName: keyof typeof Ionicons.glyphMap;
                        if (route.name === 'Home') iconName = focused ? 'home' : 'home-outline';
                        else if (route.name === 'Cerca') iconName = focused ? 'search' : 'search-outline';
                        else iconName = focused ? 'person' : 'person-outline';
                        return <Ionicons name={iconName} size={size} color={color} />;
                    },
                    tabBarActiveTintColor: '#3498db',
                    tabBarInactiveTintColor: 'grey',
                })}
            >
                <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
                <Tab.Screen name="Cerca" component={CercaScreen} options={{ title: 'Cerca' }} />
                <Tab.Screen name="Profilo" component={ProfiloScreen} options={{ title: 'Profilo' }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

---

3. Tab con badge

<Tab.Screen
    name="Notifiche"
    component={NotificheScreen}
    options={{
        tabBarBadge: 3,    // ← mostra "3" sul tab
    }}
/>

---

4. Combinazione Tab + Stack

// HomeStack.js — Stack dentro il tab Home
const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name="Feed" component={FeedScreen} />
            <HomeStack.Screen name="Post" component={PostScreen} />
        </HomeStack.Navigator>
    );
}

// App.js — Tab Navigator con Stack dentro
<Tab.Screen name="Home" component={HomeStackScreen} />

---

5. Tab personalizzato

<Tab.Navigator
    screenOptions={{
        tabBarStyle: {
            backgroundColor: 'white',
            borderTopWidth: 1,
            borderTopColor: '#eee',
            height: 60,
            paddingBottom: 8,
        },
        tabBarLabelStyle: {
            fontSize: 12,
            fontWeight: '600',
        },
    }}
>

---

6. Tabella riassuntiva

Componente	Codice
Tab Navigator	createBottomTabNavigator()
Icone	@expo/vector-icons (Ionicons)
Badge	tabBarBadge: numero
Stack + Tab	Tab contiene Stack al suo interno

---

7. Esercizio

🎯 “App con 3 tab”

Crea un’app con:

1. Tab Home: FlatList di notizie
2. Tab Cerca: TextInput + risultati
3. Tab Profilo: nome, email, foto
4. Icone Ionicons (home, search, person)
5. Tab attivo: blu, inattivo: grigio
6. Tab Home contiene Stack (Feed → Dettaglio notizia)