I'm trying to use StackNavigator and I want to use the same Navigation throught my other screens.
My config:
expo version :3.0.10
"react-navigation": "^4.3.6",
"react-navigation-stack": "^2.3.10"
In my Navigation.js:
import { createAppContainer } from 'react-navigation'
import { createStackNavigator} from 'react-navigation-stack'
import Step1 from '../Components/Steps/Step1'
import Step2 from '../Components/Steps/Step2'
const StepsStackNavigator = createStackNavigator({
Step1: {
screen: Step1,
navigationOptions: {
title: 'Etape 1',
}},
Step2: {
screen: Step2,
navigationOptions: {
title: 'Step2'
}
}
})
export default createAppContainer(StepsStackNavigator)
Here is the props I want to share but I want to keep title for each screens
headerStyle: {backgroundColor: 'rgba(255, 255, 0, 0.7)'},
headerTintColor: 'black',
headerTitleStyle: {fontWeight: 'bold'}
Somebody can help me please !
This is a good example of how I've got the stack navigator set up currently, your options have been pasted in.
const MainStackNavigator = createStackNavigator({
Step1: {
screen: Step1,
navigationOptions: {
title: 'Etape 1'
}
},
Step2: {
screen: Step2,
navigationOptions: {
title: 'Step2'
}
}
}, {
headerStyle: {backgroundColor: 'rgba(255, 255, 0, 0.7)'},
headerTintColor: 'black',
headerTitleStyle: {fontWeight: 'bold'}
});
const AppNav = createAppContainer(MainStackNavigator);
export default AppNav;
If you have intellisense installed its possible to cmd click on the import of createStackNavigator and view the parameters it takes in, specifically the second argument. Cmd clicking any of them will take you to the declaration and show you the available config options.
Related
I am trying to style the header in react-navigation where the object is automatically generated by Expo.
I am trying to style the header background and the orientation of the title.
I tried every possible place, including navigationOptions but all failed.
In below code tab bar background color is correctly changed. But same method failed for header.
Any guidance appreciated.
import React from 'react';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: "Links",
tabBarIcon: ...
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: "Settings",
tabBarIcon: ...,
};
export default createBottomTabNavigator(
{
LinksStack,
SettingsStack,
},
{
tabBarOptions: {
style: {
backgroundColor: '#123456',
},
}
},
);
try this:
static navigationOptions = {
title: 'Chat',
headerStyle: { backgroundColor: 'red' },
headerTitleStyle: { color: 'green' },
}
You can try this
export default createBottomTabNavigator(
{
LinksStack: {
screen: LinksStack,
navigationOptions: LinksStack.navigationOptions(), // style here
},
SettingsStack,
}
You can try this by passing using headerStyle inside each screen by
export default createBottomTabNavigator({
LinkStack: {
screen: LinkScreen,
navigationOptions: { // you need to call LinkStack.navigationOptions here
headerTitle: 'LinkScreen',
headerStyle: {
backgroundColor: 'red',
...otherStyles,
},
},
}
})
Or you can make use of defaultNavigationOptions inside your stackNavigator if you don't have specific header styles for your different screens.
In your case, you need to call LinkStack.navigationOptions for navigationOptions.
Finally I figured out what I was doing wrong.
It seems I was searching the answer in wrong place. The following change solved the problem:
class LinksScreen extends React.Component {
static navigationOptions = {
title: "Links Title",
headerStyle: { backgroundColor: '#123456', },
headerTitleStyle: { color: "#654321" },
};
...
}
I'm using react-navigation v3 recently, so as using the createStackNavigator function for stack navigation. So as expected, it should return the default back button on the header in working condition.
But unfortunately, the back button renders perfectly but it's not being able to work.
Below is my code and I've separated a routes.js file for all sorts of navigation routes and importing in the screens accordingly subject to its use.
import ...
import ...
import ...
class Router extends Component{
async componentDidMount() {
await Font.loadAsync({
//...
});
}
render(){
return (
<Navigator />
)
}
}
const StackNavigator = createStackNavigator({
Home: {
screen: Landing
},
Login: {
screen: Login
},
ResetPassword: {
screen: ResetPassword
},
SetPassword: {
screen: SetPassword
},
Signup: {
screen: Signup
},
Dashboard: {
screen: Dashboard
},
MealsRecipe: {
screen: MealsRecipe
}
},{
initialRouteName: 'Home',
headerLayoutPreset: 'center'
})
const Navigator = createAppContainer(StackNavigator);
export default Router;
Can you please figure out the problem behind it?
Thank you :)
After a lot of experiment, surprisingly I found that in headerStyle: giving paddingBottom: messes up the clicking functionality in the back button.
But had no idea, why this?
If anyone has any words about it then please do comment.
I had my headerStyle like below;
headerStyle: {
height: 0,
marginTop: 0,
paddingTop: 10,
paddingBottom: 30,
backgroundColor: '#cb7429'
},
Hello am developing app in React-Native and got below error :
Error : The component for route 'AuthLogin' must be a React componet.
My Navigation flow is as below :
const AppStack = createStackNavigator(
{
Home: HomeScreen,
ImageDetails: ImageDetailsScreen,
},
{
initialRouteName: 'Home',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
});
const AuthTabStack =createTabNavigator(
{
AuthLogin : AuthStack,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen,
}
);
const AuthStack = createStackNavigator(
{
Login: LoginScreen,
Register: RegisterScreen,
},
{
initialRouteName: 'Login',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#000',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
});
const RootStack = createSwitchNavigator(
{
Splash: SplashScreen,//Checking user Authntication
App: AppStack,
Auth: AuthTabStack,
},
{
initialRouteName: 'Splash',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
The navigation starts from the RootStack. Contains Splash screen first.
Checking for user login in this screen and accordingly navigating user to either AppStack or AuthTabStack.
Why this error am I getting ?
Is there any issue with TabNavigator ?
Thanks.
EDIT :
==> This is working :
const AuthTabStack = createTabNavigator(
{
//AuthLogin: AuthStack,
Login: LoginScreen,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen
}
);
But, StackNavigator inside TabNavigator has an issue :
const AuthTabStack = createTabNavigator(
{
AuthLogin: AuthStack,
//Login: LoginScreen,
InstaLogin: InstagramLoginScreen,
FacebookLogin: FacebookLoginScreen
}
);
===================================================
You have a space after AuthLogin, AuthLogin : AuthStack, instead of AuthLogin: AuthStack,. This could be causing the error.
If this doesn't fix, try AuthLogin: { screen: AuthStack },
my code from that entire page is included below and my entire repo is here:
https://github.com/practicia1234/Practicia/commit/d66a23beece1b293c51b4b791f546a2351e6351b
. I am somehow not able to get this drawer navigation to work. For my model, I used the tutorial from here. This is the repo for that tutorial since it has a similar set up as mine, meaning that the first few screens are sign up and login screens and do not have a drawer exposed to the user. I am not sure what i am doing wrong here and would really appreciate if someone could help me a little. Trying to understand drawer navigation for the first time. Thanks!
Here is the error i get:
import React from 'react';
import { Text, Animated, Easing } from 'react-native';
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
// Home scenes
import Home from '../scenes/Home';
import Dashboard from '../scenes/Dashboard';
// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';
// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';
// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/students/individuals';
import FirstScreen from '../scenes/drawer/FirstScreen';
import SecondScreen from '../scenes/drawer/SecondScreen';
import ThirdScreen from '../scenes/drawer/ThirdScreen';
// Group
import Groups from '../scenes/students/groups';
// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/students/pending';
//import DrawerContainer from '.../components/DrawerContainer'
// const noTransitionConfig = () => ({
// transitionSpec: {
// duration: 0,
// timing: Animated.timing,
// easing: Easing.step0
// }
// });
// Constant for tab menus
const submissionMenu = {
screen: TabNavigator({
All: { screen: AllPractice },
Practice: { screen: Practice },
PlayingTests: { screen: PlayingTests },
Questions: { screen: Questions }
}, {
tabBarPosition: 'top',
flex: 2 / 3,
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50,
},
}
}
)
};
const studentMenu = {
screen: TabNavigator({
Individuals: { screen: Individuals },
Groups: { screen: Groups },
Pending: { screen: Pending }
}, {
tabBarPosition: 'top',
flex: 2 / 3,
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50,
},
}
}
)
};
const DrawerStack = DrawerNavigator({
screen1: { screen: FirstScreen },
screen2: { screen: SecondScreen },
screen3: { screen: ThirdScreen },
});
const DrawerNavigation = StackNavigator({
DrawerStack: { screen: DrawerStack }
}, {
headerMode: 'float',
navigationOptions: ({ navigation }) => ({
headerStyle: { backgroundColor: '#4C3E54' },
title: 'Welcome!',
headerTintColor: 'white',
})
});
const LoginStack = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: {
screen: TabNavigator({
Submissions: submissionMenu,
Students: studentMenu,
Awards: { screen: AwardsScreen },
GameOn: { screen: GameOnScreen },
Uploads: { screen: UploadsScreen }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50,
}
}
}),
},
},
{
headerMode: 'float',
navigationOptions: {
headerStyle: { backgroundColor: '#E73536' },
title: 'You are not logged in',
headerTintColor: 'white'
}
});
const navigator = StackNavigator({
loginStack: { screen: LoginStack },
drawerStack: { screen: DrawerNavigation }
}, {
// Default config for all screens
headerMode: 'none',
title: 'Main',
initialRouteName: 'loginStack'
});
export default navigator;
When you execute navigation.navigate('DrawerOpen').
That 'navigation' is not drawer's but StackNavigation's.
If you want to access drawer's navigation, you should call it from children screen in Drawer like FirstScreen, SecondScreen or ThirdScreen.
Execute this.props.navigation.navigate('DrawerOpen') from those Screen.
I am trying to implement a drawer navigator in my project. The drawer will appear in all of the following Scenes: AllPractice, Practice, Playing Tests, Question (all tabs)
Individuals, Groups, Pending. (also tabs).
And all of the other main screens: Awards, GameOn, Uploads.
The issue is I don't know where to implement it in my project.
All my navigation is in the navigation folder.
This is the basic code for the drawer:
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: FirstScreen },
SecondScreen: { Screen: SecondScreen }
});
Here is where all my navigation code is: its in this file
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
// Home scenes
import Home from '../scenes/Home';
// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';
// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';
// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/practice/Individuals';
import FirstScreen from '../scenes/drawer/firstScreen';
import SecondScreen from '../scenes/drawer/secondScreen';
// Group
import Groups from '../scenes/group/Groups';
// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/upload/Pending';
// Constant for tab menus
const submissionMenu = {
screen: TabNavigator({
All: { screen: AllPractice },
Practice: { screen: Practice },
PlayingTests: { screen: PlayingTests },
Questions: { screen: Questions }
}, {
tabBarPosition: 'top',
flex: 2 / 3,
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50
},
}
}
)
};
const studentMenu = {
screen: TabNavigator({
Individuals: { screen: Individuals },
Groups: { screen: Groups },
Pending: { screen: Pending }
}, {
tabBarPosition: 'top',
flex: 1 / 2,
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}
)
};
// Navigation defined
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: {
screen: TabNavigator({
Submissions: submissionMenu,
Students: studentMenu,
Awards: { screen: AwardsScreen },
GameOn: { screen: GameOnScreen },
Uploads: { screen: UploadsScreen }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}),
navigationOptions: {
title: 'PRACTICIA',
headerLeft: null,
headerStyle: {
backgroundColor: '#33ACDE',
},
headerTitleStyle: {
color: 'white'
}
}
}
});
export default navigator;
Drawer Navigation is like a Tab navigation. It means if you want to use a Drawer to offer a user to navigate your app, then forget about the tabs.
Or, if you want to use a drawer just as a controller like you put some buttons on it.
then, it will be like this.
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: navigator },
});
I put your 'navigator' on the drawer navigation. Then you can use AppDrawerNavigator as a root.
Then, you can use 'contentComponent' in drawerNavigatorOption to put some buttons or view.