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
Related
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
I have been working on this simple mobile application. I am trying to show some icon on the bottom tab navigation instead of labels, but the icons are not showing up. Can someone help me figure out what the problem is?
Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { Icon } from 'react-native-elements';
// Components
import Home from './src/components/home/Home'
import EventInfo from './src/components/common/eventInfo/EventInfo'
import Profile from './src/components/profile/Profile'
import Browse from './src/components/browse/Browse'
import Activity from './src/components/activity/Activity'
import homeIcon from './src/images/home.png'
import browseIcon from './src/images/home.png'
import activityIcon from './src/images/home.png'
import profileIcon from './src/images/home.png'
import myIcon from './src/images/activity.png';
const HomeStackNavigator = createStackNavigator({
Home: {
screen: Home
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Home',
})
const BrowseStackNavigator = createStackNavigator({
Browse: {
screen: Browse
},
},{
initialRouteName: 'Browse',
})
const ActivityStackNavigator = createStackNavigator({
Activity: {
screen: Activity
},
},{
initialRouteName: 'Activity',
})
const ProfileStackNavigator = createStackNavigator({
Profile: {
screen: Profile
},
EventInfo: {
screen: EventInfo
},
},{
initialRouteName: 'Profile',
})
const AppNavigator = createBottomTabNavigator({
Home : HomeStackNavigator,
Browse: BrowseStackNavigator,
Activity: ActivityStackNavigator,
Profile : ProfileStackNavigator,
},{
initialRouteName:'Profile',
defaultNavigationOptions: ({ navigation }) => ({
tabBaricon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={myIcon}
style={{width:30, height:30}}
/>
);
},
}),
tabBarOptions: {
}
}
);
export default createAppContainer(AppNavigator);
This should fix your issue. You should also consider going through the docs here and here to understand better.
...
const AppNavigator = createBottomTabNavigator({
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
EventInfo: {
screen: EventInfo,
navigationOptions: {
tabBarIcon: ({ focused }) => (
<Icon
name='rowing' />
)
}
},
}, {
initialRouteName:'Profile',
});
...
Kindly let me know if this helped.
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 am building an App on React-Native for which I am using React-Navigation
Now, Inside that i am using Stack-Navigation and TabNavigator (updated it DrawerNavigator)
import {
createStackNavigator,
TabNavigator,
DrawerNavigator
} from 'react-navigation';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
import CoinCap from './src/container/CoinCap.js';
//THis is being Exported to App.js
export const Tab = TabNavigator({
TabA: {
screen: CoinCap
},
TabB: {
screen: CoinCap
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyScreen = createStackNavigator({
Home: {
screen: CoinCap
},
CoinCapCharts: {
screen: CoinCapCharts
}
},{
initialRouteName: 'Home',
headerMode: 'none'
});
export const Drawer = DrawerNavigator({
Tabs: { screen: Tab },
Stack: { screen: MyScreen },
})
I am importing this in my App.js where I am doing something like this
import React from 'react';
import {
Drawer
}from './Screen.js';
import {
View
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Drawer/>
<Tab/>
</View>
);
}
}
Now, This is indeed showing Tab the first time I run my app but after I navigate to different screen and return back, It doesn't appear to be showing that Tab again
[Question:] What could I be doing wrong and How can I fix it?
Try to define one within the other.
Something like:
const Tab = TabNavigator({
TabA: {
screen: Home
},
TabB: {
screen: Home
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyStack = createStackNavigator({
Home: {
screen: Home
},
CoinCapCharts: {
screen: CoinCapCharts
},
Tab: {
screen: Tab
},
},{
initialRouteName: 'Home',
headerMode: 'none'
});
Now, render MyStack (not sure that Screen is the best name :)
export default class App extends React.Component {
render() {
return (
<View>
<MyStack />
</View>
);
}
}
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?