I have createMaterialTopTabNavigator and createDrawerNavigator navigation system I want to add a menu bar icon to the screens of createMaterialTopTabNavigator , so I went to the screen/component and added this code , but nothing has been added and there is no errors at the console , could you please check my code if its correct
static.navigationOptions = {
headerLeft: () => {
return ( <Icon
name = 'menu'
size = { focused ? 28 : 20}
color = {tintColor}
style={{paddingTop:20}}
/>)}}
if you're trying to put the menu icon on top of the tabBar, you will have to use StackNavigator.
const TabPage = createMaterialTopNavigator({
...
})
const YNavigator = createStackNavigator ({
Home:{screen: TabPage,
navigationOptions: ({navigation}) => ({
headerLeft: <Icon name="home" size={15} color="blue" />,
})
},
})
hope this helps
Related
Currently, I was taking a course:Multiplatform Mobile App Development with React Native in coursera, and I was stuck at after every lecture because the instructor use react-navigation#2.0.1 but I want to make sure to learn the latest version(v5). In this lecture he created a stack navigator and bring an icon to a screen like,
import {createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: Menu,
navigationOptions: ({ navigation }) => ({
headerLeft: (
<Icon
name="menu"
size={24}
color="white"
onPress={() => navigation.toggleDrawer()}
/>
),
}),
},
Dishdetail: { screen: Dishdetail },
},
{
initialRouteName: 'Menu'
}
);
Where navigationOptions can be an object or be a function that takes in props.
I convert it like,
import { createStackNavigator } from '#react-navigation/stack';
import { Icon } from 'react-native-elements';
const MenuNavigator = createStackNavigator();
function MenuNavigatorScreen() {
return (
<MenuNavigator.Navigator
initialRouteName="Menu"
screenOptions={HeaderOptions}
>
<MenuNavigator.Screen
name="Menu"
component={Menu}
/>
<MenuNavigator.Screen
name="Dishdetail"
component={Dishdetail}
options={{ headerTitle: 'Dish Detail' }}
/>
</MenuNavigator.Navigator>
);
}
But I was confused how to convert the navigationOptions functionality into my code. Because their docs didn't tell how to trun my options object into a function to bring the navigation prop?
One more thing is he was using drawerIcon,
const MainNavigator = createDrawerNavigator(
{
navigationOptions: {
drawerLabel: 'Login',
drawerIcon: ({ tintColor }) => (
<Icon
name="sign-in"
type="font-awesome"
size={24}
color={tintColor}
/>
),
}
...
But I didn't find anything related drawerIcon in Drawer navigation docs
I heartily thank if anyone helps me to figure out this.
First of all, The options prop can be used to configure individual screens inside the navigator. And headerLeft is a function that returns a React element to display on the left side of the header. When a function is used, it receives several arguments when rendered (onPress, label, labelStyle, and more - check types.tsx for the complete list).
options = {
({
navigation
}) => ({
headerLeft: () => ( <
Icon name = 'menu'
size = {
24
}
color = 'white'
onPress = {
() =>
navigation.toggleDrawer()
}
/>
)
})
}
And for drawerIcon use:
options = {
{
drawerIcon: ({
tintColor
}) => ( <
Icon name = 'home'
type = 'font-awesome'
size = {
24
}
color = {
tintColor
}
/>
)
}
}
I have an issue where I do not know how to navigate from a screen in a bottom tab bar that looks like this:
default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-home" size={24} color={tintColor} />
}
},
Message: {
screen: MessageScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-chatboxes" size={24} color={tintColor} />,
OtherUser: { screen: OtherUserScreen }
}
},
Post: {
screen: PostScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-add-circle" size={48} color={"#4cdd75"} style={{
shadowColor: "#4cdd75",
shadowOffset: {
width: 0,
height: 0
},
shadowRadius: 10,
shadowOpacity: 0.3
}} />
}
},
Notification: {
screen: NotificationScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-notifications" size={24} color={tintColor} />
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-person" size={24} color={tintColor} />
}
}
}
With the createSwitchNavigator component looking like this:
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack,
OtherUser: OtherUserScreen
},
{
initialRouteName: 'Loading'
}
)
);
The AppContainer is the bottom tab navigator screen setup.
Additionally, My navigation from within my message screen looks like this:
const { navigate } = this.props.navigation;
...
onPress={() => navigate('OtherUser')}
From this message screen I want to navigate to the OtherUser screen so that the bottom tab navigator is still shown. Currently, the navigation navigates to the OtherUser screen, but the bottom tab navigator dissapears. And when I try to use the back button code navigation in my OtherUser Screen that looks like this:
onPress={() => navigate("MessageScreen")}
Nothing is shown. Would it be possible in any way to have the navigation from message screen to the other user screen seemless without deleting the bottom tab bar and without adding another component to it?
From what I see, what you're trying to do is wrong.
It makes sense that the bottomBar disappears because you use a SwitchNavigator to navigate between "AppContainer" and "OtherUser".
So the moment you navigate to "OtherUser", you are no longer in a bottomMenu navigation, you are simply in a SwitchNavigator!
To be able to do what you want to do, you should integrate a stackNavigator instead of MessageScreen,
then in this StackNavigator, you integrate your MessageScreen as well as OtherUser
Currently, your navigation seems to be like this:
- Loading
- App
-- bottomTabMenu
-- Home
-- Message
-- Posts
-- Notifications
-- Profile
- Auth
- OtherUser
So as you see, when you go to "OtherUser" you are not in a BottomMenu navigation anymore, besides that, you can't go back because actually, to be able to go back with a back button, you need to be in a stack navigation.
So if you want to be able to go to the user profile from your messageScreen, you need to wrap it in a navigation stack, and integrate this stack into your bottomMenu.
Your navigation should then look something like this:
- Loading
- App
-- bottomTabMenu
-- Home
-- Message
-- Stack Navigation
-- Message Screen (defaultRoute)
-- OtherUser Screen
-- Posts
-- Notifications
-- Profile
- Auth
So your code will be something like this:
const MessageStack = createStackNavigator(
{
Message: MessageScreen,
OtherUser: OtherUserScreen
},
{
initialRouteName: "Message"
}
)
default: createBottomTabNavigator(
{
...
Message: {
screen: MessageStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-chatboxes" size={24} color={tintColor} />,
OtherUser: { screen: OtherUserScreen } //Delete this line, the navigationOptions are only used to define styles or behaviors on the navigation.
}
},
...
}
I hope I understood the question and that this answer will help you!
Viktor
I want to set tab bar icon dynamically. i have tab bar and each screen of tab bar is stack of screen. i want to change the tab bar icon when i am moving between screens inside of stack of that tab screen.
I have code in tab bar like following:
const Tab = createBottomTabNavigator(
{
Invitations:{screen:invitationStack,
navigationOptions:() =>({
tabBarIcon: ({ tintColor }) => (
<Econ name="users" style={{color:tintColor}} size={16} />
),
})
},
Wishlist:{screen:wishListStack,
navigationOptions:() =>({
tabBarIcon: ({ tintColor }) => (
<Econ name="gift" style={{color:tintColor}} size={16} />
),
})
},
" ":{screen:wishStack
},
Notifications:Notifications,
Profile:{screen:profileStack,
navigationOptions:() =>({
tabBarIcon: ({ tintColor }) => (
<Econ name="user-circle" style={{color:tintColor}} size={16} />
),
})
}
}
and in my wishStack.js:
const wishStack = createStackNavigator({
main1:WishList,
addocassion:addocassion,
savedwishlist:SavedWishlist,
guest:AddWishListGuest,
item:WishItem,
occasion:AddWishOccasion,
add2item:Add2Items
}
there is stack navigator.
I want to change tab bar icon when i moving from main1 to addocassion in stack.
try this code my issue was solved my that-
https://github.com/react-navigation/react-navigation/issues/628
Is there a way to hide the bottom tab navigator when you scroll up the screen?
I have attempted to use route params to set tabBarVisible to false but I think it is not working because I have nested navigator. In other words, my tab in my tab navigator is another stack navigator.
In my bottom tab navigator I tried doing this...
Tab1: {
screen: OtherStack,
navigationOptions: ({navigation}) => {
const routeParams = navigation.state.params
return {
tabBarVisible: routeParams && routeParams.tabBarVisible,
tabBarIcon: ...
}
}
},
},
Then in my OtherStack I use createNavigator to create a screen like this...
NewScreen: {
screen: NewScreen,
navigationOptions: ({ navigation }) => {
return {
headerTitle: <Header />,
headerStyle: {backgroundColor: '#f6f6f6'},
headerLeft: null,
}
}
Then as a test, in the NewScreen I am calling a function via touchableOpacity onPress...
onPress={() => navigation.setParams({ tabBarVisible: false })}
But nothing happens. I want to get this to hide the tab bar when I click the button, and after I get that to work I want to call that function onScroll.
Does anyone know how to do this?
How to add ripple animation when a tabs is clicked in TabBarBottom. I want ripple effect just like Youtube app
You can use Screen's Navigation Options to add desired styled tabBarIcon
tabBarIcon
React Element or a function that given { focused: boolean, tintColor:
string } returns a React.Element, to display in tab bar
tabBarLabel
Title string of a tab displayed in the tab bar or React Element or a
function that given { focused: boolean, tintColor: string } returns
a React.Element, to display in tab bar. When undefined, scene title
is used. To hide, see tabBarOptions.showLabel in the previous
section.
tabBarOnPress
Callback to handle tap events; arguments are the scene: { route,
index } that was tapped and a jumpToIndex method that can perform
the navigation for you.
Example
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
navigationOptions: ({navigation}) => ({
tabBarIcon: ({focuced, tintColor}) => (
<MyCustomIcon focuced={focuced} tintColor={tintColor} name="Home" />
)
})
},
Notifications: {
screen: MyNotificationsScreen,
navigationOptions: ({navigation}) => ({
tabBarIcon: ({focuced, tintColor}) => (
<MyCustomIcon focuced={focuced} tintColor={tintColor} name="Notifications" />
)
})
},
});