Drawer navigation onclick event not working

92 Views Asked by At

Once I open the drawer the navigation when clicking isn't working in certain devices and the event in other devices works but not always.

import {StyleSheet} from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../screens/Login';
import { SideBar } from "../navigation/NavBar";
import { Notification } from "../data/Notification";

const Stack = createStackNavigator();
Notification();

function App(): JSX.Element {

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login">
        <Stack.Screen
          name="Login"
          component={Login}
          options={{
            headerLeft: () => null,
            headerShown: false,
          }} />
        <Stack.Screen
          name="Balance"
          component={SideBar}
          options={{
            headerLeft: () => null,
            headerShown: false,
          }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
import { DrawerActions, NavigationContainer } from "@react-navigation/native";
import { Image, Pressable, SafeAreaView, ScrollView, StyleSheet, Text, Touchable, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import SubirFactura from "../screens/SubirFactura";
import Balance from "../screens/Balance";
import Login from "../screens/Login";
import Redirect from "../navigation/Redirect";
import Impuestos from "../screens/Impuestos";
import { createDrawerNavigator } from "@react-navigation/drawer";
import React, { useEffect, useState } from "react";
import { StackNavigationProp } from "@react-navigation/stack";
import { FlatList } from "react-native-gesture-handler";
import { getCuentas } from "../data/Posts";
import { setUserData, getUserData } from "../data/GlobalData";
//import { Navigation } from "react-native-navigation";
import SideMenu from 'react-native-side-menu';

const Drawer = createDrawerNavigator();

export const SideBar = () => {
  return (
    <NavigationContainer theme={stylesSidebar} independent={true}>
      <Drawer.Navigator>
        <Drawer.Screen
          name="Balance"
          component={Balance}
          options={{
            title: 'Balance',
            drawerIcon: () => (
              <FontAwesome5 name={'chart-line'} size={20} color={'white'} />
            ),
            headerShown: false,
            unmountOnBlur: true,
          }} />
        <Drawer.Screen
          name="Impuestos"
          component={Impuestos}
          options={{
            title: 'Impuestos',
            drawerIcon: () => (
              <FontAwesome5 name={'euro-sign'} size={20} color={'white'} />
            ),
            headerShown: false,
            unmountOnBlur: true,
            headerTitleAlign: 'center',
            headerStyle: {
            },
          }} />
        <Drawer.Screen
          name="SubirFactura"
          component={SubirFactura}
          options={{
            title: 'Subir Factura',
            drawerIcon: () => (
              <FontAwesome5 name={'file-upload'} size={20} color={'white'} />
            ),
            headerShown: false,
            unmountOnBlur: true,
            headerTitleAlign: 'center',
            headerStyle: {
            },
          }} />
        <Drawer.Screen
          name="Redirect"
          component={Redirect}
          options={{
            headerShown: false,
            unmountOnBlur: true,
            headerTitleAlign: 'center',
            drawerItemStyle: { display: 'none' },
            headerStyle: {
            },
          }} />
        <Drawer.Screen
          name="Login"
          component={Login}
          options={{
            title: 'Cerrar sesión',
            drawerIcon: () => (
              <FontAwesome5 name={'sign-out-alt'} size={20} color={'white'} />
            ),
            headerShown: false,
            swipeEnabled: false,
            unmountOnBlur: true,
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Not working in a certain Xiaomi device, but working on Xiaomi Poco F1 and Xiaomi Poco X4 GT

I've created the debug apk and I sent it so I could test it in multiple devices.

0

There are 0 best solutions below