I'm trying to get started with react-navigation 3.0.9 but I'm having issues rendering the Router component.
Here is my router/index.js file
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Login from '../screens/Login';
const Routes = createStackNavigator({
Login
});
const Router = createAppContainer(Routes)
export default Router;
Then here is my App.js
import React from 'react';
import { Platform, StatusBar, StyleSheet, View, TextInput, Text } from 'react-native';
import { Router } from './router'
export default class App extends React.Component {
render() {
return(
<Router />
)
}
}
Here is my screens/Login.js file
import React from 'react';
import { View, Text } from 'react-native';
export default class Login extends React.Component {
render() {
return(
<View>
<Text>Hello World</Text>
</View>
)
}
}
The error I receive in Expo tells me the Element type is invalid (Invariant violation), and says I should check the render method of App.
Am I not importing/exporting the Router correctly?
The router import should not be destructured
In App.js change:
import { Router } from './router'
to
import Router from './router'
in your router/index.js file, change this part:
import Login from '../screens/Login';
const Routes = createStackNavigator({
Login: { screen: Login } // Just changed this line
});
Also in you App.js import Router as:
import Router from './router'
c/o: jermainecraig's answer
Related
I am having trouble creating Switch Navigator in React Native.
This is the App.js code
import React, { Component } from 'react';
import TabNavigator from './Navigation/TabNavigator';
import { NavigationContainer } from '#react-navigation/native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import Loading from './Screens/Loading';
import Login from './Screens/Login';
import Home from './Screens/Home';
const Switch = createSwitchNavigator({
LoginScreen: Login,
LoadingScreen: Loading,
HomeScreen: Home
});
const AppNavigator = createAppContainer(Switch);
export default function App() {
return <AppNavigator />;
}
Finally Got the answer
"react-navigation" : "4.2.0"
So the most compatible version of react-navigation is 4.2.0.
using react-navigation v4, this is my code I am facing this error, I have also checked the documentation
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '#expo/vector-icons';
import MyHomeScreen from './screen/Homescreen';
import MyNotificationsScreen from './screen/Notification';
const TabNavigator = createBottomTabNavigator({
Home: MyHomeScreen,
Notifications: MyNotificationsScreen,
});
const AppContainer = createAppContainer(TabNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
Make sure that you are connected with the same network, your system and mobile should be connected with the same wifi and also you have to upgrade your Expo CLI.
this seems to be a common problem with react navigation once they updated their API
looked at Fix Error: The component for route 'Home' must be a React component
neither profile nor camera components want to load into this tabNavigator. Any suggestions?
Camera.js
import React, { Component } from 'react';
class Camera extends Component {
render() {
return (
<Text>Camera</Text>
);
}
}
export default Camera;
InstaClone.js
import React, { Component } from 'react'
import { View, StyleSheet} from 'react-native'
import Camera from './components/screens'
import {MainFeed, Login, Profile} from './components/screens'
import { createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
const Tabs = createBottomTabNavigator({
feed: MainFeed,
Camera: Camera,
profile: Profile
});
const MainStack = createAppContainer(createSwitchNavigator({
login: Login,
main: Tabs
}));
const MainStack = createAppContainer(Tabs);
class InstaClone extends Component {
render() {
return <MainStack/>
}
}
export default InstaClone;
So I have a rootstack navigation from react-navigation
I have a folder Markets with index.js like this:
import ExampleOne from './ExampleOne';
import ExampleTwo from './ExampleTwo';
import ExampleThree from './ExampleThree';
import ExampleFour from './ExampleFour';
import ExampleFive from './ExampleFive';
export {
ExampleOne,
ExampleTwo,
ExampleThree,
ExampleFour,
ExampleFive
};
with ExampleOne.js to ExampleFive.js like this:
import React, { Component } from 'react';
import { Container, Content, Text } from 'native-base';
export default class ExampleOne extends Component {
render() {
return (
<Container>
<Content>
<Text>Example</Text>
</Content>
</Container>
)
}
};
But when I importing it to RootStack.js, I got an error "The Component for route 'ExampleOne' must be a React Component.'
RoutStack.js like this:
import React from 'react';
import { createStackNavigator } from 'react-navigation';
// Import all MarketsScreen
import { ExampleOne, ExampleTwo, ExampleThree, ExampleFour, ExampleFive } from './Markets';
const RootStack = createStackNavigator({
ExampleOne: ExampleOne,
ExampleTwo, ExampleTwo,
ExampleThree: ExampleThree,
ExampleFour: ExampleFour,
ExampleFive: ExampleFive
});
export default RootStack;
Is there anything wrong with my code? I'm following some tutorial but it's not work on me
try to call the resources ExampleOne, ExampleTwo..etc, should not use the object {ExampleTwo} .. is unnecessary ..
Getting this error (pictured below). New to react-native and learning how to use the StackNavigator. I believe it has something to due with export/imports but been stuck on this for a while. Thank you.
index.js file
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('RNIntroduction', () => App);
App.js file
import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, AppRegistry} from 'react-native';
import {StackNavigator} from 'react-navigation';
import LoginScreen from './app/views/LoginScreen';
import HomeScreen from './app/views/HomeScreen';
export default class App extends Component {
render() {
return (
<Screens/>
);
}
}
const Screens = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen : {screen: HomeScreen}
})
LoginScreen.js
import React, { Component } from 'react';
import {Text, View, StyleSheet} from 'react-navigation';
export default class LoginScreen extends Component {
render() {
return (
<View>
<Text> This is Login Screen </Text>
</View>
);
}
}
My HomeScreen.js looks the same way as the LoginScreen.js. I also included a pic the error itself.
Change import statement LoginScreen.js to
import {Text, View, StyleSheet} from 'react-native';