Develop Reference

react-native-chart-kit not working with navigation react native - expo

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.

React Navigation header not hiding

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.

Jumping between different navigators in react native using react-navigation

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'
});

StackNavigation and TabNavigation in the Same time

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;

Cannot read property 'routeName' of undefined - react navigation drawer

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 :)