react-native-tab-view icon indicating copy to clipboard operation
react-native-tab-view copied to clipboard

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

Open likeSo opened this issue 3 years ago • 3 comments

Current behavior

image 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: image

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

likeSo avatar Dec 23 '21 04:12 likeSo

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?

github-actions[bot] avatar Dec 23 '21 04:12 github-actions[bot]

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

likeSo avatar Jan 19 '22 14:01 likeSo

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

shubhanus avatar Mar 21 '22 16:03 shubhanus

Closing this, since @shubhanus provided solution.

okwasniewski avatar Sep 01 '22 20:09 okwasniewski