I made an App using react-navigation library.
App.js Codes are as follow:
import React from 'react';
import { TabNavigator } from 'react-navigation';
import ProfilePage from './ProfilePage';
import NewsFeedPage from './NewsFeedPage';
import SearchPage from './SearchPage';
import NewPostPage from './NewPostPage';
import FavouritePage from './FavouritePage';
// Tab Bar
const TabBarContainer = TabNavigator({
NewsFeed: {
screen: NewsFeedPage,
},
Search: {
screen: SearchPage,
},
NewPost: {
screen: NewPostPage,
},
Favourite: {
screen: FavouritePage,
},
Profile: {
screen: ProfilePage,
},
}, {
tabBarOptions: {
activeTintColor: '#E87E90',
tabBarPosition: 'bottom',
showLabel: false,
showIcon: true,
}
});
export default TabBarContainer;
I would like to show the NewPost tab in modal way. Is it possible to show modal screen when I switch to a specific tab with TabNavigator of react-navigation library?
Related
I can not remove the header from all screens, I tried this setting below, but still the headers are not removed. Is it if I'm putting the navigationOptions settings incorrectly?
import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './telas/Home'
import Login from './telas/Login'
import Cadastro from './telas/Cadastro'
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
navigationOptions:{
header:null
}
})
const AppContainer = createAppContainer(stackNavigator);
export default AppContainer;
Pass defaultNavigationOptions instead of navigationOptions.
defaultNavigationOptions: {
header: null
}
You can use headermode
headerMode - Specifies how the header should be rendered:
float - Render a single header that stays at the top and animates
as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header
fades in and out together with the screen. This is a common pattern
on Android.
none - No header will be rendered.
Exmaple
const ModalNavigator = createStackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
defaultNavigationOptions: {
gesturesEnabled: false,
}
}
)
Usage
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
headerMode: 'none'
})
We need to specify the headerMode in createStackNavigator.
Try using this
const stackNavigator = createStackNavigator({
Home:{
screen:Home,
},
Login:{
screen:Login
},
Cadastro:{
screen:Cadastro
},
},
{
headerMode: 'none'
})
I am implementing createMaterialTopTabNavigator in one screen but nothing is rendering in my app. i am returning MainNavigator which is app container of this screen. am i making mistake to use to app containers or not ? if it is mistake then please guide me how to work with proper flow in react navigation like in app using drawer navigator ,bottom navigator and top navigator at same time.
App Flow :
MainScreenNavigation > MainJobScreen >
MainScreenNavigation code:
import React from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";
import {Signin} from "../screens/Signin";
import {Splash} from '../screens/Splash';
import {HomeScreen} from '../screens/Home/HomeScreen'
import {Profile} from '../screens/Profile/Profile'
import {Notifications} from '../screens/Notifications/Notifications'
import {MainJobScreen} from '../screens/JobFeed/MainJobScreen'
export const MainScreenNavigation = createAppContainer(createStackNavigator({
Home: {
screen: Splash
},
Signin: {
screen: Signin
},
HomeScreen: {
screen: HomeScreen
},
Profile: {
screen: Profile
},
Notifications: {
screen: Notifications
},
JobFeed: {
screen: MainJobScreen
}
}));
;
MainJobScreen code: acutaly where i am using createMaterialTopNavigator
import React from 'react'
import {createMaterialTopTabNavigator,createAppContainer,createStackNavigator } from 'react-navigation'
import { AllTab } from './AllTab'
import { ActiveTab} from './ActiveTab'
import { CompletedTab } from './CompletedTab'
import { JobScreen} from './JobScreen'
const TabNavigator = createMaterialTopTabNavigator({
TabOne: AllTab,
TabTwo: ActiveTab,
TabThree: CompletedTab,
},
{
initialRouteName: 'TabOne',
tabBarOptions: {
style: {
backgroundColor: 'red'
}
},
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
})
TabNavigator.navigationOptions={
headerTitle: 'JobFeed'
}
const MainNavigator= createAppContainer(createStackNavigator({
Tabs: TabNavigator,
MainScreen: JobScreen,
},{
initialRouteName: 'MainScreen'
}))
export class MainJobScreen extends React.Component{
static navigationOptions = {
headerTitle: 'JobFeed'
}
render(){
return(
<MainNavigator />
)
}
}
Help will be highly appreciated
Thanks in advance
Mixing the Nav Stacks is your solution here brother.
You have to put the tab navigator inside of your main navigator!
and when the navigation stack hits the TabScreen it will show up the first default screen of the tab navigator you have created.
//....your imports
export const MainScreenNavigation = createAppContainer(createStackNavigator({
Home: {
screen: Splash
},
Signin: {
screen: Signin
},
HomeScreen: {
screen: HomeScreen
},
Profile: {
screen: Profile
},
Notifications: {
screen: Notifications
},
JobFeed: {
screen: MainJobScreen
},
JobFeed: {
screen: MainJobScreen
},
TabScreen: {
screen: TabNavigator //------> add this in your main navigator
}
}));
;
now the stack should go like this!
a file exporting your main navigatior which should be used in your App.js
and in that navigation stack your Tabnavigation stack should be added like you add any other screen or so as shown in code
NOTE ! you should be separately exporting the TabScreen Navigator from a file! and if you are using the navigator in your code file MainScreen then that main Screen should be in the Tab navigation stack's first screens!
I have created a different class for navigation to maintain the state of loggedIn and loggedOut user as follows:-
import React from "react";
import { createStackNavigator, createSwitchNavigator, DrawerNavigator } from "react-navigation";
import DrawerContent from "../views/Sidebar"
import Profile from '../views/Profile';
import Extra from '../views/Extra';
import SignIn from '../views/SignIn';
import Home from '../views/Home';
import Info from '../views/Info';
import Logout from '../views/Logout';
export const SignedIn = createStackNavigator({
Home: {
screen: Home,
},
Profile: {
screen: Profile,
},
Extra: {
screen: Extra,
}
});
export const SignedOut = createStackNavigator({
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Sign Up",
headerRight: <Text>Hi</Text> //calling this gives an error
}
},
});
export const RootNavigator = (signedIn = false) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn,
navigationOptions: {
gesturesEnabled: false
}
},
SignedOut: {
screen: SignedOut,
navigationOptions: {
gesturesEnabled: false
}
}
}, {
headerMode: "none",
mode: "modal",
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
I want to create a button in navigation bar on signUp screen but it is giving an error like :-
header Title is easily shown onto screen but the right and left button doesn't seems to be appear. Any help on this.
Your header button must be a component
The way you are using is not pointing to a valid component
To do that either create a new component 'HeaderRight' and import it like you did for the 'Home' component,then point your headerRight property to it
Like headerRight:HeaderRight
Or simply wrap your text element within parenthesis like this
headerRight:(<Text>Hi</Text>)
Try and tell me if it is solved
Best regards
I'm using react-navigation. Using stack navigator and a drawer nested inside it.How to call componentdidmount and this.props.navgation.navigate in the code below. I have some event which is supposed to navigate user to particular screen rather than following initial route of Drawer.
import React from "react";
import { Platform, Text } from "react-native";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator} from "react-navigation";
import Register from "./components/Register";
import Home from "./components/home/";
import Dashboard from "./components/Dashboard/";
import SideBar from "./components/sidebar";
import Screen1 from "./components/Screen1/";
import Screen2 from "./components/Screen2/";
import Screen3 from "./components/Screen3/";
const Drawer = DrawerNavigator(
{
Dashboard: { screen: Dashboard },
Screen1: { screen: Screen1 },
Screen2 : { screen: Screen2 },
},
{
navigationOptions: {
gesturesEnabled: false,
},
initialRouteName: "Dashboard",
contentOptions: {
activeTintColor: "#e91e63"
},
drawerPosition: 'right',
contentComponent: props => <SideBar {...props} />
}
);
const AppNavigator = StackNavigator(
{
Home: { screen: Home },
Register: { screen: Register },
Drawer: { screen: Drawer },
Screen3: { screen: Screen3 },
},
{
headerMode: "none",
}
);
//HOW TO WRITE COMPONENTDIDMOUNT HERE AND CALL //THIS.PROPS.NAVIGATION.NAVIGATE
export default () =>
<Root>
<AppNavigator />
</Root>;
You are not creating a component, then you won't be able to "write" ComponentDidMount here.
<Root> have it's own componentDidMount, which runs when you render it.
Be sure to have a good understanding of how React and JSX work together :
https://reactjs.org/docs/rendering-elements.html
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.