CODEWITHSUNDEEP
react-nativereact-navigationreact-native-tabnavigator
pat
pat

Reputation: 185

How to correctly change the width of the indicatorStyle in React Native Top Navigation?

I want to be able to reduce the width the indicatorStyle in the Top Naviagtion bar to achieve the results below:

enter image description here

But whenever i try to reduce the width of the bar, i cannot get to center it properly. Here is what i have currently;

enter image description here

Here is my code below:

import React from 'react';
import { createAppContainer } from 'react-navigation';
import {createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Colors from '../constants/Colors';
import Tab1 from '../screens/tab1';
import Tab2 from '../screens/tab2';


const HomeTab = createMaterialTopTabNavigator({
    TAB1: Tab1,
    TAB2: Tab2,
  }, 
  {
    tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
        labelStyle: { fontSize: 14, fontWeight:"700" },
        style: { backgroundColor: Colors.mainBackground, elevation: 0, shadowOpacity: 0, borderBottomWidth:2, borderColor:'#ccc' },
        indicatorStyle: { backgroundColor: 'blue', width:100},

    },
  }

);

Thank you for your help! Really appreciate it :)

Upvotes: 5

Views: 4992

Answers (2)

Mayowa Daniel
Mayowa Daniel

Reputation: 427

To center it accurately, I used the Dimensions API to get precise widths and offsets.

const totalWidth = Dimensions.get("screen").width;

then

indicatorStyle: {
   width: totalWidth / 4,
   left: totalWidth / 8,
}

Upvotes: 6

hong developer
hong developer

Reputation: 13906

You can use position Value

Example

indicatorStyle : {width:50,left:"18%"},

exam

Upvotes: 1

Related Questions