Search code examples
react-nativereact-navigationreact-navigation-stack

When createDrawerNavigator is passed inside createSwitchNavigator, it shows error


I'm trying to add drawer navigation in react native inside a switch navigation but this is throwing some error. I've tried with stacknavigation instead of switch but still this issue persists.

  import React, { Component } from 'react';
  import {
    Button,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    TextInput,
    Picker,
    Modal,TouchableHighlight,  Alert
  } from 'react-native';
  import Navigator from './routes/homeStack';
  import HomeScreen from './screens/HomeScreen';
  import LocationScreen from './screens/LocationScreen';


  import {createSwitchNavigator, createAppContainer} from 'react-navigation';
  import { createDrawerNavigator } from 'react-navigation-drawer';
  import {createStackNavigator } from 'react-navigation-stack';

  class WelcomeScreen extends Component{
    render(){
      return(
        <View>
          <Text>Welcome Screen</Text>
          <Button
          title="Log In"
          onPress={() => this.props.navigation.navigate('Dashboard')}
          />

        </View>
      )
    }
  }

  class DashboardScreen extends Component{
    render(){
      return(
        <View>
          <Text>Dashboard Screen</Text>

        </View>
      )
    }
  }

  class App extends Component {
    render() {
      return (
        // <Navigator/>
        <AppContainer/>
      );
    }
  }
  const AppDrawerNavigator = createDrawerNavigator({
    Home: {
      screen: HomeScreen
    },
    Dashboard: {
      screen: DashboardScreen
    },
  });

  const AppSwitchNavigator = createSwitchNavigator({
    Welcome: {
      screen:WelcomeScreen
    },
    Dashboard: {
      screen:AppDrawerNavigator
    }
  });


  const AppContainer = createAppContainer(AppSwitchNavigator)

  export default App;

Here is the error : Attempt to invoke virtual method 'double java.lang.Double.double.value()' on a null object reference

Here is the screenshot

Package.json

  {
      "name": "practice",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint ."
      },
      "dependencies": {
        "@react-native-community/masked-view": "^0.1.6",
        "formik": "^2.1.2",
        "react": "16.9.0",
        "react-native": "0.61.5",
        "react-native-elements": "^1.2.7",
        "react-native-gesture-handler": "^1.5.3",
        "react-native-reanimated": "^1.5.0",
        "react-native-safe-area-context": "^0.6.2",
        "react-native-vector-icons": "^6.6.0",
        "react-navigation": "^4.0.10",
        "react-navigation-drawer": "^2.3.3",
        "react-navigation-stack": "^2.0.14",
        "react-navigation-tabs": "^2.7.0"
      },
      "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/runtime": "^7.6.2",
        "@react-native-community/eslint-config": "^0.0.5",
        "babel-jest": "^24.9.0",
        "eslint": "^6.5.1",
        "jest": "^24.9.0",
        "metro-react-native-babel-preset": "^0.56.0",
        "react-test-renderer": "16.9.0"
      },
      "jest": {
        "preset": "react-native"
      }
    }

Solution

  • It's an issue with latest version of react-native-reanimated. You can try downgrading to version 1.4.0. Run:

    yarn add [email protected]
    

    or

    npm install --save-exact [email protected]
    

    Then rebuild your app by running yarn android or npm run android