1

iOS 13(simulator ) | xcode13 | react-navigation6.x | react-native 0.68.2

Drawer Navigator works fine But an Error occurres when adding useLegacyImplementation. Also,I can't touch off my sidebar by navigation.openDrawer and If I add useLegacyImplementation={true} the screen while turns white.

This is src_Drawer

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   >
            <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
    }
  })

app.js :

import 'react-native-gesture-handler';
import React, { Component } from 'react'
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Index from './src_Drawer';

export default class App extends Component{
  render(){
    return(
      <NavigationContainer>
      <Index/>
      </NavigationContainer>
    ) 
  }
}

I want to know how to fix it.

Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
sammyblues
  • 11
  • 1

1 Answers1

0

I resolve this problem!! Error Reason: have incorrect react-native-reanimated

First I do this according to official interpretation: npm install react-native-reanimated

But it doesn’t work. Also it Not warning me in debugger Till I run it On my iPhone

This is how i resolve it: link:https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

1.First step is to install react-native-reanimated as a dependency in your project:

yarn add react-native-reanimated

2.Add Reanimated's Babel plugin to your babel.config.js:

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

3.yarn start --reset-cache

sammyblues
  • 11
  • 1