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
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.
New to react/redux here.
Getting error: Could not find "store" in either the context or props of "Connect(Books)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Books)".
I've attached snippet of my code.
To see everything else, please check out my snack.
Thanks in advance!
https://snack.expo.io/#ganiyat1/colorful-thrills
import React, { useState } from 'react';
import { StyleSheet, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import MaterialTabs from 'react-native-material-tabs';
import CardFlip from 'react-native-card-flip';
import { Card } from 'react-native-paper';
import { NewReleases } from '../shared/Booklist';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
Booklists: state.Booklists
};
};
.....
export default connect(mapStateToProps)(Books);
Your root-node of the app has to wrapped with Redux Provider like:
import { Provider } from 'react-redux';
import store from 'your/path/to/redux/store';
...
return (
<Provider store={store}>
<Navigator />
</Provider>
);
Then you'll have the right to map any state into your component via connect
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.
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
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 ..