Barra de navegações com animações, em React Native

Criando um projeto pessoal, me deparei com a necessidade de fazer uma barra de navegação para meu app, com isso me veio a idéia de pesquisar uma forma de adicionar isso na minha aplicação e deixá-la muito mais profissional. Mostrarei a você neste tutorial como criar essa barra de navegação inferior personalizada e animada usando o React Navigation.

Criando o projeto -
Assim como no título deste artigo informa,antes de começarmos, é necessário ter o ambiente de desenvolvimento do React Native configurado em sua máquina. Em seguida, você pode criar um novo projeto React Native executando o seguinte comando:

npx create-expo-app --template

A opção acima irá fornecer escolhas como aplicação por padrão Blank, Blank com Typescript e outros, selecione a padrão. O nome ficará a seu critério. Chamarei meu projeto de TabSlide.

Devemos também instalar as seguintes dependências:

npm install @react-navigation/native

npm install @react-navigation/bottom-tabs

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Feito isso, podemos começar a criar a barra de menu criando o seguinte componente:

import React from "react";
import { View } from "react-native";
import { blue, grey } from "../../styles";
import { AntDesign } from "@expo/vector-icons";
type Props = {
  iconName: string;
  isCurrent?: boolean;
};
export const BottomMenuItem = ({ iconName, isCurrent }: Props) => {
  return (
    <View
      style={{
        height: "100%",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <AntDesign
        name={iconName}
        size={32}
        style={{ color: isCurrent ? blue : grey }}
      />
    </View>
  );
};

Você pode ajustar este componente como quiser. Utilizamos um iconName para exibir o ícone correto e uma propriedade isCurrent que altera a cor do ícone se estiver selecionado no momento. Para indicar se em que parte aba da barra de navegação estaremos.

Customizando o componente TabBar -

import React, { useState } from "react";
import {
  View,
  TouchableOpacity,
  Dimensions,
  StyleSheet,
} from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { BottomMenuItem } from "./BottomMenuItem";
import { blue } from "../../styles";
export const TabBar = ({
  state,
  descriptors,
  navigation,
}: BottomTabBarProps) => {
  const totalWidth = Dimensions.get("window").width;
  const tabWidth = totalWidth / state.routes.length;
  return (
    <View style={[style.tabContainer, { width: totalWidth }]}>
      <View style={{ flexDirection: "row" }}>
        <View style={style.slider}/>
{state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;
const isFocused = state.index === index;
const onPress = () => {
            const event = navigation.emit({
              type: "tabPress",
              target: route.key,
              canPreventDefault: true,
            });
if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
const onLongPress = () => {
            navigation.emit({
              type: "tabLongPress",
              target: route.key,
            });
          };
return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityStates={isFocused ? ["selected"] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{ flex: 1 }}
              key={index}
            >
              <BottomMenuItem
                iconName={label.toString()}
                isCurrent={isFocused}
              />
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
};
const style = StyleSheet.create({
  tabContainer: {
    height: 60,
    shadowOffset: {
      width: 0,
      height: -1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4.0,
    backgroundColor: "white",
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    elevation: 10,
    position: "absolute",
    bottom: 0,
  },
  slider: {
    height: 5,
    position: "absolute",
    top: 0,
    left: 10,
    backgroundColor: blue,
    borderRadius: 10,
    width: 50
},
});

Fizemos a importação do componente de criação da barra, e adicionamos uma customização a ele no caso acima.

Conectando o TabBar personalizado ao sistema de navegação -

import React from "react";
import {
  createBottomTabNavigator,
  BottomTabBarProps,
} from "@react-navigation/bottom-tabs";
import { TabBar } from "./TabBar";
import { AppsScreen } from "../../screens/AppsScreen";
import { DashboardScreen } from "../../screens/DashboardScreen";
import { GroupScreen } from "../../screens/GroupScreen";
import { ProfileScreen } from "../../screens/ProfileScreen";
import { useSafeArea } from "react-native-safe-area-context";
import { View } from "react-native";
export const BottomMenu = () => {
  const Tab = createBottomTabNavigator();
  return (
    <View style={{ flex: 1, position: "relative"}}>
      <Tab.Navigator
        tabBar={(props: BottomTabBarProps) => <TabBar {...props} />}
      >
        <Tab.Screen name="search1" component={AppsScreen} />
        <Tab.Screen name="dashboard" component={DashboardScreen} />
        <Tab.Screen name="profile" component={GroupScreen} />
        <Tab.Screen name="user" component={ProfileScreen} />
      </Tab.Navigator>
      {useSafeArea().bottom > 0 && (
        <View
          style={{
            height: useSafeArea().bottom - 5,
            backgroundColor: "white",
          }}
        />
      )}
    </View>
  );
};

Acima foi feita conexão entre as abas onde cada aba será uma nova navegação clicável.

Nossa aplicação ficará parecida com isso:

Neste artigo você aprendeu como criar barras de navegação animadas, espero que ele tenha o ajudado. O restante de criação ficará por sua criatividade. Obrigado por ler.