gusta1996
Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Hola como estan, soy desarrollador de software Junior y estoy practicando como hacer aplicaciones modiles con reactive y expo.
y estoy atascado con algo que no me gusta como se ve en android.
CONTEXTO:
tengo un "BottomTabNavigator" y al momento se hacer clic o mantener click en una de las opciones del tab, en android se vé un efecto de pulso de fondo que no me gusta, quisiera quitarlo o cambiarlo.
SE VE ALGO PARECIDO A ESTO (solo que a mi se sale redondo, y en efecto de crecimiento de pequeño a grande)
ya investigué en muchos lados y tambien pregunté a chatGPT, pero no me funciona, aqui está mi codigo en caso de que quieran verlo.
De ante mano gracias a los que comenten 🙂 y me puedan ayudar xc
BottomTab.js:
y estoy atascado con algo que no me gusta como se ve en android.
CONTEXTO:
tengo un "BottomTabNavigator" y al momento se hacer clic o mantener click en una de las opciones del tab, en android se vé un efecto de pulso de fondo que no me gusta, quisiera quitarlo o cambiarlo.
SE VE ALGO PARECIDO A ESTO (solo que a mi se sale redondo, y en efecto de crecimiento de pequeño a grande)
ya investigué en muchos lados y tambien pregunté a chatGPT, pero no me funciona, aqui está mi codigo en caso de que quieran verlo.
De ante mano gracias a los que comenten 🙂 y me puedan ayudar xc
BottomTab.js:
JavaScript:
// Dependencias
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
// Ventanas
import Home from '../../../screens/Home';
import Estadisticas from '../../../screens/Estadisticas';
import Actividad from '../../../screens/Actividad';
import Configuraciones from '../../../screens/Configuraciones';
// Iconos
import AntDesign from '@expo/vector-icons/AntDesign';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import Ionicons from '@expo/vector-icons/Ionicons';
// Colores
import { Colors } from '../../themes/Colors';
// Conexion con firebase
import { auth } from '../../../credenciales';
import { onAuthStateChanged, signOut } from 'firebase/auth';
import { useEffect, useState } from 'react';
// Crea el Tab navigator
const Tab = createBottomTabNavigator();
export default function BottomTab() {
const [nombreUsuario, setNombreUsuario] = useState('');
useEffect(() => {
// revisa el usuario logeado
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
// Establece el nombre del usuario si está autenticado
if (currentUser && currentUser.displayName) {
setNombreUsuario(currentUser.displayName);
}
});
return () => unsubscribe();
}, []);
// Función para truncar texto
const truncateText = (text, maxLength) => {
if (text.length > maxLength) {
return text.substring(0, maxLength) + "...";
}
return text;
};
// Función para cerrar sesión
const logout = async () => {
try {
await signOut(auth);
} catch (error) {
Alert.alert("Error al cerrar sesión: ", error);
}
};
return (
<Tab.Navigator
screenOptions={{
tabBarStyle: styles.tabBar,
tabBarIconStyle: styles.tabBarIcon,
tabBarActiveTintColor: Colors.primary,
tabBarInactiveTintColor: 'gray',
tabBarLabelStyle: styles.tabBarLabel,
animation: 'shift',
headerShadowVisible: false,
tabBarHideOnKeyboard: true,
}}
safeAreaInsets={{ bottom: 0 }}
>
<Tab.Screen name="Home" component={Home}
options={{
headerTitle: truncateText(nombreUsuario, 15),
tabBarIcon: ({ focused }) => <AntDesign name="home" size={22} color={focused ? Colors.primary : 'gray'} />,
headerLeft: () => <Image style={styles.headerImageLeft} source={require('../../../assets/images/cajerotm.png')} />,
headerRight: () =>
<TouchableOpacity style={styles.headerButtomRight} onPress={logout}>
<AntDesign name="poweroff" size={24} color={Colors.text} />
</TouchableOpacity>,
}} />
<Tab.Screen name="Actividad" component={Actividad}
options={{
tabBarIcon: ({ focused }) => <MaterialCommunityIcons name="clipboard-text-outline" size={24} color={focused ? Colors.primary : 'gray'} />
}} />
<Tab.Screen name="Estadisticas" component={Estadisticas}
options={{
tabBarIcon: ({ focused }) => <Ionicons name="stats-chart-outline" size={22} color={focused ? Colors.primary : 'gray'} />
}} />
<Tab.Screen name="Configuraciones" component={Configuraciones}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => <AntDesign name="setting" size={24} color={focused ? Colors.primary : 'gray'} />
}} />
</Tab.Navigator>
);
}
const styles = StyleSheet.create({
tabBar: {
backgroundColor: 'white',
height: 60
},
tabBarIcon: {
marginBottom: 5
},
tabBarLabel: {
fontSize: 10
},
headerImageLeft: {
borderRadius: 50,
width: 40,
height: 40,
resizeMode: 'contain',
marginLeft: 20,
marginRight: 10
},
headerButtomRight: {
borderRadius: 50,
width: 40,
height: 40,
marginRight: 20,
justifyContent: 'center',
alignItems: 'center'
}
});
