feat: add ability to override bottom tab sideContent and bottomContent styles

evoactivity commented 1 month ago

Motivation

This is an extension to #11578

I'm using the alphas in a new project to create sidebar tabs but I am running into problems related to how the sideContent and bottomContent styles are being applied

1) Default padding of sidebar cannot be overriden as it's set as a constant https://github.com/react-navigation/react-navigation/blob/a41d932198d1b48d84f410be1633fc5ddcb2df3f/packages/bottom-tabs/src/views/BottomTabBar.tsx#L41 https://github.com/react-navigation/react-navigation/blob/a41d932198d1b48d84f410be1633fc5ddcb2df3f/packages/bottom-tabs/src/views/BottomTabBar.tsx#L457-L461 https://github.com/react-navigation/react-navigation/blob/a41d932198d1b48d84f410be1633fc5ddcb2df3f/packages/bottom-tabs/src/views/BottomTabBar.tsx#L333-L336

2) Cannot make tabs be centred through justifyContent. There is not way to supply additional styles that merge with sideContent or bottomContent.

Both issues could be addressed by merging in another style option eg

<View
  accessibilityRole="tablist"
  style={[
    tabBarIsHorizontal ? 
      styles.bottomContent 
      : styles.sideContent, 
    tabBarContentStyle
  ]}
>

Which is what this PR does

Test plan

Create sidebar tabs with these options

const screenOptions: BottomTabNavigationOptions = {
  headerShown: false,
  tabBarPosition: 'left',
  tabBarShowLabel: false,
  tabBarIconStyle: {
    width: 20,
    height: 20,
  },
  tabBarStyle: {
    backgroundColor: '#18082c',
    borderEndWidth: 0,
    minWidth: 0,
    padding: 0,
    paddingStart: 0,
    paddingEnd: 0,
    paddingTop: 0,
    paddingBottom: 0,
  },
  tabBarItemStyle: {
    marginHorizontal: 0,
    marginVertical: 0,
    borderRadius: 0,
    padding: 18,
  },
};

Tabs will be aligned at the top, add this option to center them and remove default padding

tabBarContentStyle: {
  padding: 0,
  justifyContent: 'center',
},

You should see this change from this

to

github-actions[bot] commented 1 month ago

Hey @evoactivity! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

github-actions[bot] commented 1 month ago

Hey @autofix-ci[bot]! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

netlify[bot] commented 1 month ago

Deploy Preview for react-navigation-example ready!

Name	Link
Latest commit	d319c32d856e090d4365310dd659848d64e5f8f7
Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/661022ffc1641c0007e07d03
Deploy Preview	https://deploy-preview-11927--react-navigation-example.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 month ago

Deploy Preview for react-navigation-example ready!

Name	Link
Latest commit	034749ca598260e04b17d6ce3e5b4730457f37d5
Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/66155bebf1125b0008d39cc5
Deploy Preview	https://deploy-preview-11927--react-navigation-example.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

react-navigation / react-navigation