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.
Related
I tried lots of things to open drawer but nothing works for me. I do not understand how to combine navigators like I have, one is createStackNavigator and second is createDrawerNavigator. Please check my code if anything goes wrong so let me know otherwise provide me a link or code to implement. thanks
App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';
import SignupScreen from './src/screens/SignupScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import CaseListingScreen from './src/screens/CaseListingScreen';
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import SideBar from './src/SideBar';
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Home',
}
);
const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(AppNavigator, DrawerNavigator);
DashboardScreen.js
export default class DashboardScreen extends Component {
static navigationOption = {
drawerLabel: 'Home'
}
render() {
return (
<Container>
<Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
<Appbar.Action icon="menu" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
<Appbar.Content
title="Manage My Case"
subtitle="Dashboard"
/>
</Appbar.Header>
</Container>
);
}
}
In your export default createAppContainer(AppNavigator, DrawerNavigator); , you should have the drawerNavigator as the app container and not along with App navigator.
createAppContainer contains only 1 arguement , so pass DrawerNavigator in the app container, and if you want to use the stackNavigator inside the drawer navigator just create the drawernavigator as ,
const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
AppScreen:{
screen:AppNavigator // this is new , im adding stacknavigaoter to your drawer.
}
},
{
initialRouteName: 'Home',
}
);
export default createAppContainer(DrawerNavigator);
Hope that helps, otherwise feel free for doubts.
Mention your drawer navigator inside the stacknavigator just like below,
const myDrawerNavigator = createDrawerNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myDrawerNavigator ,
navigationOptions: {
header: null,
},
},
})
Modify the above code as per your screen name and it will works fine...
I hope this helps thanks... :)
I'm learning react native and I did manage to get 2 tabbars up and running.
Now I'm trying to add a 3rd tabbar but every time I try to add a 3rd tabbar I only see 2 tabbars. I'm a little bit stuck and hope some one can help with some codeing.
import React from 'react';
import {
createMaterialTopTabNavigator,
} from 'react-navigation';
import FoldersList from '../screens/FoldersList';
const Routes = {
Home: {
screen: (props) => <FoldersList {...props} tabIndex={0}/>,
navigationOptions: {
title: 'Home'
}
},
MyNewTab: {
screen: (props) => <FoldersList {...props} tabIndex={1} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My New Tab'
}
},
MyThirdTab: {
screen: (props) => <FoldersList {...props} tabIndex={2} createFolderTitle='Create new tab folder' />,
navigationOptions: {
title: 'My Third Tab'
}
}
}
const routeConfig = {
swipeEnabled: false
}
export default TabNavigator = createMaterialTopTabNavigator({
...Routes
}, routeConfig);
Your code has a syntax error and it's probably not compiling. Change the following:
export default TabNavigator = createMaterialTopTabNavigator({
to
export default createMaterialTopTabNavigator({
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'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