i have statistics component in my app that uses this library :
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
this page works correctly when i make it the first page loaded when the app is launched :
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import MainMenu from "../modules/MainMenu/MainMenu-screen";
import Login from "../modules/Login/Login-screen";
import StatistiqueGlobale from "../modules/statGlobale/Statistique-screen"
const LoginStackNavigator = createStackNavigator({
StatistiqueGlobale: {
screen: StatistiqueGlobale,
navigationOptions: {
title: "StatistiqueGlobale",
headerShown: false,
},
},
Login: {
screen: Login,
navigationOptions: { headerShown: false },
},
MainMenu: {
screen: MainMenu,
navigationOptions: {
title: "MainMenu",
headerShown: false,
},
},
but i need the app to start with the login page and then to navigate to statistics page from the main menu :
so navigation should be like this :
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import MainMenu from "../modules/MainMenu/MainMenu-screen";
import Login from "../modules/Login/Login-screen";
import StatistiqueGlobale from "../modules/statGlobale/Statistique-screen"
const LoginStackNavigator = createStackNavigator({
StatistiqueGlobale: {
screen: StatistiqueGlobale,
navigationOptions: {
title: "StatistiqueGlobale",
headerShown: false,
},
},
Login: {
screen: Login,
navigationOptions: { headerShown: false },
},
MainMenu: {
screen: MainMenu,
navigationOptions: {
title: "MainMenu",
headerShown: false,
},
},
and i use this function in the main menu to navigate to any page by passing it's name in the parameters
navig = (page) => {
this.props.navigation.navigate(page);
};
and then these two errors appears everytime i try to navigate :
enter image description here
enter image description here
I will not say I was facing the same problem. The thing is I had to install another package which is "react-native-svg" via npm not yarn. And it started working. And I am using react-native-cli not expo-cli.
Related
I have a react project and I have two navigators, I'm trying to remove the navigation bar, I tried two ways but no success.
This is my App.js
const switchNavigator = createStackNavigator({
loginFlow: createStackNavigator({
Signin: {
screen: SigninScreen,
navigationOptions: {
headerShown: 'false'
}
},
Signup: {
screen: SignupScreen,
},
},
),
mainGrid: createStackNavigator({
Account: AccountScreen,
Bath: BathScreen,
Eco: EcoBath,
Electricity: ElectricityConsScreen,
Water: WaterConsumptionScreen,
Help: HelpScreen,
Parents: ParentsControlScreen
})
});
As you can see I tried o hide using the headerShown: 'false' I tried to change to 'hide' and doesn't seems to work. I tried to add separately like:
SigninScreen.navigationOptions = () => {
return{
header: () => false
};
};
But didn't worked too.
I tried to remove the arrow function and set like header: null and no success too.
What can I do about this?
if you are using react-navigation V5:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
else:
hide header for 1 screen:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
header: null,
},
},
})
or
export default class HomePage extends Component {
static navigationOptions = {
header: null
}
}
hide header for all screens:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
},
},
{
navigationOptions: {
header: null,
},
})
Deprecation in 'navigationOptions': - 'header: null' will be removed
in a future version. Use 'headerShown: false' instead
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
headerShown: false
},
},
})
I am using following in my code:
const AppStackNavigator = createStackNavigator ({
Home: HomePageScreen
},
{
headerMode: "none"
});
https://reactnavigation.org/docs/stack-navigator/#headermode
Mates I solved! I was using the Navigation v4.
The problem was here
const switchNavigator = createStackNavigator({
Then I swapped t
const switchNavigator = createSwitchNavigator({
And Added
SigninScreen.navigationOptions = () => {
return {
header: false
};
};
Now It's working like a charm, but all answers that you lads answered are correct. I used in the other versions. Thanks for your time lads.
How to set a common color for all navigation bar from app.js file , here we used createStackNavigator for navigations my app.js
import React, {Component} from 'react';
import { StyleSheet,} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './src/pages/Login';
import SignUp from './src/pages/SignUp';
export default createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
title:"SignUp",
},
});
You can use tabBarOptions at the end of your stack navigator. See this, for options available for (iOS and android) in tabBarOptions.
And for setting common color across all screens bar, use code below.
export default createStackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
title:"SignUp",
},
},
{
tabBarOptions: {
style : {
height: 65 ,
backgroundColor: 'blue' ,
}
}
});
I have 3 Navigators. The MainNavigator is the root of the other two (Auth and Activities). Based on whether the user has successfully logged in, I need to route the user from the Auth Stack to the Activities stack. How can I do that? I can't seem to figure this out just yet (new to react-native, coming from Angular).
Here's the line of code that I use to navigate to the Activities stack:
this.props.navigation.navigate('Activities');
Auth:
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
Activities:
export const ActivitiesNavigator = TabNavigator({
ActivityList: {
screen: ActivityList
},
MyActivityList: {
screen: MyActivityList
},
CreateActivity: {
screen: CreateActivity
}
}, {
initialRouteName: 'ActivityList'
});
Main Navigator:
export const MainNavigator = StackNavigator({
Auth: { screen: AuthNavigator},
Activities: { screen: ActivitiesNavigator },
}, {
initialRouteName: 'Auth',
headerMode: 'none',
animationEnabled: 'true'
});
This actually works. Lack of sleep made me put the 'navigate' command in a different method. So in my App.js file I just need to return the MainNavigator and I'm good to go:
render() {
return (
<MainNavigator/>
);
}
Visit StackActions reset :
The reset action wipes the whole navigation state and replaces it with the result of several actions.
In Latest react-navigation version: 3.3.0, I have used: at Signup or Login so that to start Home/Main Flow
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
key: null, // <-this is imp.
actions: [
NavigationActions.navigate({ routeName: 'Main' })
],
});
this.props.navigation.dispatch(resetAction);
Remember: Adding key: null means master route will be null and not on any route. So we are free to navigate to the route in any Nested Stacks
key - string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
YOU DON'T NEED 3 Navigators. this is the way to do it with React Navigation
export const AuthNavigator = StackNavigator({
Login: {
screen: Login,
},
SignUp: {
screen: SignUp
},
Confirm: {
screen: ConfirmSignUp
},
Main: {
screen: ActivitiesNavigator
}
}, {
initialRouteName: 'Login',
headerMode: 'none',
animationEnabled: 'true'
});
I wanted to know how I can add tab navigation and stack navigation with react navigation in react native.
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, Dimensions } from 'react-native';
import {StackNavigator,TabNavigator} from 'react-navigation';
import Scores from './src/scores.js';
import Profile from './src/profile.js';
import Favourite from './src/favourite.js'
const MyApp = TabNavigator({
Scores: {
screen: Scores,
},
Favs: {
screen:Favourite ,
},
Profile: {
screen:Profile,
},
}, {
tabBarPosition: 'bottom',
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#F7C01C',
},
});
export default MyApp;
Here I have TabNavigation only working but I still need to add the stacknavigatio and maybe later I need to add Drawer Navigation.
You can nest Navigators. Just create a StackNavigator exactly as you created your TabNavigator and add it instead of a screen.
const MyFavs = StackNavigator({
FavouriteList: {
screen: FavouriteList,
},
ViewFavourite: {
screen: ViewFavourite,
},
}, {
initialRouteName: 'FavouriteList'
});
const MyApp = TabNavigator({
Scores: {
screen: Scores,
},
Favs: {
screen: MyFavs,
},
Profile: {
screen: Profile,
},
}, {
tabBarPosition: 'bottom',
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#F7C01C',
},
});
export default MyApp;
I keep getting this error every time i pass values to drawer config, but when i use it without passing any config it works fine.
I get error using this:
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
}, {
initialRouteName: 'Home',
drawerPosition: 'right',
});
No error using this:
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
});
I spent hours trying to figure it out but no luck.
Full code:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { Card, ListItem, Button, Icon } from 'react-native-elements'
import { DrawerNavigator } from 'react-navigation'
import HomeScreen from './Home'
import OptionsScreen from './Options'
import AboutUsScreen from './AboutUs'
const Drawer = DrawerNavigator({
AboutUs: { screen: AboutUsScreen },
Options: { screen: OptionsScreen },
Home: { screen: HomeScreen }
}, {
initialRouteName: 'Home',
drawerPosition: 'right',
});
export default Drawer ;
I have added:
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
to drawer config and it's working now :)