I am new to react native and I implemented a simple react native drawer but When I'm running this code in my emulator It gives me a type error.
This is my drawr.js code:
import React, { Component } from 'react';
import {View,Text,FlatList} from "react-native";
import {Card} from "react-native-paper";
import {DrawerNavigator} from 'react-navigation'
import lessons from './lessons';
import classes from './classes';
class Drawer extends React.Component{
render() {
return (
<MyApp/>
);
}
}
const MyApp = DrawerNavigator({
lessons:{
screen:lessons
}
})
export default Drawer;
Then I got this error:
How can I fix this error??
Ciao, there are some errors in your code. Try to follow this guide.
Related
Getting Error that reactreactNavigation.StackNavigator is not a function?
I have 4.4.0 version of react navigation installed.
My github is https://github.com/ganiya/ColorfulThrills if you want to see all of the codes
researched but what i've found online doesn't seem to apply to my issue
import React from 'react';
//import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';
import Home from './components/Home'
const Navigator = StackNavigator({
Home:{screen:Home},
Books: { screen: Books }
});
class App extends React.Component {
render() {
return (
<Navigator />
);
}
}
export default App;
You must use import { createStackNavigator } from 'react-navigation-stack'
Import it from yarn add react-navigation-stack
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
Here is the code I am trying to use but in the component LogIn I get an error that I have not shared the store. I try share the store to tabNavigation to have all the child components with the Store.
import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import TabNavigator from './TabNavigator';
import { Store } from './Store/Store';
import { Provider } from 'react-redux';
<Provider store={Store}>
<TabNavigator></TabNavigator>
</Provider>
export default createAppContainer(TabNavigator);
Error:
Invariant Violation: Invariant Violation: Could not find "store" in
the context of "Connect(LogIn)". Either wrap the root component in a
, or pass a custom React context provider to and
the corresponding React context consumer to Connect(LogIn) in connect
options.
Source Code
Your App.js needs to export a React.Component, currently you’re exporting a navigator. You also don’t have a render function. So you’re not going to see anything. You should refactor your App.js so that it looks more like this.
import React from 'react';
Import { View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import TabNavigator from './TabNavigator';
import { Store } from './Store/Store';
import { Provider } from 'react-redux';
const Nav = createAppContainer(TabNavigator);
export default class App extends React.Component {
render() {
<Provider store={Store}>
<View style={{flex:1, backgroundColor:'white'}}>
<Nav />
</View>
</Provider>
}
}
Here is a snack that uses redux https://snack.expo.io/#andypandy/redux-with-ducks it follows the idea from https://github.com/erikras/ducks-modular-redux
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';