How can i add a padding to the scroll tab container?

[likeSo]

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

• Android
• 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

[github-actions]

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?

[likeSo]

It's been almost a month, can anybody teach me how can i do this? Please help

[shubhanus]

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

[okwasniewski]

Closing this, since @shubhanus provided solution.