0

¡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?

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.