How can i add a padding to the scroll tab container?
Current behavior
I made this by adding marginHorizontal: 16 to tabBarContentContainerStyle and tabBarIndicatorContainerStyle
But when i swipe to the right, the tab bar did not show completely:

I am using react-navigation-material-top-tab
Expected behavior
- I need padding on both the left and right sides.
- ** Another question: **How can i control the indicator's width to follow the label's width? For now, the indicator is wider than the label
Reproduction
https://snack.expo.dev/@likeso/react-navigation-tab-issue
Platform
- [X] Android
- [X] iOS
- [ ] Web
- [ ] Windows
- [ ] MacOS
Environment
| package | version |
|---|---|
| react-native-tab-view | ^3.1.1 |
| react-native-pager-view | 5.4.6 |
| react-native | 0.64.3 |
| expo | ^43.0.0 |
| node | v14.17.5 |
| npm or yarn | yarn |
The versions mentioned in the issue for the following packages differ from the latest versions on npm:
react-native-pager-view(found:5.4.6, latest:5.4.9)react-native(found:0.64.3, latest:0.66.4)expo(found:43.0.0, latest:44.0.1)
Can you verify that the issue still exists after upgrading to the latest versions of these packages?
It's been almost a month, can anybody teach me how can i do this? Please help
had done this way
indicatorStyle={{
left: INDICATOR_WIDTH_MARGIN_MAP[
props.indicatorWidth || 'full'
]
}}
renderIndicator={indicatorProps => {
const width =
indicatorProps.getTabWidth(index) -
INDICATOR_WIDTH_MARGIN_MAP[indicatorWidth] * 2;
return (
<TabBarIndicator
{...indicatorProps}
width={width}
/>
);
}}
Closing this, since @shubhanus provided solution.