I'm using TabNavigator from 'react-navigation'. I want to hide or remove Text under icons.
Here is a part of TabNavigator. (I'm using Expo)
Camera: {
screen: CameraScreen,
},
Noti: {
screen: NotificationScreen,
},
Menu: {
screen: MenuStackNavigator,
},
},
{
navigationOptions: ({ navigation }) => ({
header: null, <<<
tabBarIcon: ({ focused }) => {
...
},
}),
header: null, <<<-
headerMode: 'none', <<--
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
backBehavior: 'none',
And this is CamaraScreen
class CameraScreen extends Component {
static navigationOptions = {
title: 'Camera'
}
You can hide the label by specifying showLabel: false for the tabBarOptions object:
backBehavior: 'none',
tabBarOptions: {
showLabel: false
}
You can hide the label by specifying tabBarShowLabel: false for the screenOptions object:
headerShown: false,
tabBarStyle: { backgroundColor: "#000000", borderTopWidth: 0 },
tabBarShowLabel: false,
}}```
Related
I have a bottomTabNavigator with some groups of screens:
{
Home: {
screen: Home,
navigationOptions: {
tabBarTestID: 'homeMenuButton',
tabBarIcon: TabItem('home'),
},
},
Beneficios: {
screen: AdvantageClub,
navigationOptions: {
tabBarTestID: 'beneficiosMenuButton',
tabBarIcon: TabItem('loyalty'),
tabBarLabel: 'Benefícios',
},
},
Repom: {
screen: RepomScreen,
navigationOptions: {
tabBarTestID: 'saldoMenuButton',
tabBarIcon: TabItem('attach-money'),
tabBarLabel: 'Saldo',
},
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarTestID: 'profileMenuButton',
tabBarIcon: TabItem('person'),
tabBarLabel: 'Perfil',
},
},
},
{
initialRouteName: 'Home',
tabBarOptions: {
activeTintColor: colors.blue.primary,
inactiveTintColor: colors.blue.secondary,
style: {
height: 64,
borderTopWidth: 0,
paddingVertical: 0,
},
tabStyle: {
paddingVertical: 8,
},
},
},
);
Inside of "Beneficios" (screen: AdvantageClub) i have one StackNavigator:
const AdvantageClub = createStackNavigator(
{
WebView: AdvantageClubScreen,
AdvantageClubSignUp: AdvantageClubSignUpScreen,
AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
AdvantageClubTerms: AdvantageClubTermsScreen,
},
{
initialRouteName: 'AdvantageClubSignUp',
...noHeader,
},
);
I need to open this WebView (AdvantageClubScreen) out of my bottomTabNavigator, like a new window. When i use navigator.navigate('WebView') the bottom menu keeps on screen.
What version of react-navigation are you using ?
I guess it's the V4, then in your nested StackNavigator "AdvantageClub" you can use tabBarVisible property in navigationOptions with something like this :
AdvantageClub.navigationOptions = ({navigation}) => {
const routes = navigation.state.routes;
const tabBarVisible = routes[routes.length -1].routeName === 'WebView'
return {tabBarVisible};
};
For calling a stackNavigator we use props.navigation.navigate('home').
But how to call for alert when i clicked on a bottom tab navigation icon.
You can use tabBarOnPress in navigationOptions as below
CreatePostt: {
screen: createStackNavigator(
{
CreatePost: {
screen: CreatePost,
navigationOptions: {
// header: null
}
},
PostExpanded: {
screen: PostExpanded,
navigationOptions: {
title: "Upload Post",
headerStyle: {
elevation: 1
},
}
},
},
{
defaultNavigationOptions: {
headerTitleStyle: {
fontWeight: "bold"
}
}
}
),
navigationOptions: {
tabBarOptions: {
showIcon: true,
showLabel: false
},
tabBarVisible: false,
labelStyle: { margin: 0, padding: 0 },
title: "",
tabBarIcon: ({ focused }) => <BtnPost style={{ marginTop: 15 }} />,
tabBarOnPress: ({ navigation, defaultHandler }) => {
}
}
},
thanks.. it is working.....
const AlertStack = createStackNavigator(
{
Alert: AlertScreen
},
);
AlertStack.navigationOptions = {
tabBarOnPress: () => {
alert('Hello');
},
};
I have an app in React Native v3. I have MaterialTopTabNavigator with text. It's working fine. But I need to add icons above text of tabs.
https://pasteboard.co/IuTpjGz.png
I have tried this (CommonIcon is my element, but I have also tried Icon from react-native-elements), but it's not working and VScode says ''CommonIcon' refers to a value, but is being used as a type here.'
When I run it in emulator, I got SyntaxError.
HomeScreen:{
screen:HomeScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => (
<CommonIcon name="ios-bookmarks" size={20}/>
)
},
},
...
tabBarOptions: {
showIcon: true
},
So my question is, how to createMaterialTopTabNavigator in React Native 3 with both labels and icons?
My colleague figured it out.
You should not put navigationOptions to the createMaterialTopTabNavigator. They belong to the page you want to go. In that page, you can specify options for it.
Main Page and Tab Navigator
export const IndraMainPage = createMaterialTopTabNavigator(
{
MarketTab: MarketPage,
TradesTab: TradesPage,
OrdersTab: OrdersPage,
EventsTab: EventsPage,
ReportsTab: ReportsPage,
},
{
order: ['ReportsTab', 'TradesTab', 'MarketTab', 'OrdersTab', 'EventsTab'],
initialRouteName: 'MarketTab',
tabBarPosition: 'bottom',
backBehavior: 'none',
lazy: true,
swipeEnabled: true,
tabBarOptions: {
upperCaseLabel: false,
activeTintColor: COLOR_PRIMARY,
inactiveTintColor: COLOR_TEXT,
showIcon: false,
tabStyle: {height: 55, flexDirection: 'column', padding: 0, paddingTop: 10},
style: {
backgroundColor: 'rgb(250,250,250)',
},
indicatorStyle: {backgroundColor: 'transparent'},
},
},
);
and then the specific page
export default class EventsPage extends Component<EventsPageProps, EventsPageState> {
static navigationOptions = {
tabBarVisible: true,
tabBarLabel: ({tintColor}: TabBarLabelProps) => (
<CenteredColumn>
<CommonIcon name="calendar" size={20} color={tintColor ? tintColor : COLOR_TEXT} />
<CommonText xs style={{color: tintColor ? tintColor : COLOR_TEXT}}>
Events Tab
</CommonText>
</CenteredColumn>
),
};
...
I am using both createStackNavigator & createDrawerNavigator but the stackNavigator isn't working i can't navigate to any page. here is the app.js
const DrawerNavigator = createDrawerNavigator({
homeScreen: {
screen: homeScreen,
navigationOptions: ({ navigation }) => {
return {
title: 'Home',
headerStyle: {
backgroundColor: '#231f20',
height: 0,
},
headerLeft: null,
gesturesEnabled: false,
}
},
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Makeup',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
categoryScreen: {
screen: categoryScreen,
navigationOptions: ({ navigation }) => ({
title: 'Photographers',
//title: navigation.getParam('category'),
headerStyle: {
backgroundColor: '#231f20',
},
headerTintColor: '#f5f5f5',
}),
},
},
{
contentOptions: {
activeTintColor: '#d03036',
activeBackgroundColor : '#f5f5f5',
inactiveBackgroundColor : 'rgba(0,0,0,0)',
inactiveTintColor: '#545f7a',
itemStyle: {
marginVertical: 0,
},
labelStyle: {
fontWeight:'bold',
backgroundColor: 'transparent'
}
},
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
initialRouteName: 'homeScreen',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
});
const AuthStackNavigator = createStackNavigator(
{
loadingScreen: {
screen: loadingScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
loginScreen: {
screen: loginScreen,
navigationOptions: ({ navigation }) => {
return {
header: null,
}
},
},
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({ navigation }) => {
return {
header: null,
gesturesEnabled: false
}
},
},
},
{
initialRouteName: 'loadingScreen',
// mode: 'modal',
headerMode: 'screen', // screen on android
// headerBackTitleVisible: false,
headerTransitionPreset: 'fade-in-place',
headerLayoutPreset: 'center',
cardStyle: {},
}
);
const NavigationApp = createAppContainer(AuthStackNavigator);
// Export the App
export default NavigationApp;
import { useScreens } from 'react-native-screens';
useScreens();
i tried exporting the DrawerNavigator but then the stacknavigator isn't working anymore can i use both at the same time ?
also i got design issue when doing so i tried searching for hours but with no luck
I initially had this routing set up below with a tabNagivator and I was navigating to the 'Home' route and passing parameters using:
this.props.navigation.navigate('Home',{station:e,code:f,filter:'',filterName:'',offset:0});
Routing:
const PrimaryNav = TabNavigator({
Home: {
screen: LaunchScreen,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
},
Map: {
screen: MapScreen,
navigationOptions: {
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/locationTab.png')
}
style = {
[styles.icon]
}
/>
),
},
},
}, {
headerMode: 'none',
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: '#ffffff',
indicatorStyle: {
borderBottomColor: '#33b2f4',
borderBottomWidth: 3,
},
style: {
backgroundColor: '#000', // Makes Android tab bar white instead of standard blue
paddingTop: 5,
}
},
});
What I now want to do is replace 'LaunchScreen' in Home route with a stackNavigator but I don't know how to now pass the parameters to the stackNavigator down to the 'LaunchScreen':
const FeedStack = StackNavigator({
Launch: {
screen: LaunchScreen,
navigationOptions: {
header: null,
},
},
Tweets: {
screen: TweetScreen,
navigationOptions: {
title: 'Service Tweets',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#000'
},
},
},
}, {
initialRouteName: 'Launch',
}
);
const PrimaryNav = TabNavigator({
Home: {
screen: FeedStack,
navigationOptions: {
swipeEnabled: false,
tabBarIcon: ({
tintColor
}) => ( <
Image source = {
require('../Images/trains.png')
}
style = {
[styles.icon]
}
/>
),
},
}...
I solved this by navigating to the route and storing the parameters in my mobX store bypassing the navigation parameters altogether.