text: import React, { Component } from "react";
  import { View } from "react-native";
  import { NavigationContainer } from "@react-navigation/native";
  import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  import Ionicons from "react-native-vector-icons/Ionicons";
  
  import TransactionScreen from "../screens/Transaction";
  import SearchScreen from "../screens/Search";
  
  const Tab = createBottomTabNavigator();
  
  export default class BottomTabNavigator extends Component {
    render() {
      return (
        <NavigationContainer>
          <Tab.Navigator
            screenOptions={({ route }) => ({
              tabBarIcon: ({ focused, color, size }) => {
                let iconName;
  
                if (route.name === "Transacción") {
                  iconName = "book";
                } else if (route.name === "Buscar") {
                  iconName = "search";
                }
  
                //Puedes devolver cualquier componente aquí
                return (
                  <Ionicons
                    name={iconName}
                    size={size}
                    color={color}
                    size={size}
                  />
                );
              }
            })}
            tabBarOptions={{
              activeTintColor: "#FFFFFF",
              inactiveTintColor: "black",
              style: {
                height: 130,
                borderTopWidth: 0,
                backgroundColor: "#5653d4"
              },
              labelStyle: {
                fontSize: 20,
                fontFamily: "Rajdhani_600SemiBold"
              },
              labelPosition: "beside-icon",
              tabStyle: {
                marginTop: 25,
                marginLeft: 10,
                marginRight: 10,
                borderRadius: 30,
                borderWidth: 2,
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#5653d4"
              }
            }}
          >
            <Tab.Screen name="Transacción" component={TransactionScreen} />
            <Tab.Screen name="Buscar" component={SearchScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }
  }
  