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 ..
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.
Having issues accessing this custom component from the Screen Page. I'm sure the fix is straightforward
Component:
import React from 'react';
import { Text, View, Button } from 'react-native';
class Ohno extends React.Component {
render(){
return(
<Text>Test</Text>
)
}
}
export default Ohno
Screen:
import{ React, Component} from 'react'
import { View, Text} from 'react-native'
// import { Videoz } from '../Components/Video';
import { Ohno } from '../Components/Test';
class App2 extends Component {
render()
{
return (
<View>
<Ohno />
</View>
);
}
}
export default App2;
Looks super simple but not sure what is going on.
Continuing the answer given by #Ugur Eren, there are 2 exports, Named export and Default export.
Named exports: You can have multiple named exports from one file, and the import must be like
// ex. importing a named export:
import { MyComponent } from "./MyComponent";
// ex. Import named component with a different name using "as"
import { MyComponent as MyNewComponent } from "./MyComponent"
// exports from ./MyComponent.js file
export const MyComponent = () => {}
Default exports: There can only be one default export from each file. You can name it anything while importing.
// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;
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
createStackNavigator is giving error :
null is not an object (evaluating 't(r(d[1])).default.direction')
Not able to get is this error because of an import statement or anything else. Any help will be appreciated
My code for app.js is below:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './screens/Login';
import Home from './screens/Home';
const AppNavigator = createStackNavigator({
LoginScreen: { screen: Login },
HomeScreen: { screen: Home }
});
export default class App extends Component {
render() {
return (
<AppNavigator />
);
}
}
getting error:
Don't forget to:
import { createAppContainer } from 'react-navigation'
and wrap the StackNav with it like:
const AppContainer = createAppContainer(AppNavigator)
In your App Component instead of <AppNavigator/>, set <AppContainer/>.
I have the following React Native App set up and I'm trying to use the Toast component from Native Base:
app.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import { Root } from "native-base";
import {StackNavigator} from 'react-navigation';
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
export default class myApp extends Component {
render() {
return (
<Root>
<AppNavigator />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => Screens);
MainView.js (simplified)
import React, {Component} from 'react';
import { StyleProvider, Card, CardItem, Left, Right, Body, Icon, Toast, Header, Fab } from 'native-base';
import {StackNavigator} from 'react-navigation';
export default class MainView extends Component {
....
showError = (msg, err) => {
console.log("[ERROR]", err);
Toast.show({
text: msg,
position: this.state.toastPosition,
buttonText: this.state.toastErrorBtn
});
}
....
}
I've tried several ways, but keep getting this error:
Your app should start with rendering myApp component, like this:
AppRegistry.registerComponent('myApp', () => myApp);.
Inside myApp you should render your app navigator which is Screens not AppNavigator, that is how you named it.
This is how your app.js should look:
import React, { Component } from 'react';
import { Root } from "native-base";
import { StackNavigator } from "react-navigation";
import MainView from './assets/screens/MainView';
import ConfigView from './assets/screens/ConfigView';
import {AppRegistry} from 'react-native';
export default class myApp extends Component {
render() {
return (
<Root>
<Screens />
</Root>
);
}
}
const Screens = StackNavigator({
Main: {screen: MainView},
Config: {screen: ConfigView}
})
AppRegistry.registerComponent('myApp', () => myApp);
We should use Root component
import { Root } from "native-base";
<Root>
// Screen
</Root>