CODEWITHSUNDEEP
javascriptreact-nativereact-navigationstylingreact-navigation-bottom-tab
Dominik Hinc
Dominik Hinc

Reputation: 21

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

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)

enter image description here

This is how it looks on Tablets enter image description here

Upvotes: 0

Views: 6239

Answers (4)

George Zhang
George Zhang

Reputation: 391

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

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

Upvotes: 0

pullidea-dev
pullidea-dev

Reputation: 1803

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 },
   },
);

Upvotes: 3

Asad
Asad

Reputation: 573

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

Upvotes: 1

Anurodh Singh
Anurodh Singh

Reputation: 812

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

Upvotes: -2

Related Questions