diff --git a/static/assets/7.x/bottom-tabs/tabBarActiveTintColor.png b/static/assets/7.x/bottom-tabs/tabBarActiveTintColor.png new file mode 100644 index 0000000000..e9b274fc92 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarActiveTintColor.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarBackground.png b/static/assets/7.x/bottom-tabs/tabBarBackground.png new file mode 100644 index 0000000000..650838f146 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarBackground.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarBadge.png b/static/assets/7.x/bottom-tabs/tabBarBadge.png new file mode 100644 index 0000000000..e04963dfbc Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarBadge.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarBadgeStyle.png b/static/assets/7.x/bottom-tabs/tabBarBadgeStyle.png new file mode 100644 index 0000000000..2b406d9c5e Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarBadgeStyle.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarInactiveTintColor.png b/static/assets/7.x/bottom-tabs/tabBarInactiveTintColor.png new file mode 100644 index 0000000000..b6c7aa3c22 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarInactiveTintColor.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarLabelPosition-below.png b/static/assets/7.x/bottom-tabs/tabBarLabelPosition-below.png new file mode 100644 index 0000000000..9b5924cd89 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarLabelPosition-below.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarLabelPosition-beside.png b/static/assets/7.x/bottom-tabs/tabBarLabelPosition-beside.png new file mode 100644 index 0000000000..3be06ede80 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarLabelPosition-beside.png differ diff --git a/static/assets/7.x/bottom-tabs/tabBarLabelStyle.png b/static/assets/7.x/bottom-tabs/tabBarLabelStyle.png new file mode 100644 index 0000000000..74d7c3f848 Binary files /dev/null and b/static/assets/7.x/bottom-tabs/tabBarLabelStyle.png differ diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md index 4518e4a154..9b7bbede7b 100755 --- a/versioned_docs/version-7.x/bottom-tab-navigator.md +++ b/versioned_docs/version-7.x/bottom-tab-navigator.md @@ -283,14 +283,28 @@ Whether the tab label should be visible. Defaults to `true`. Whether the label is shown below the icon or beside the icon. +By default, the position is chosen automatically based on device width. + - `below-icon`: the label is shown below the icon (typical for iPhones) -- `beside-icon` the label is shown next to the icon (typical for iPad) + Tab bar label position - below -By default, the position is chosen automatically based on device width. +- `beside-icon` the label is shown next to the icon (typical for iPad) + Tab bar label position - beside #### `tabBarLabelStyle` Style object for the tab label. +Tab bar label style + +Example: + +```js + tabBarLabelStyle: { + fontSize: 16, + fontFamily: 'Georgia', + fontWeight: 300, + }, +``` #### `tabBarIcon` @@ -304,10 +318,23 @@ Style object for the tab icon. Text to show in a badge on the tab icon. Accepts a `string` or a `number`. +Tab bar badge + #### `tabBarBadgeStyle` Style for the badge on the tab icon. You can specify a background color or text color here. +Tab bar badge style + +Example: + +```js + tabBarBadgeStyle: { + color: 'black', + backgroundColor: 'yellow', + }, +``` + #### `tabBarAccessibilityLabel` Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab. @@ -329,10 +356,12 @@ ID to locate this tab button in tests. #### `tabBarActiveTintColor` Color for the icon and label in the active tab. +Tab bar active tint color #### `tabBarInactiveTintColor` Color for the icon and label in the inactive tabs. +Tab bar inactive tint color #### `tabBarActiveBackgroundColor` @@ -387,6 +416,8 @@ import { BlurView } from 'expo-blur'; When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add bottom padding to your content. +Tab bar background + #### `tabBarPosition` Position of the tab bar. Available values are: