React-native creating switch navigator

Question

I am a beginner in react-native. I am trying to create a navigator sidebar and i have an error regarding creating the switch navigator. I have followed tutorials but i came up with an error

Require cycle: modules\Dashboard.js -> modules\Navigator.js -> modules\Dashboard.js

I have this in my Navigator.js :

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}

and Here is my fullcode from Dashboard.js :

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

import MenuButton from '../modules/MenuButton.js'
import Navigator from '../modules/Navigator.js'


class Dashboard extends Component {

    render() {
        return (
            <View style={styles.container}>
            <Navigator />
            <MenuButton navigation={this.props.navigation} />
                <Text style={styles.smallBlue}>Dashboard</Text>
            </View>
          );
    }
}

const styles = StyleSheet.create({

//Views
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },

//Text
  smallBlue: {
          marginTop: 30,
          color: 'powderblue',
          fontWeight: 'bold',
          fontSize: 30,
  }
});

export default Dashboard

Is this because i imported already dashboard from my navigator and my dashboard imported my navigator ?

Mehran Khan · Accepted Answer · 2019-08-28T05:10:33.287

Yes it is import issue as described in this link

You should not use Navigator in your dashboard screen. it should be in your app register component

index.js

import Navigator from "./Navigator";

AppRegistry.registerComponent(appName, () => Navigator);

Navigator.js

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

export default class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}

Update For Expo

Update App.js file and add Navigator.js code

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

export default class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}

do you mean i need to make index.js as register component and import it in my dashboard? — Jc John, Aug 28 '19 at 04:37
no when you create a new project you have index.js file just change this line AppRegistry.registerComponent(appName, () => Navigator); in your index.js file to make Navigator as your app registry component — Mehran Khan, Aug 28 '19 at 04:54
if you are using expo change here node_modules/expo/AppEntry.js registerRootComponent(App); see this [link](https://docs.expo.io/versions/latest/sdk/register-root-component/) — Mehran Khan, Aug 28 '19 at 05:03

React-native creating switch navigator

1 Answers1