here's the code example:
const mapStateToProps = (state: RootState) => ({
isSwipeEnabled: state.permissions.isSwipeEnabled,
});
const MainNavigator = createMaterialTopTabNavigator(
{
Screen1,
Screen2: {
screen: Screen2,
navigationOptions: {
swipeEnabled: isSwipeEnabled, <==HERE I WANT TO USE MY REDUX STATE
},
},
},
{
initialRouteName: 'Screen1',
tabBarPosition: 'bottom',
},
);
export default connect(mapStateToProps)(MainNavigator);
Is it possible to have access to redux inside createMaterialTopTabNavigator function?
If it is, how?
Thanks!
You can create your navigator in constructor of App component, which is connected to redux. In constructor you can access your mapped state from props:
const mapStateToProps = (state: RootState) => ({
isSwipeEnabled: state.permissions.isSwipeEnabled
});
class NavigationApp extends React.Component {
constructor(props) {
super(props);
this.mainNavigator = createMaterialTopTabNavigator(
{
Screen1,
Screen2: {
screen: Screen2,
navigationOptions: {
// here you now can use your mapped redux state from props
swipeEnabled: props.isSwipeEnabled,
}
}
},
{
initialRouteName: 'Screen1',
tabBarPosition: 'bottom'
},
);
}
render() {
// use here any function from react-navigation which you are using in your environment
// e.g. createAppContainer
// in this example I am using createBrowserApp for using react-navigation in web app
const App = createBrowserApp(this.mainNavigator);
return (<App />);
}
}
export default connect(mapStateToProps)(NavigationApp);
Related
i have build an full stack drawer and tab navigators in my app.js and now how can i use provider of redux to connect in whole app should i create an new screen and move all components of app.js to that or do something in app.js
const SplashScreen = createStackNavigator({
ScreenWith:{
screen:ScreenWith,
navigationOptions:{
headerTitle:'Logo1',
},
},
});
const HomeStack = createStackNavigator({
Homeview: {
screen: Homeview,
navigationOptions: {
headerTitle: 'Home',
},
},
Beauty: {
screen: Beauty,
navigationOptions: {
headerTitle: 'Beauty',
},
},
ContentPage:{
screen:ContentPage,
navigationOptions:{
headerTitle:'Authenticated',
},
},
Yourcart:{
screen:Yourcart,
navigationOptions:{
headerTitle:'Your Cart',
},
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerTitle: 'SignIn',
},
},
Signup:{
screen:Signup,
navigationOptions:{
headerTitle:'Registered',
},
},
Forgotemail:{
screen:Forgotemail,
navigationOptions:{
headerTitle:'Forgotemail',
}
},
});
const MainTabs = createBottomTabNavigator({
Home: {
screen: HomeStack,
},
Account: {
screen: Account,
},
},
});
const MainDrawer = createDrawerNavigator({
MainTabs : MainTabs,
},{
contentComponent:props =><Drawescreen {...props}/>
});
const AppModalStack = createStackNavigator(
{
App: MainDrawer,
Screentest: Homeview,
},
{
mode: 'modal',
headerMode: 'none',
}
);
const App = createSwitchNavigator({
SplashScreen: {
screen: SplashScreen,
},
App: {
screen: AppModalStack,
},
});
export default createAppContainer(App);
this is my app.js now where i should i add provider to connect with redux ?
Assume that you have export your Container as App
Assume that you have created a class called Main for import your Container App file
This is how you add Provider to your app:
import React from 'react';
import App from '../App'; //Import your app Container
import {Provider} from 'react-redux'; //Import Provider
import store from '../redux/store/store'; //Import your store
const reduxStore = store(); //create redux store
class Main extends React.Component {
render() {
return (
<Provider store={reduxStore}>
<AppContainer />
</Provider>
);
}
}
export default Main;
I'm creating a react native wizard, and I want to combine my static route and wizard dynamic routes.
Currently I am using react navigation, and the major problem is i have a generateNavigator function that creates the dynamic routes based on the props passed down to Route.js component where the function exists. I have tried moving the function to the AppNavigator where the static routes exists but am getting navigator must be a function. I'm running the app expo
Route.js
generateNavigator = () => {
const { steps, title } = this.props;
const navigationRoutes = {};
steps.forEach((step, index) => {
const routeOptions = { screen: step.component };
navigationRoutes[step.routeName] = routeOptions;
});
const navigationOptions = {
headerStyle: {
backgroundColor: '#ffffff',
paddingHorizontal: 5,
},
headerTintColor: '#111111',
headerTitle: title,
};
return createAppContainer(createStackNavigator(navigationRoutes, { navigationOptions }));
}
AppNavigator.js
const MainStack = createStackNavigator(
{
Main: {
screen: {
MainTabNavigator,
},
},
...ModalStack
},
{
mode: 'modal',
headerMode: 'none',
}
);
export default createAppContainer(
createSwitchNavigator({
AuthLoading: AuthLoading,
Main: MainStack,
Auth: AuthStack,
}, {
initialRouteName: 'AuthLoading',
})
);
I expect the app to run without warning, but instead I'm getting a warning 'You should only render one navigator explicitly in your app'. As said earlier i tried moving the generateNavigator() to AppNavigator in order to solve the problem but with no success.
I'm using react-navigation v3 for react native app.
When I createDrawerNavigator inside createStackNavigator I can't openDrawer but if I createDrawerNavigator in root navigator I can open it.
Here is my code. Anyone have a solution for me?
AppNavigator.js
const AppNavigator = createSwitchNavigator(
{
StackNavigatorMain: StackNavigatorMain,
StackMenu: StackMenu
},
{
headerMode: "null",
navigationOptions: {
headerVisible: false
},
initialRouteName: "StackNavigatorMain"
}
);
export default createAppContainer(AppNavigator);
StackNavigatorMain.js
const StackNavigatorMain = createStackNavigator(
{
routeHome: Home,
routeLogin: Login,
routeForgotPassword: ForgotPassword,
routeSignUp: SignUp,
},
{
headerMode: "none",
initialRouteName: strings.routeHome,
}
)
export default StackNavigatorMain
StackMenu.js
const StackMenu = createStackNavigator({
//Drawer Optons and indexing
MenuNavigator: MenuNavigator,
},
{
headerMode: "null",
navigationOptions: {
headerVisible: false
},
}
);
export default StackMenu;
MenuNavigator.js
const MenuNavigator = createDrawerNavigator({
//Drawer Optons and indexing
Setting: Setting
},
{
drawerWidth: responsiveWidth(180),
overlayColor: 'transparent',
// drawerLockMode: 'locked-open',
contentComponent: AppSideMenu
}
);
export default MenuNavigator;
index.js
export default class App extends Component {
render() {
return (
<AppNavigator/>
);
};
}
Call open drawer onPress button in Component screen
onClicked = () => {
// props.navigation.openDrawer();
props.navigation.dispatch(DrawerActions.openDrawer());
}
I've came across this solution, trying to subscribe to updates to navigation lifecycle
Navigator.js
const App = createStackNavigator(
{
screen1: { screen: MainScreen },
screen2: { screen: SecondaryScreen },
},
{
cardStyle: {
backgroundColor: 'transparent'
}
}
);
const MainNavigator = createAppContainer(App);
export default MainNavigator;
I'm wondering if it's possible to subscribe to events in this navigator file? Or I have no other options but to subscribe at each and every individual screens?
you can add listener for each screen like this
constructor(props) {
super(props);
this.props.navigation.addListener(
'willFocus',//event name
payload => {
//do your work here
}
);
}
other event names:'onDidFocus', 'onWillBlur' ,'onDidBlur'
reference
I am trying to pass props from login screen to the whole app because every fetch request depend on user credentials so how can I achieve this.
routeConfig file:
export const sendStack = StackNavigator({
send:{
screen:Send,
},
confirm:{
screen:ConfrimPay,
}
});
export const transactionStack = StackNavigator({
transaction:{
screen:Transaction,
},
details:{
screen:Details,
}
});
export const Tab=TabNavigator({
send:{
screen:sendStack,
},
receivers:{
screen:Receipt,
tabBar:{
swipeEnabled:false
}
},
transaction:{
screen:transactionStack
},
},
{
tabBarPosition: 'bottom',
swipeEnabled: false,
tabBarOptions: {
activeTintColor: 'white',
labelStyle:{
fontSize:5
}
}
}
);
export const Logst =StackNavigator({
first:{
screen:First
},
login:{
screen:App ,
},
tab:{
screen:Tab,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
Root nav:
import React, { Component } from 'react';
import {Tab, Logst,Root} from './mainNav';
import App from './App';
class List extends Component {
render() {
return(<Logst />) ;
}
}
This my login page and I use this.props.navigation.navigate('tab',{user:user,pwd:pwd}); and it's getting me an error that mean the props has not been passed
this.props.navigation.navigate('tab',{user:user,pwd:pwd});
+this.props.navigation.state.params.user+'&pwd='+this.props.navigation.state.params.pwd+'&func=2
Note* I am passing props from stackNav to stackNav nested in TabNav