Au 04 - Mobile - React Native - Estilizando Header e BottomNav - Mestres BEGIN

Nesta aula, exploramos como criar componentes de navegação estilizados com ícones SVG e suporte a temas dinâmicos em React Native.

Configuração de Ícones SVG

Utilizamos react-native-svg para integrar ícones vetoriais:

Instalação do pacote:
```
1npm install react-native-svg
```
Conversão de SVG para componente React usando SVGR Playground

Importação dos ícones convertidos:

1import HomeIcon from "./components/icons/HomeIcon";

Estrutura de Navegação

Configuramos o Stack Navigation como base da navegação:

1import { createStackNavigator } from "@react-navigation/stack";
2const Stack = createStackNavigator();
3function AppNavigator() {
4    return (
5        <Stack.Navigator initialRouteName="Home">
6            <Stack.Screen name="Home" component={HomeScreen} />
7            <Stack.Screen name="Profile" component={ProfileScreen} />
8            <Stack.Screen name="Settings" component={SettingsScreen} />
9        </Stack.Navigator>
10    );
11}

Implementação do Header Personalizado

Criamos um componente Header reutilizável:

1function CustomHeader({ title }) {
2    const { colors } = useTheme();
3    return (
4        <View style={[styles.header, { backgroundColor: colors.primary }]}>
5            <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
6            <SearchIcon width={24} height={24} fill={colors.text} />
7        </View>
8    );
9}

Sistema de Temas Dinâmicos

Criamos dois temas e os disponibilizamos via Context API:

Definição dos temas

const themes = {
    light: {
        primary: "#6200ee",
        background: "#ffffff",
        text: "#000000",
        // outras cores
    },
    dark: {
        primary: "#bb86fc",
        background: "#121212",
        text: "#ffffff",
        // outras cores
    }
};

Criação do ThemeContext

1const ThemeContext = createContext();
2function ThemeProvider({ children }) {
3    const [theme, setTheme] = useState("light");
4    const toggleTheme = () => {
5        setTheme(prev => prev === "light" ? "dark" : "light");
6    };
7    return (
8        <ThemeContext.Provider value={{ colors: themes[theme], toggleTheme }}>
9            {children}
10        </ThemeContext.Provider>
11    );
12}

Bottom Navigation Personalizável

Implementação com ícones e suporte a temas:

1function BottomNav() {
2    const { colors } = useTheme();
3    return (
4        <View style={[styles.navContainer, { backgroundColor: colors.primary }]}>
5            <TouchableOpacity style={styles.navItem}>
6                <HomeIcon width={24} height={24} fill={colors.text} />
7                <Text style={{ color: colors.text }}>Home</Text>
8            </TouchableOpacity>
9            {/* Outros itens de navegação */}
10        </View>
11    );
12}

Estilização Consistente

StyleSheet para os componentes:

1const styles = StyleSheet.create({
2    header: {
3        height: 56,
4        flexDirection: "row",
5        alignItems: "center",
6        justifyContent: "space-between",
7        paddingHorizontal: 16,
8        elevation: 4,
9    },
10    title: {
11        fontSize: 20,
12        fontWeight: "bold",
13    },
14    navContainer: {
15        flexDirection: "row",
16        height: 56,
17        alignItems: "center",
18        justifyContent: "space-around",
19    },
20    navItem: {
21        alignItems: "center",
22        justifyContent: "center",
23    },
24});