How to change height of bottom material tab navigator from react-naviagtion

Question

I am trying to create a responsive app that will look good on every screen size. The only thing that is not scaling properly is the bottom navigator( this one ). Tablets are the biggest problems because the navbar is just too small. Does anyone know how to access the height of it or change it in another way?

This is how it should look (phone)

This is how it looks on Tablets

Add your code or example here. so users can help – Ajeet Kumar Mar 15 '20 at 17:50 — Ajeet Kumar, Mar 15 '20 at 17:50

score 2 · Answer 1 · answered May 17 '21 at 05:44

You can use the props barStyle to change the height of bottom tab.

Example:

createMaterialBottomTabNavigator(
   {
      Home: {
        home: {screen: Main},
      },
      Setting: {
        setting: {screen: Setting},
      },
   },
   {
      initialRouteName: 'Room',
      barStyle: { backgroundColor: '#fff', height: 50 },
   },
);

score 1 · Answer 2 · answered Mar 16 '20 at 05:46

You can use Pixel ratio

https://reactnative.dev/docs/pixelratio.html

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

Another Example

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

Usgae :

fontSize: normalize(24)

you can go one step further by allowing sizes to be used on every components by pre-defined sized.

Example:

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
}

If you to see examples, there are the links

https://demo.mobiscroll.com/react/navigation/tabs#

https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23

Thank you for that, but I was not asking How to scale things in react native, I was asking how can I access the height or scale of bottom material tab navigator form react-naviagation. — Dominik Hinc, Mar 16 '20 at 10:43

score 0 · Answer 3 · answered May 21 '23 at 17:39

0

You just need to set the barStyle in navigator as follows:

<Tab.Navigator initialRouteName="Home" barStyle={{height: 82}}>
  ...
</Tab.Navigator>

answered May 21 '23 at 17:39

George Zhang

371
1
2
9

Anurodh Singh · Answer 4 · 2020-03-16T03:18:00.980

You can use the prop tabBarOptions to style your tab bar. Please refer to this link.

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaroptions

Or you can create your own tab bar by using the tabBarComponent prop in createBottomTabNavigator.

const Tabs = createBottomTabNavigator(
  {
    ...FirstTab,
    ...SecondTab,
  },
  {
    tabBarComponent: props => (
      <View>
        <CustomTabBar/>
      </View>
    );
  },
);

And if you want to change the style of material-bottom-tab-bar then you can change the style from barstyle props. Please refer to this link.

https://reactnavigation.org/docs/material-bottom-tab-navigator/#barstyle

These are refer to normal tab bar navigator, I want to know if there is any way to change the size of material version of bottom tab navigator. — Dominik Hinc, Mar 15 '20 at 20:20

How to change height of bottom material tab navigator from react-naviagtion

4 Answers4