¡Hola a todos!
Tengo un proyecto de react native con expo.
Les comparto el package.json para que puedan ver las versiones de cada dependencia:
"dependencies": {
"@expo/vector-icons": "^14.0.0",
"@fortawesome/free-regular-svg-icons": "^6.5.2",
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@react-native-async-storage/async-storage": "^1.21.0",
"@react-navigation/material-bottom-tabs": "^6.2.28",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.3.29",
"axios": "^1.6.8",
"expo": "~50.0.14",
"expo-barcode-scanner": "^12.9.3",
"expo-location": "^16.5.5",
"expo-status-bar": "~1.11.1",
"jsrsasign": "^11.1.0",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "^2.14.0",
"react-native-loading-spinner-overlay": "^3.0.1",
"react-native-maps": "^1.10.0",
"react-native-paper": "^5.12.3",
"react-native-simple-toast": "^3.3.1"
},
En este proyecto no me funciona el touch para cambiar de tabs en el bottom tab. Y dentro de ningun componente no funciona ningun touch.
No me muestra ningun error, carga bien las vistas, pero no funciona ningun touch.
Este es el barNavigation.js inicial:
import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import {faHeart,faCalendarAlt} from '@fortawesome/free-regular-svg-icons';
import { colorPrimaryLigth,secondary,surface } from '../utils/colorVar';
import { FontAwesome5 } from '@expo/vector-icons';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import AsyncStorage from "@react-native-async-storage/async-storage";
import { HomeScreen } from './home';
import { Login } from '../auth/login';
const Tab = createMaterialBottomTabNavigator();
export const BarNavigation = () => {
const [loggued, setLoggued] = useState(false)
useEffect(() => {
const getToken = async () => {
try {
const token = await AsyncStorage.getItem("token");
if (token) {
setLoggued(true)
}
} catch (error) {
console.error("Error al recuperar el token:", error);
}
};
getToken();
}, []);
return (
<Tab.Navigator initialRouteName={'Home'}
activeColor = {colorPrimaryLigth}
inactiveColor = {surface}
barStyle = { { backgroundColor : secondary, height:65 } }
>
<Tab.Screen name="Home" component={HomeScreen}
options={{tabBarIcon: ({ color }) => (
<FontAwesomeIcon icon={faHeart} color={color} size={20} />
)
}}
/>
<Tab.Screen name="Mis servicios" component={loggued ? HomeScreen : Login}
options={{tabBarIcon: ({ color }) => (
<FontAwesomeIcon icon={faCalendarAlt} color={color} size={20} />
)
}}
/>
<Tab.Screen name="Perfil" component={HomeScreen}
options={{tabBarIcon: ({ color }) => (
<FontAwesome5 name="user" size={24} color={color} />
)
}}
/>
</Tab.Navigator>
);
}
Y este es el componente Home.js
import React, { useState, useEffect } from 'react';
import { View, Text, KeyboardAvoidingView, ScrollView, StyleSheet, Dimensions, TouchableOpacity, Image } from 'react-native';
import Spinner from "react-native-loading-spinner-overlay";
import { TextInput as PaperTextInput, Chip, Snackbar } from 'react-native-paper';
import { MaterialIcons,Feather,Ionicons,FontAwesome } from '@expo/vector-icons';
import MapView, { Marker, Callout } from 'react-native-maps';
import * as Location from 'expo-location';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Request } from '../utils/api';
import { FACILITY } from '../utils/endpoints';
import {primary600, secondary, colorInput, colorInputBorder, colorPrimaryLigth, surface, colorGray} from '../utils/colorVar';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
export const HomeScreen = () => {
const [spinner, setSpinner] = useState(false);
const [scanned, setScanned] = useState(false);
const [location, setLocation] = useState(null);
const [permissionCamera, setPermissionCamera] = useState(false);
const [facilityList, setFacilityList] = useState([]);
const test = () => {
console.log('test')
}
const getParkingList = async () =>{
setSpinner(true)
const request = new Request();
const result = await request.request(FACILITY.listGeneral,'POST',null)
if(result === 0){
setSpinner(false)
}else{
setSpinner(false)
setFacilityList(result.ResponseData)
}
setSpinner(false);
}
useEffect(() => {
const init = async () => {
// setSpinner(true);
try {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
const loc = await Location.getLastKnownPositionAsync({ accuracy: 6 });
setLocation(loc);
const { statusCamera } = await BarCodeScanner.requestPermissionsAsync();
setPermissionCamera(statusCamera);
getParkingList()
} catch (error) {
setErrorMsg('Error obtaining permissions/location');
console.error(error);
} finally {
setSpinner(false);
}
};
init();
}, []);
return (
<KeyboardAvoidingView style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
<Spinner visible={spinner} color={primary600} />
{/* View superior de busqueda */}
<View style={{alignItems:'center', marginTop:40}}>
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
<PaperTextInput
style={{width:width-140,backgroundColor:surface,color:colorInput,borderRadius:10}}
right={<PaperTextInput.Icon
name={() => <MaterialIcons name="search" size={25} color={secondary} />} />}
theme={{colors:{text:colorInput,primary:secondary},roundness:10}}
mode='outlined'
label="Buscar"
outlineColor={colorInputBorder}
/>
<TouchableOpacity
style={{elevation:3,borderRadius:25,backgroundColor:surface,marginTop:12,marginLeft:15, padding:10,height:45}}
filterList
textSearch
onPress={() => test()}
>
<Feather name="sliders" size={24} color={secondary} />
</TouchableOpacity>
<TouchableOpacity
style={{elevation:3,borderRadius:25,backgroundColor:surface,marginTop:12,marginLeft:13, padding:10,height:45}}
>
<Feather name="camera" size={24} color={secondary} />
</TouchableOpacity>
</View>
</View>
{/* View de mapa */}
<View style={{alignItems:'center', marginTop:10}}>
{
scanned ?
<BarCodeScanner
onBarCodeScanned={this.handleBarCodeScanned}
style={{width:width-20,height:height-230,marginBottom:60}}
/> :
location ?
<MapView
style={{width:width-20,height:height-230,marginBottom:60}}
initialRegion = {{
latitude : location.coords.latitude ,
longitude : location.coords.longitude ,
latitudeDelta : 0.02,
longitudeDelta : 0.03,
}}
showsUserLocation={true}
followsUserLocation={true}
>
{
facilityList.map((parking, index) => (
<Marker
key={index}
coordinate={{
latitude: parseFloat(parking.latitud),
longitude: parseFloat(parking.longitud),
}}
pinColor={'#A1DA26'}
>
<Image
source={require('../../assets/account/icono_parqueadero.png')}
style={{ width: 30, height: 30 }} // Ajusta el tamaño según tus necesidades
/>
<Callout onPress={() => this.goToParking(parking)} >
<View style={{ width:150 }}>
<Text >{parking.name}</Text>
<Text>{parking.address}</Text>
</View>
</Callout>
</Marker>
))
}
</MapView>
:
<Image source={require("../../assets/home/Map.png")} style={{width:width-20,height:height-230,marginBottom:60}}></Image>
}
{/* { this.state.bottomSheetVisible &&
<BottomSheet
enabledContentTapInteraction={false}
ref={this.sheetRef}
snapPoints={[200, height-130, 80]}
borderRadius={0}
renderHeader={this.renderHeader}
renderContent={this.renderContent}
enabledGestureInteraction={true}
enabledContentGestureInteraction={false}
enabledInnerScrolling={true}
/>
} */}
{/* { this.state.parkingCarrousel &&
<BottomSheet
enabledContentTapInteraction={false}
ref={this.sheetRef}
snapPoints={[170, height-50, 100]}
borderRadius={0}
renderContent={this.renderContentParking}
enabledGestureInteraction={true}
enabledContentGestureInteraction={false}
enabledInnerScrolling={true}
/>
} */}
{/* { this.state.filterList.length > 0 &&
<BottomSheet
enabledContentTapInteraction={false}
ref={this.sheetRef}
snapPoints={[height-180, height-180, 80]}
borderRadius={0}
renderHeader={this.renderHeader}
renderContent={this.renderContentListParking}
enabledGestureInteraction={true}
enabledContentGestureInteraction={false}
enabledInnerScrolling={true}
/>
} */}
</View>
</ScrollView>
</KeyboardAvoidingView>
);
};
He buscado mucho por internet y veo que hay varios hilos con el mismo problema, pero de hace 3 o 6 años. ¿Alguien me podría colaborar?