CODEWITHSUNDEEP
javascriptcssreact-nativereact-navigation
gabriel rodrigues
gabriel rodrigues

Reputation: 21

how to dynamically control the indicatorStyle react navigation 5x

I have 4 screens, then I used the Style indicator to get a white border. However my border on the outros screen is too big and the restaurantes screen is small. How can I put a different width of the Style indicator for each screen? I'm using react navigation 5x Look how it is https://i.sstatic.net/9D5UW.png
https://i.sstatic.net/eVgHi.png

My code

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Restaurantes from '../pages/Restaurantes';
import Mercados from '../pages/Mercados';
import Farmácias from '../pages/Farmácias';
import Outros from '../pages/Outros';

const Tab = createMaterialTopTabNavigator();

export default function Routes() {
 return (
   <>
   <Tab.Navigator
      tabBarOptions={{
        allowFontScaling: false,
        activeTintColor: '#111',
        inactiveTintColor: '#a8a8a8',

        indicatorStyle: {
          height: 23,
          width: 80,
          position: 'absolute',
          left: '3%',
          marginBottom: 12,
          borderRadius: 15,
          marginLeft: 5,

          backgroundColor: '#fff',
        },
        tabStyle: {
          marginLeft: 10,
          paddingLeft: 20,
        },
        labelStyle: {
          fontSize: 12,
          width: 100,
        },
        style: {
          backgroundColor: '#5f12b8',
        },
      }}
    >
      <Tab.Screen name="restaurantes" component={Restaurantes} />
      <Tab.Screen name="mercados" component={Mercados} />
      <Tab.Screen name="farmácias" component={Farmácias} />
      <Tab.Screen name="outros" component={Outros} />
    </Tab.Navigator>
    </>
  );
  }

Upvotes: 2

Views: 1633

Answers (1)

2xSamurai
2xSamurai

Reputation: 1289

You can use 'renderIndicator'.

I will give you an example. Copy paste the below code inside your 'tabBarOptions'

renderIndicator: (route) => {
          if (!route.getTabWidth()) {
            return null;
          }
          return (
          <View style={{
            width: route.getTabWidth(),
            height: '100%',
              left: route.navigationState.index * route.getTabWidth(),
            backgroundColor: 'orange',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            <View style={{
              position: 'absolute',
              width: '80%',
              backgroundColor: '#fff',
                borderRadius: 15,
              height: 20,
            }}></View>
          </View>
        )},
      }}

This should fix your issue. Some simple tweaking is necessary. If you need more help. Please do ask.

I will link the docs for you as well.

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

Upvotes: 1

Related Questions