Question 35071 in React native Question posted in
The official React Native documentation can be found here.

React drawer Navigation lags while opening – React native

I am nesting a drawer navigation on top of a stack navigator. It works, but the problem is that it lags excessively while opening the drawer. What could be the issue here?

import React, { useEffect, useState } from "react";
import CartIcon from "../CartIcon";
import Home from "../../screens/Home";
import Orders from "../../screens/Orders";
import ProductsScreen from "../../screens/ProductsScreen";
import Cart from "../../screens/Cart";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeHeader from "../HomeHeader";
import OrdersDetails from "../../screens/OrdersDetails";
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator()
const Stack = createNativeStackNavigator();

My drawer navigator here

 const HomeScreen=()=> {
 return (
<Drawer.Navigator>
  <Drawer.Screen name="Home" component={Home} options={() => ({
      title: "BarPoint",
      headerRight: () => <HomeHeader />,
    })} />
</Drawer.Navigator>
 );
 }

stack navigator here

 const AppStack = () => {
 return (
<Stack.Navigator>
  <Stack.Screen
    name="HomeScreen"
    component={HomeScreen}
    options={{ headerShown: false }} 
  />
  <Stack.Screen
    name="ProductsScreen"
    component={ProductsScreen}
    options={({ navigation }) => ({
      title: "Products",
      headerRight: () => <CartIcon navigation={navigation} />,
    })}
  />
  <Stack.Screen name="Cart" component={Cart} />
  <Stack.Screen name="Orders"  component={Orders} />
  <Stack.Screen name="OrdersDetails"  component={OrdersDetails} />

</Stack.Navigator>
 );
};

 export default AppStack;
Tags:

2

Answers


  1. 0

    Add useLegacyImplementation in Drawer.Navigator and compile.

    const HomeScreen=()=> {
 return (
<Drawer.Navigator
useLegacyImplementation //<- Add here
>
  <Drawer.Screen name="Home" component={Home} options={() => ({
      title: "BarPoint",
      headerRight: () => <HomeHeader />,
    })} />
</Drawer.Navigator>
 );
 }
    Login or Signup to reply.
  2. 0

    It occurred an Error to me by adding useLegacyImplementation.

    Here is my code.Also,I can’t touch off my sidebar by navigation.openDrawer

    my devices: xcode13 react-navigation6.x

    import React ,{Component}from 'react';
import { Button, View ,Text,StyleSheet} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer=createDrawerNavigator()

//two function
function HomeScreen(prop){
    return(
        <View style={styles.container}>
            <Text style={styles.text}>Home Screen</Text>
            <Button title={"Open Drawer"} onPress={()=>prop.navigation.openDrawer()}/>
            <Button title={"Toggle Drawer"} onPress={()=>prop.navigation.toggleDrawer()}/>
        </View>
    )
  }
  
  
  function NewsScreen(prop){
    return(
        <View style={styles.container}>
            <Text style={styles.text}>News Screen</Text>
            <Button title={"jump to Home"} onPress={()=>prop.navigation.navigate('Home')}/>
        </View>
    )
  }


export default class index extends Component{
    render(){
        return(
         <Drawer.Navigator  useLegacyImplementation={true}  >
            <Drawer.Screen name="Home" component={HomeScreen} />
            <Drawer.Screen name="News" component={NewsScreen} />
          </Drawer.Navigator>
        )
    }
}


const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center',
    },
    text:{
        fontSize:40
    }
  })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search