From 7e688b0e32662da4e8baf5da0e4ddd52f36e2606 Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 00:55:47 +0700
Subject: [PATCH 1/8] Move default props of GlobalConfigContextProvider to the
 provider itself

---
 .../global-config/GlobalConfigContext.ts       |  6 +++++-
 .../global-config/GlobalConfigProvider.tsx     | 18 ++++++++++++++----
 .../global-config/GlobalConfigProviderProps.ts |  2 +-
 .../carbon-react-native/CarbonReactNative.tsx  | 16 ++++++++--------
 .../CarbonReactNativeProps.ts                  |  2 +-
 5 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts b/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts
index de7cd62..213642e 100644
--- a/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts
+++ b/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts
@@ -2,6 +2,10 @@ import {
 	createContext,
 } from "react"
 
+import {
+	I18nManager,
+} from "react-native"
+
 import type {
 	NotificationColor,
 } from "../../../components/notification/NotificationColor"
@@ -26,5 +30,5 @@ export const GlobalConfigContext = createContext<GlobalConfigContext>({
 	android_buttonRippleEffect: true,
 	notificationColor: "high_contrast",
 	toastDuration: 5000,
-	rtl: false,
+	rtl: I18nManager.isRTL,
 })
diff --git a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx
index 72f6c99..184d59e 100644
--- a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx
+++ b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx
@@ -1,3 +1,7 @@
+import {
+	I18nManager,
+} from "react-native"
+
 import {
 	GlobalConfigContext,
 } from "../../contexts/global-config"
@@ -6,14 +10,20 @@ import type {
 	GlobalConfigProviderProps,
 } from "./GlobalConfigProviderProps"
 
+const isRtl = I18nManager.isRTL
+
 export function GlobalConfigProvider({
-	android_buttonRippleEffect,
-	notificationColor,
-	toastDuration,
-	rtl,
+	android_buttonRippleEffect = true,
+	notificationColor = "high_contrast",
+	toastDuration = 5000,
+	rtl: rtlProp,
 	children,
 }: GlobalConfigProviderProps) {
 
+	const
+		rtl =
+			rtlProp ?? isRtl
+
 	return (
 		<GlobalConfigContext.Provider
 			value={{
diff --git a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts
index 4e83d23..3c487a3 100644
--- a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts
+++ b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProviderProps.ts
@@ -2,6 +2,6 @@ import type {
 	GlobalConfigContext,
 } from "../../contexts"
 
-export interface GlobalConfigProviderProps extends GlobalConfigContext {
+export interface GlobalConfigProviderProps extends Partial<GlobalConfigContext> {
 	children?: React.ReactNode,
 }
diff --git a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx
index 92d27a5..b4239a7 100644
--- a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx
+++ b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx
@@ -9,15 +9,15 @@ import type {
 } from "./CarbonReactNativeProps"
 
 export function CarbonReactNative({
-	// GlobalConfigProviderProps
-	android_buttonRippleEffect = true,
-	notificationColor = "high_contrast",
-	toastDuration = 5000,
-	rtl = false,
-
-	// ThemeProviderProps
+	// +++ GlobalConfigProviderProps +++
+	android_buttonRippleEffect,
+	notificationColor,
+	toastDuration,
+	rtl,
+	// --- GlobalConfigProviderProps ---
+	// +++ ThemeProviderProps +++
 	colorScheme,
-
+	// --- ThemeProviderProps ---
 	children,
 }: CarbonReactNativeProps) {
 
diff --git a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts
index f2aa5a5..0a348fa 100644
--- a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts
+++ b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts
@@ -3,5 +3,5 @@ import type {
 	ThemeProviderProps,
 } from "../_internal/providers"
 
-export interface CarbonReactNativeProps extends Partial<GlobalConfigProviderProps>, ThemeProviderProps {
+export interface CarbonReactNativeProps extends GlobalConfigProviderProps, ThemeProviderProps {
 }

From fe96bcb31a88ec7f1b43f95613cd8b1d9b337ac0 Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 00:57:39 +0700
Subject: [PATCH 2/8] Add ScrollView for RTL support in component level

---
 .../src/components/box/Box.tsx                |  6 ++
 .../src/components/scroll-view/ScrollView.tsx | 62 +++++++++++++++++++
 .../components/scroll-view/ScrollViewProps.ts |  6 ++
 .../src/components/scroll-view/index.ts       |  2 +
 4 files changed, 76 insertions(+)
 create mode 100644 packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx
 create mode 100644 packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts
 create mode 100644 packages/carbon-react-native/src/components/scroll-view/index.ts

diff --git a/packages/carbon-react-native/src/components/box/Box.tsx b/packages/carbon-react-native/src/components/box/Box.tsx
index 79594da..e25337d 100644
--- a/packages/carbon-react-native/src/components/box/Box.tsx
+++ b/packages/carbon-react-native/src/components/box/Box.tsx
@@ -21,6 +21,12 @@ import type {
 	BoxRef,
 } from "./BoxRef"
 
+/**
+ * This component is a basic React Native `View` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
 export const Box = forwardRef<BoxRef, BoxProps>(
 	function Box(
 		{
diff --git a/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx b/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx
new file mode 100644
index 0000000..aa77403
--- /dev/null
+++ b/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx
@@ -0,0 +1,62 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	ScrollView as ReactNativeScrollView,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import type {
+	ScrollViewProps,
+} from "./ScrollViewProps"
+
+/**
+ * This component is a basic React Native `ScrollView` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
+export const ScrollView = forwardRef<ReactNativeScrollView, ScrollViewProps>(
+	function ScrollView(
+		{
+			dir: dirProp,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			dir =
+				dirProp ??
+				globalConfigContext.rtl ? "rtl" : "ltr"
+
+		return (
+			<ReactNativeScrollView
+				ref={ ref }
+				{ ...props }
+				dir={ dir }
+				style={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					style,
+				] }
+				contentContainerStyle={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					contentContainerStyle,
+				] }
+			/>
+		)
+
+	},
+) as unknown as typeof ReactNativeScrollView & ReactNativeScrollView
diff --git a/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts b/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts
new file mode 100644
index 0000000..219b95d
--- /dev/null
+++ b/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts
@@ -0,0 +1,6 @@
+import type {
+	ScrollViewProps as Props,
+} from "react-native"
+
+export interface ScrollViewProps extends Props {
+}
diff --git a/packages/carbon-react-native/src/components/scroll-view/index.ts b/packages/carbon-react-native/src/components/scroll-view/index.ts
new file mode 100644
index 0000000..d80f5a6
--- /dev/null
+++ b/packages/carbon-react-native/src/components/scroll-view/index.ts
@@ -0,0 +1,2 @@
+export * from "./ScrollView"
+export type * from "./ScrollViewProps"

From 4de35eaa6eefaf0dc3296f83cc0ed9ce06abaa3f Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 00:58:32 +0700
Subject: [PATCH 3/8] Unnecessary RTL map

---
 .../src/components/button/base/Base.tsx       | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/packages/carbon-react-native/src/components/button/base/Base.tsx b/packages/carbon-react-native/src/components/button/base/Base.tsx
index a840432..00c9232 100644
--- a/packages/carbon-react-native/src/components/button/base/Base.tsx
+++ b/packages/carbon-react-native/src/components/button/base/Base.tsx
@@ -73,7 +73,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				getIconSize(size),
 
 			iconMarginStyle =
-				mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`]
+				mapIconMarginStyle[`${!!text}`]
 
 		return (
 			<Pressable
@@ -172,11 +172,8 @@ const
 				maxHeight: 48,
 			},
 
-			iconMarginLTR: {
-				marginLeft: Spacing.spacing_07,
-			},
-			iconMarginRTL: {
-				marginRight: Spacing.spacing_07,
+			iconMargin: {
+				marginStart: Spacing.spacing_07,
 			},
 
 			inlineLoading: {
@@ -241,19 +238,11 @@ const
 		},
 
 	mapIconMarginStyle: {
-		[RTL in `${boolean}`]: {
-			[HasText in `${boolean}`]: ViewProps["style"]
-		}
+		[HasText in `${boolean}`]: ViewProps["style"]
 	} =
 		{
-			false: {
-				false: null,
-				true: baseStyle.iconMarginLTR,
-			},
-			true: {
-				false: null,
-				true: baseStyle.iconMarginRTL,
-			},
+			false: null,
+			true: baseStyle.iconMargin,
 		},
 
 	mapStyleInButtonGroup: {

From 62dabd9f2e2690fb378fa79789c0525e46842c04 Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 01:04:27 +0700
Subject: [PATCH 4/8] unnecessary margin style

---
 .../src/components/button/ghost/Ghost.tsx     | 26 +++----------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/packages/carbon-react-native/src/components/button/ghost/Ghost.tsx b/packages/carbon-react-native/src/components/button/ghost/Ghost.tsx
index 3078367..cffe0cd 100644
--- a/packages/carbon-react-native/src/components/button/ghost/Ghost.tsx
+++ b/packages/carbon-react-native/src/components/button/ghost/Ghost.tsx
@@ -3,15 +3,13 @@ import {
 	useContext,
 } from "react"
 
-import {
-	StyleSheet,
-	type TextStyle,
-	type ViewStyle,
+import type {
+	TextStyle,
+	ViewStyle,
 } from "react-native"
 
 import {
 	Color,
-	Spacing,
 } from "@audira/carbon-react-native-elements"
 
 import * as CarbonStyleSheet from "../../../carbon-style-sheet"
@@ -38,7 +36,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 	function Ghost(
 		{
 			text,
-			iconProps,
 			...props
 		},
 		ref,
@@ -71,10 +68,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 					},
 					icon: mapIconColor[themeContext.colorScheme],
 				}}
-				iconProps={{
-					...iconProps,
-					style: [mapIconPLByText[`${!!text}`], iconProps?.style],
-				}}
 			/>
 		)
 
@@ -125,19 +118,6 @@ const
 			},
 		}),
 
-	style =
-		StyleSheet.create({
-			iconPL8: {
-				paddingLeft: Spacing.spacing_03,
-			},
-		}),
-
-	mapIconPLByText: Record<string, typeof style["iconPL8"] | null> =
-		{
-			false: null,
-			true: style.iconPL8,
-		},
-
 	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
 		{
 			gray_10: {

From 78b64f767a881d9f5c52d538c0ef4fdea8cbed4e Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 01:08:27 +0700
Subject: [PATCH 5/8] Use local dir ScrollViewProps and Provide header footer
 slot node

---
 .../src/components/table/Table.tsx            | 25 +++++++++++++------
 .../src/components/table/TableProps.ts        | 24 ++++++++++++++++++
 .../src/components/table/TableRef.ts          |  6 ++---
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/carbon-react-native/src/components/table/Table.tsx b/packages/carbon-react-native/src/components/table/Table.tsx
index 21e03b9..fec6395 100644
--- a/packages/carbon-react-native/src/components/table/Table.tsx
+++ b/packages/carbon-react-native/src/components/table/Table.tsx
@@ -2,16 +2,16 @@ import {
 	forwardRef,
 } from "react"
 
-import {
-	ScrollView,
-} from "react-native"
-
 import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	Box,
 } from "../box/Box"
 
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
 import type {
 	TableProps,
 } from "./TableProps"
@@ -28,8 +28,11 @@ export const Table = forwardRef<TableRef, TableProps>(
 	function Table(
 		{
 			rowSize = "large",
+			header,
+			footer,
+			horizontalScrollViewProps,
+			verticalScrollViewProps,
 			children,
-			style,
 			...props
 		},
 		ref,
@@ -44,23 +47,31 @@ export const Table = forwardRef<TableRef, TableProps>(
 				<Box
 					ref={ ref }
 					{ ...props }
-					style={ style }
 				>
+					{ header }
+
 					<ScrollView
-						horizontal
+						{ ...horizontalScrollViewProps }
+						horizontal={ horizontalScrollViewProps?.horizontal ?? true }
+						nestedScrollEnabled={ horizontalScrollViewProps?.nestedScrollEnabled ?? true }
 						contentContainerStyle={ [
 							CarbonStyleSheet.g.grow,
+							horizontalScrollViewProps?.contentContainerStyle,
 						] }
 					>
 						<ScrollView
+							{ ...verticalScrollViewProps }
 							style={ [
 								CarbonStyleSheet.g.flex_auto,
+								verticalScrollViewProps?.style,
 							] }
 							role="table"
 						>
 							{ children }
 						</ScrollView>
 					</ScrollView>
+
+					{ footer }
 				</Box>
 			</TableContext.Provider>
 		)
diff --git a/packages/carbon-react-native/src/components/table/TableProps.ts b/packages/carbon-react-native/src/components/table/TableProps.ts
index 016b289..2ce2449 100644
--- a/packages/carbon-react-native/src/components/table/TableProps.ts
+++ b/packages/carbon-react-native/src/components/table/TableProps.ts
@@ -1,3 +1,7 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
 import type {
 	BoxProps,
 } from "../box/BoxProps"
@@ -12,4 +16,24 @@ export interface TableProps extends BoxProps {
 	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
 	 */
 	rowSize?: TableRowSize,
+	horizontalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	verticalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	/**
+	 * Add React node after start of the table element.
+	 * 
+	 * You may use this for `TableHeader`, `TableToolbar`, `TableBatchActionBar`, or all of them.
+	 */
+	header?: React.ReactNode,
+	/**
+	 * Add React node before end of the table element
+	 * 
+	 * You may use this for `Pagination` component.
+	 */
+	footer?: React.ReactNode,
 }
diff --git a/packages/carbon-react-native/src/components/table/TableRef.ts b/packages/carbon-react-native/src/components/table/TableRef.ts
index cb87b88..c29a133 100644
--- a/packages/carbon-react-native/src/components/table/TableRef.ts
+++ b/packages/carbon-react-native/src/components/table/TableRef.ts
@@ -1,6 +1,6 @@
 import type {
-	View,
-} from "react-native"
+	BoxRef,
+} from "../box";
 
-export interface TableRef extends View {
+export interface TableRef extends BoxRef {
 }

From 4273acb3fce055c9a3bfdeb6e791f40dbadf0c83 Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 01:10:06 +0700
Subject: [PATCH 6/8] Add table supporting components: - `TableBatchActionBar`
 - `TableBatchActionBarButton` - `TableBatchCellHeader` - `TableHeader` -
 `TableToolbar` - `TableToolbarButton` - `TableToolbarSwitcher`

---
 .../src/components/index.ts                   |   8 +
 .../TableBatchActionBarButton.tsx             |  74 ++++++++
 .../TableBatchActionBarButtonProps.ts         |   6 +
 .../TableBatchActionBarButtonRef.ts           |   6 +
 .../table-batch-action-bar-button/index.ts    |   3 +
 .../TableBatchActionBar.tsx                   | 156 +++++++++++++++
 .../TableBatchActionBarProps.ts               |  42 ++++
 .../TableBatchActionBarRef.ts                 |   6 +
 .../TableBatchActionBarSize.ts                |   3 +
 .../_TableBatchActionBarContext.ts            |  15 ++
 .../table-batch-action-bar/index.ts           |   4 +
 .../table-cell-header/_sort-icon/SortIcon.tsx |   7 +-
 .../components/table-header/TableHeader.tsx   | 110 +++++++++++
 .../table-header/TableHeaderProps.ts          |  22 +++
 .../components/table-header/TableHeaderRef.ts |   6 +
 .../src/components/table-header/index.ts      |   3 +
 .../src/components/table-row/TableRowProps.ts |   3 +
 .../table-toolbar-button/_useSize.tsx         |  28 +++
 .../ghost-icon/GhostIcon.tsx                  |  43 +++++
 .../ghost-icon/GhostIconProps.ts              |   6 +
 .../ghost-icon/GhostIconRef.ts                |   6 +
 .../table-toolbar-button/ghost-icon/index.ts  |   3 +
 .../table-toolbar-button/ghost/Ghost.tsx      |  43 +++++
 .../table-toolbar-button/ghost/GhostProps.ts  |   6 +
 .../table-toolbar-button/ghost/GhostRef.ts    |   6 +
 .../table-toolbar-button/ghost/index.ts       |   3 +
 .../components/table-toolbar-button/index.ts  |   3 +
 .../table-toolbar-button/primary/Primary.tsx  |  43 +++++
 .../primary/PrimaryProps.ts                   |   6 +
 .../primary/PrimaryRef.ts                     |   6 +
 .../table-toolbar-button/primary/index.ts     |   3 +
 .../TableToolbarSwitcher.tsx                  | 110 +++++++++++
 .../TableToolbarSwitcherProps.ts              |  18 ++
 .../TableToolbarSwitcherRef.ts                |  10 +
 .../TableToolbarSwitcherRefBase.ts            |  16 ++
 .../_AnimatedContentProps.ts                  |   3 +
 .../AnimatedNextContent.tsx                   |  33 ++++
 .../AnimatedNextContentProps.ts               |  10 +
 .../_animated-next-content/index.ts           |   2 +
 .../_animated-toolbar/AnimatedToolbar.tsx     |  59 ++++++
 .../_animated-toolbar/AnimatedToolbarProps.ts |  10 +
 .../_animated-toolbar/AnimatedToolbarRef.ts   |   6 +
 .../_animated-toolbar/index.ts                |   3 +
 .../_useAnimatedContent.tsx                   | 179 ++++++++++++++++++
 .../table-toolbar-switcher/index.ts           |   4 +
 .../components/table-toolbar/TableToolbar.tsx | 165 ++++++++++++++++
 .../table-toolbar/TableToolbarProps.ts        |  27 +++
 .../table-toolbar/TableToolbarRef.ts          |   6 +
 .../table-toolbar/TableToolbarSize.ts         |   3 +
 .../table-toolbar/_TableToolbarContext.ts     |  15 ++
 .../src/components/table-toolbar/index.ts     |   4 +
 .../components/data-table/Table.stories.tsx   |  29 ++-
 52 files changed, 1385 insertions(+), 6 deletions(-)
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts
 create mode 100644 packages/carbon-react-native/src/components/table-batch-action-bar/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-header/TableHeader.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-header/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost/Ghost.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/ghost/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/primary/Primary.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-button/primary/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcher.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRefBase.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_AnimatedContentProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContent.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContentProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbar.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/_useAnimatedContent.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar-switcher/index.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/TableToolbar.tsx
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/TableToolbarProps.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/TableToolbarRef.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/TableToolbarSize.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/_TableToolbarContext.ts
 create mode 100644 packages/carbon-react-native/src/components/table-toolbar/index.ts

diff --git a/packages/carbon-react-native/src/components/index.ts b/packages/carbon-react-native/src/components/index.ts
index 90bf611..771734b 100644
--- a/packages/carbon-react-native/src/components/index.ts
+++ b/packages/carbon-react-native/src/components/index.ts
@@ -1,10 +1,12 @@
 import * as Button from "./button"
 import * as Notification from "./notification"
+import * as TableToolbarButton from "./table-toolbar-button"
 import * as Toggle from "./toggle"
 
 export {
 	Button,
 	Notification,
+	TableToolbarButton,
 	Toggle,
 }
 
@@ -31,10 +33,16 @@ export * from "./radio-button-group"
 export * from "./radio-button-input"
 export * from "./switch"
 export * from "./table"
+export * from "./table-batch-action-bar"
+export * from "./table-batch-action-bar-button"
 export * from "./table-cell"
 export * from "./table-cell-header"
 export * from "./table-cell-icon"
 export * from "./table-cell-text"
+export * from "./table-header"
+export * from "./table-toolbar"
+export * from "./table-toolbar-button"
+export * from "./table-toolbar-switcher"
 export * from "./table-row"
 export * from "./table-row-header"
 export * from "./text"
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx
new file mode 100644
index 0000000..30d7ac2
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx
@@ -0,0 +1,74 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Primary as ButtonPrimary,
+	type PrimaryProps as ButtonPrimaryProps,
+} from "../button/primary"
+
+import type {
+	TableBatchActionBarSize,
+} from "../table-batch-action-bar/TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "../table-batch-action-bar/_TableBatchActionBarContext"
+
+import type {
+	TableBatchActionBarButtonProps,
+} from "./TableBatchActionBarButtonProps"
+
+import type {
+	TableBatchActionBarButtonRef,
+} from "./TableBatchActionBarButtonRef"
+
+export const TableBatchActionBarButton = forwardRef<TableBatchActionBarButtonRef, TableBatchActionBarButtonProps>(
+	function TableBatchActionBarButton(
+		{
+			Icon,
+			iconProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableBatchActionBarContext =
+				useContext(TableBatchActionBarContext)
+
+		return (
+			<ButtonPrimary
+				ref={ ref }
+				{ ...props }
+				size={ mapBatchActionBarSizeToButtonSize[tableBatchActionBarContext.size] }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					style: [
+						CarbonStyleSheet.g.ms_03, // override the gap between text and icon
+						iconProps?.style,
+					],
+				}}
+				style={ [
+					Icon
+						? undefined
+						: CarbonStyleSheet.g.pe_05,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapBatchActionBarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<ButtonPrimaryProps["size"]>>
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts
new file mode 100644
index 0000000..26635bd
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps,
+} from "../button/primary/PrimaryProps"
+
+export interface TableBatchActionBarButtonProps extends Omit<PrimaryProps, "size"> {
+}
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts
new file mode 100644
index 0000000..d0a3156
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef,
+} from "../button/primary/PrimaryRef"
+
+export interface TableBatchActionBarButtonRef extends PrimaryRef {
+}
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts
new file mode 100644
index 0000000..db06c9b
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts
@@ -0,0 +1,3 @@
+export * from "./TableBatchActionBarButton"
+export type * from "./TableBatchActionBarButtonProps"
+export type * from "./TableBatchActionBarButtonRef"
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx
new file mode 100644
index 0000000..43d25f8
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx
@@ -0,0 +1,156 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableBatchActionBarProps,
+} from "./TableBatchActionBarProps"
+
+import type {
+	TableBatchActionBarRef,
+} from "./TableBatchActionBarRef"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+import {
+	TableBatchActionBarContext,
+} from "./_TableBatchActionBarContext"
+
+export const TableBatchActionBar = forwardRef<TableBatchActionBarRef, TableBatchActionBarProps>(
+	function TableBatchActionBar(
+		{
+			size: sizeProp,
+			horizontal = true,
+			text,
+			textProps,
+			buttons,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize,
+
+			batchActionBarSize =
+				mapRowSizeToBatchActionBarSize[size]
+
+		return (
+			<TableBatchActionBarContext.Provider
+				value={{
+					size: batchActionBarSize,
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					horizontal={ horizontal }
+					style={ [
+						carbonStyleSheet.tableBatchActionBar,
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableBatchActionBarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[batchActionBarSize],
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Text
+						{ ...textProps }
+						type="body_compact_01"
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+							CarbonStyleSheet.g.self_center,
+							CarbonStyleSheet.g.px_05,
+							carbonStyleSheet.text,
+							textProps?.style,
+						] }
+					>
+						{ text }
+					</Text>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableBatchActionBarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableBatchActionBarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToBatchActionBarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableBatchActionBarSize>,
+
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			tableBatchActionBar: {
+				backgroundColor: CarbonStyleSheet.color.background_brand,
+			},
+			text: {
+				textWrap: "nowrap",
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+		})
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts
new file mode 100644
index 0000000..7016260
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts
@@ -0,0 +1,42 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarProps extends Omit<ScrollViewProps, "children"> {
+	/**
+	 * Based on the IBM spec, the `large` batch action bar is paired with the extra large and large row sizes.
+	 * The `small` batch action bar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the batch action bar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the batch action bar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableBatchActionBarSize,
+	/**
+	 * Provide descriptive text after one or multiple items selected,
+	 * 
+	 * e.g. "0 items selected", "3 products selected", etc.
+	 */
+	text: string,
+	textProps?: Omit<
+		TextProps,
+		| "children"
+		| "type"
+	>,
+	/**
+	 * Provide one or multiple `<TableBatchActionBarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts
new file mode 100644
index 0000000..c470b4c
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts
@@ -0,0 +1,6 @@
+import type {
+	ScrollView,
+} from "react-native"
+
+export interface TableBatchActionBarRef extends ScrollView {
+}
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts
new file mode 100644
index 0000000..8bbf159
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts
@@ -0,0 +1,3 @@
+export type TableBatchActionBarSize =
+	| "large"
+	| "small"
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts
new file mode 100644
index 0000000..7eee1d6
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts
@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableBatchActionBarSize,
+} from "./TableBatchActionBarSize"
+
+export interface TableBatchActionBarContext {
+	size: TableBatchActionBarSize,
+}
+
+export const TableBatchActionBarContext = createContext<TableBatchActionBarContext>({
+	size: "large",
+})
diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts
new file mode 100644
index 0000000..58c8776
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts
@@ -0,0 +1,4 @@
+export * from "./TableBatchActionBar"
+export type * from "./TableBatchActionBarProps"
+export type * from "./TableBatchActionBarRef"
+export type * from "./TableBatchActionBarSize"
diff --git a/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx b/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx
index 428f5bb..1226356 100644
--- a/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx
+++ b/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx
@@ -8,6 +8,7 @@ import {
 import {
 	Animated,
 	Easing,
+	Platform,
 } from "react-native"
 
 import {
@@ -58,7 +59,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 						{
 							toValue: 0,
 							duration: 0,
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -75,7 +76,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 								Motion.Easing.standard.productive.x2,
 								Motion.Easing.standard.productive.y2,
 							),
-							useNativeDriver: false,
+							useNativeDriver: Platform.OS != "web",
 						},
 					)
 					.start()
@@ -99,7 +100,7 @@ export const SortIcon = forwardRef<SortIconRef, SortIconProps>(
 									Motion.Easing.entrance.productive.x2,
 									Motion.Easing.entrance.productive.y2,
 								),
-								useNativeDriver: true,
+								useNativeDriver: Platform.OS != "web",
 							},
 						)
 						.start()
diff --git a/packages/carbon-react-native/src/components/table-header/TableHeader.tsx b/packages/carbon-react-native/src/components/table-header/TableHeader.tsx
new file mode 100644
index 0000000..1eb6075
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-header/TableHeader.tsx
@@ -0,0 +1,110 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	Text,
+} from "../text/Text"
+
+import type {
+	TableHeaderProps,
+} from "./TableHeaderProps"
+
+import type {
+	TableHeaderRef,
+} from "./TableHeaderRef"
+
+export const TableHeader = forwardRef<TableHeaderRef, TableHeaderProps>(
+	function TableHeader(
+		{
+			title,
+			description,
+			titleProps,
+			descriptionProps,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext)
+
+		return (
+			<Box
+				ref={ ref }
+				{ ...props }
+				style={ [
+					CarbonStyleSheet.g.pt_05,
+					CarbonStyleSheet.g.pb_06,
+					CarbonStyleSheet.g.px_05,
+					carbonStyleSheet[`bg_${layerContext}`],
+					style,
+				] }
+			>
+				<Text
+					{ ...titleProps }
+					type="heading_03"
+				>
+					{ title }
+				</Text>
+
+				{ !!description && (
+					<Text
+						{ ...descriptionProps }
+						type="body_compact_01"
+						style={ [
+							carbonStyleSheet.description,
+							descriptionProps?.style,
+						] }
+					>
+						{ description }
+					</Text>
+				) }
+			</Box>
+		)
+
+	},
+)
+
+const
+	carbonStyleSheet =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+			description: {
+				color: CarbonStyleSheet.color.text_secondary,
+			},
+		} as const satisfies {
+			[Layer in `bg_${ColorLayerLevel}`]: Pick<ViewStyle, "backgroundColor">
+		} & {
+			description: Pick<TextStyle, "color">,
+		})
diff --git a/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts b/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts
new file mode 100644
index 0000000..6e74cbe
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts
@@ -0,0 +1,22 @@
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	TextProps,
+} from "../text/TextProps"
+
+export interface TableHeaderProps extends Omit<BoxProps, "children"> {
+	title: string,
+	description?: string,
+	titleProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+	descriptionProps?: Omit<
+		TextProps,
+		| "type"
+		| "children"
+	>,
+}
diff --git a/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts b/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts
new file mode 100644
index 0000000..c12c054
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts
@@ -0,0 +1,6 @@
+import type {
+	BoxRef,
+} from "../box/BoxRef"
+
+export interface TableHeaderRef extends BoxRef {
+}
diff --git a/packages/carbon-react-native/src/components/table-header/index.ts b/packages/carbon-react-native/src/components/table-header/index.ts
new file mode 100644
index 0000000..a61ee6d
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-header/index.ts
@@ -0,0 +1,3 @@
+export * from "./TableHeader"
+export type * from "./TableHeaderProps"
+export type * from "./TableHeaderRef"
diff --git a/packages/carbon-react-native/src/components/table-row/TableRowProps.ts b/packages/carbon-react-native/src/components/table-row/TableRowProps.ts
index e417eef..697b744 100644
--- a/packages/carbon-react-native/src/components/table-row/TableRowProps.ts
+++ b/packages/carbon-react-native/src/components/table-row/TableRowProps.ts
@@ -13,6 +13,9 @@ import type {
 
 export interface TableRowProps extends Omit<PressableProps, "style"> {
 	/**
+	 * You may don't want to set the row size each row individually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead.
+	 * 
 	 * @default "large"
 	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
 	 */
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx
new file mode 100644
index 0000000..476ad3a
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx
@@ -0,0 +1,28 @@
+import {
+	useContext,
+} from "react"
+
+import type {
+	Size,
+} from "../button/Size"
+
+import {
+	TableToolbarContext,
+} from "../table-toolbar/_TableToolbarContext"
+
+export function useSize(): Size {
+
+	const
+		tableToolbarContext =
+			useContext(TableToolbarContext)
+
+	return mapToolbarSizeToButtonSize[tableToolbarContext.size]
+
+}
+
+const
+	mapToolbarSizeToButtonSize =
+		{
+			small: "small",
+			large: "large_productive",
+		} as const satisfies Record<TableToolbarContext["size"], Size>
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx
new file mode 100644
index 0000000..5cd11fb
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx
@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	GhostIcon as Button,
+} from "../../button/ghost-icon/GhostIcon"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	GhostIconProps,
+} from "./GhostIconProps"
+
+import type {
+	GhostIconRef,
+} from "./GhostIconRef"
+
+export const GhostIcon = forwardRef<GhostIconRef, GhostIconProps>(
+	function GhostIcon(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconProps.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconProps.ts
new file mode 100644
index 0000000..85adf93
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconProps.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface GhostIconProps extends Props {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconRef.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconRef.ts
new file mode 100644
index 0000000..60b0fd5
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIconRef.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef as Ref,
+} from "../../button/primary/PrimaryRef"
+
+export interface GhostIconRef extends Ref {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/index.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/index.ts
new file mode 100644
index 0000000..097b1ea
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/index.ts
@@ -0,0 +1,3 @@
+export * from "./GhostIcon"
+export type * from "./GhostIconProps"
+export type * from "./GhostIconRef"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost/Ghost.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/Ghost.tsx
new file mode 100644
index 0000000..608be6f
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/Ghost.tsx
@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Ghost as Button,
+} from "../../button/ghost/Ghost"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	GhostProps,
+} from "./GhostProps"
+
+import type {
+	GhostRef,
+} from "./GhostRef"
+
+export const Ghost = forwardRef<GhostRef, GhostProps>(
+	function Ghost(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostProps.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostProps.ts
new file mode 100644
index 0000000..de50aa6
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostProps.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface GhostProps extends Props {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostRef.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostRef.ts
new file mode 100644
index 0000000..4a94d9d
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/GhostRef.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef as Ref,
+} from "../../button/primary/PrimaryRef"
+
+export interface GhostRef extends Ref {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost/index.ts b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/index.ts
new file mode 100644
index 0000000..1cfbdc9
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost/index.ts
@@ -0,0 +1,3 @@
+export * from "./Ghost"
+export type * from "./GhostProps"
+export type * from "./GhostRef"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/index.ts b/packages/carbon-react-native/src/components/table-toolbar-button/index.ts
new file mode 100644
index 0000000..3220ef8
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/index.ts
@@ -0,0 +1,3 @@
+export * from "./ghost"
+export * from "./ghost-icon"
+export * from "./primary"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/primary/Primary.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/primary/Primary.tsx
new file mode 100644
index 0000000..fb0ac68
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/primary/Primary.tsx
@@ -0,0 +1,43 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Primary as Button,
+} from "../../button/primary/Primary"
+
+import {
+	useSize,
+} from "../_useSize"
+
+import type {
+	PrimaryProps,
+} from "./PrimaryProps"
+
+import type {
+	PrimaryRef,
+} from "./PrimaryRef"
+
+export const Primary = forwardRef<PrimaryRef, PrimaryProps>(
+	function Primary(
+		{
+			size: sizeProp,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			size =
+				useSize()
+
+		return (
+			<Button
+				ref={ ref }
+				{ ...props }
+				size={ sizeProp ?? size }
+			/>
+		)
+
+	},
+)
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryProps.ts b/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryProps.ts
new file mode 100644
index 0000000..e62047b
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryProps.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryProps as Props,
+} from "../../button/primary/PrimaryProps"
+
+export interface PrimaryProps extends Props {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryRef.ts b/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryRef.ts
new file mode 100644
index 0000000..1de0618
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/primary/PrimaryRef.ts
@@ -0,0 +1,6 @@
+import type {
+	PrimaryRef as Ref,
+} from "../../button/primary/PrimaryRef"
+
+export interface PrimaryRef extends Ref {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/primary/index.ts b/packages/carbon-react-native/src/components/table-toolbar-button/primary/index.ts
new file mode 100644
index 0000000..ec58bbf
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-button/primary/index.ts
@@ -0,0 +1,3 @@
+export * from "./Primary"
+export type * from "./PrimaryProps"
+export type * from "./PrimaryRef"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcher.tsx b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcher.tsx
new file mode 100644
index 0000000..798ee4f
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcher.tsx
@@ -0,0 +1,110 @@
+import {
+	forwardRef,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import type {
+	TableToolbarSwitcherProps,
+} from "./TableToolbarSwitcherProps"
+
+import type {
+	TableToolbarSwitcherRef,
+} from "./TableToolbarSwitcherRef"
+
+import type {
+	TableToolbarSwitcherRefBase,
+} from "./TableToolbarSwitcherRefBase"
+
+import {
+	AnimatedNextContent,
+} from "./_animated-next-content"
+
+import {
+	AnimatedToolbar,
+	type AnimatedToolbarRef,
+} from "./_animated-toolbar"
+
+/**
+ * Render `TableToolbar` and switch to other view if some events happened.
+ * 
+ * This is useful if you want to use both `TableToolbar` and `TableBatchActionBar`,
+ * but only show `TableBatchActionBar` and hide `TableToolbar` if some events occured, e.g. a row has been selected.
+ */
+export const TableToolbarSwitcher = forwardRef<TableToolbarSwitcherRef, TableToolbarSwitcherProps>(
+	function TableToolbarSwitcher(
+		{
+			defaultNext,
+			next: nextProp,
+			nextContent,
+			...props
+		},
+		ref,
+	) {
+
+
+		const
+			animatedToolbarRef =
+				useRef<AnimatedToolbarRef>(null),
+
+			[nextSelf, setNextSelf] =
+				useState(!!defaultNext),
+
+			next =
+				nextProp ?? nextSelf
+
+		useImperativeHandle(ref, () => {
+			return Object.assign<AnimatedToolbarRef, TableToolbarSwitcherRefBase>(
+				animatedToolbarRef.current ?? {} as AnimatedToolbarRef,
+				{
+					next() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(true)
+						}
+					},
+					prev() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(false)
+						}
+					},
+					switch() {
+						if(typeof nextProp === "undefined") {
+							setNextSelf(s => !s)
+						}
+					},
+				},
+			)
+		}, [
+			nextProp,
+		])
+
+		return (
+			<View
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+				] }
+			>
+				<AnimatedToolbar
+					ref={ animatedToolbarRef }
+					{ ...props }
+					visible={ !next }
+				/>
+
+				<AnimatedNextContent
+					visible={ next }
+				>
+					{ nextContent }
+				</AnimatedNextContent>
+			</View>
+		)
+
+	},
+)
+
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherProps.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherProps.ts
new file mode 100644
index 0000000..370bdb2
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherProps.ts
@@ -0,0 +1,18 @@
+import type {
+	TableToolbarProps,
+} from "../table-toolbar/TableToolbarProps"
+
+export interface TableToolbarSwitcherProps extends TableToolbarProps {
+	/**
+	 * true indicates the `nextContent` will be showed and the `TableToolbar` will be hidden
+	 */
+	defaultNext?: boolean,
+	/**
+	 * true indicates the `nextContent` will be showed and the `TableToolbar` will be hidden
+	 */
+	next?: boolean,
+	/**
+	 * This is other views that you want to render if `defaultNext` or `next` is true.
+	 */
+	nextContent: React.ReactNode,
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRef.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRef.ts
new file mode 100644
index 0000000..2a44e8d
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRef.ts
@@ -0,0 +1,10 @@
+import type {
+	TableToolbarRef,
+} from "../table-toolbar/TableToolbarRef"
+
+import type {
+	TableToolbarSwitcherRefBase,
+} from "./TableToolbarSwitcherRefBase"
+
+export interface TableToolbarSwitcherRef extends TableToolbarRef, TableToolbarSwitcherRefBase {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRefBase.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRefBase.ts
new file mode 100644
index 0000000..6303436
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/TableToolbarSwitcherRefBase.ts
@@ -0,0 +1,16 @@
+export interface TableToolbarSwitcherRefBase {
+	/**
+	 * Does nothing if `next` prop is boolean
+	 */
+	next: () => void,
+	/**
+	 * Does nothing if `next` prop is boolean
+	 */
+	prev: () => void,
+	/**
+	 * Run either next or prev.
+	 * 
+	 * Does nothing if `next` prop is boolean
+	 */
+	switch: () => void,
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_AnimatedContentProps.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_AnimatedContentProps.ts
new file mode 100644
index 0000000..986f799
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_AnimatedContentProps.ts
@@ -0,0 +1,3 @@
+export interface AnimatedContentProps {
+	visible: boolean,
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContent.tsx b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContent.tsx
new file mode 100644
index 0000000..e65f7e8
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContent.tsx
@@ -0,0 +1,33 @@
+import {
+	Animated,
+} from "react-native"
+
+import {
+	useAnimatedContent,
+} from "../_useAnimatedContent"
+
+import type {
+	AnimatedNextContentProps,
+} from "./AnimatedNextContentProps"
+
+export function AnimatedNextContent({
+	visible,
+	style,
+	...props
+}: AnimatedNextContentProps) {
+
+	const
+		animatedContent =
+			useAnimatedContent({ visible })
+
+	return (
+		<Animated.View
+			{ ...props }
+			style={ [
+				animatedContent.style,
+				style,
+			] }
+		/>
+	)
+
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContentProps.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContentProps.ts
new file mode 100644
index 0000000..922e840
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/AnimatedNextContentProps.ts
@@ -0,0 +1,10 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	AnimatedContentProps,
+} from "../_AnimatedContentProps"
+
+export interface AnimatedNextContentProps extends ViewProps, AnimatedContentProps {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/index.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/index.ts
new file mode 100644
index 0000000..1aab389
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-next-content/index.ts
@@ -0,0 +1,2 @@
+export * from "./AnimatedNextContent"
+export type * from "./AnimatedNextContentProps"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbar.tsx b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbar.tsx
new file mode 100644
index 0000000..be0ccc4
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbar.tsx
@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	Animated,
+} from "react-native"
+
+import {
+	TableToolbar,
+} from "../../table-toolbar/TableToolbar"
+
+import {
+	useAnimatedContent,
+} from "../_useAnimatedContent"
+
+import type {
+	AnimatedToolbarProps,
+} from "./AnimatedToolbarProps"
+
+import type {
+	AnimatedToolbarRef,
+} from "./AnimatedToolbarRef"
+
+export const AnimatedToolbar = forwardRef<AnimatedToolbarRef, AnimatedToolbarProps>(
+	function AnimatedToolbar(
+		{
+			visible,
+			size,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			animatedContent =
+				useAnimatedContent({
+					visible,
+					size,
+				})
+
+		return (
+			<AnimatedTableToolbar
+				ref={ ref }
+				{ ...props }
+				style={ [
+					animatedContent.style,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	AnimatedTableToolbar =
+		Animated.createAnimatedComponent(TableToolbar)
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarProps.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarProps.ts
new file mode 100644
index 0000000..fcab13c
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarProps.ts
@@ -0,0 +1,10 @@
+import type {
+	TableToolbarProps,
+} from "../../table-toolbar/TableToolbarProps"
+
+import type {
+	AnimatedContentProps,
+} from "../_AnimatedContentProps"
+
+export interface AnimatedToolbarProps extends TableToolbarProps, AnimatedContentProps {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarRef.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarRef.ts
new file mode 100644
index 0000000..c64d816
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/AnimatedToolbarRef.ts
@@ -0,0 +1,6 @@
+import type {
+	TableToolbarRef,
+} from "../../table-toolbar/TableToolbarRef"
+
+export interface AnimatedToolbarRef extends TableToolbarRef {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/index.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/index.ts
new file mode 100644
index 0000000..f75ccbe
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_animated-toolbar/index.ts
@@ -0,0 +1,3 @@
+export * from "./AnimatedToolbar"
+export type * from "./AnimatedToolbarProps"
+export type * from "./AnimatedToolbarRef"
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/_useAnimatedContent.tsx b/packages/carbon-react-native/src/components/table-toolbar-switcher/_useAnimatedContent.tsx
new file mode 100644
index 0000000..5ccd661
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/_useAnimatedContent.tsx
@@ -0,0 +1,179 @@
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+} from "react"
+
+import {
+	Animated,
+	Easing,
+	Platform,
+	type View,
+} from "react-native"
+
+import {
+	Motion,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableToolbarSwitcherProps,
+} from "./TableToolbarSwitcherProps"
+
+import type {
+	AnimatedContentProps,
+} from "./_AnimatedContentProps"
+
+interface UseAnimatedContentProps extends AnimatedContentProps {
+	size?: TableToolbarSwitcherProps["size"],
+}
+
+export function useAnimatedContent({
+	size: sizeProp,
+	visible,
+}: UseAnimatedContentProps) {
+
+	const
+		tableContext =
+			useContext(TableContext),
+
+		heightPx =
+			useMemo(() => {
+				return mapHeightBySize[
+					mapRowSizeToToolbarSize[sizeProp ?? tableContext.rowSize]
+				]
+			}, [
+				sizeProp,
+				tableContext.rowSize,
+			]),
+
+		ref =
+			useRef({
+				visible,
+				heightPx,
+			}),
+
+		translateYAnimated =
+			useRef(new Animated.Value(visible ? 0 : heightPx))
+
+	useEffect(() => {
+		if(ref.current.visible != visible) {
+			ref.current.visible = visible
+
+			const timingConfig = {
+				duration: Motion.Duration.fast_02,
+				easing: Easing.bezier(
+					Motion.Easing.standard.productive.x1,
+					Motion.Easing.standard.productive.y1,
+					Motion.Easing.standard.productive.x2,
+					Motion.Easing.standard.productive.y2,
+				),
+				useNativeDriver: Platform.OS != "web",
+			}
+
+			if(!visible) {
+				Animated
+					.timing(
+						translateYAnimated.current,
+						{
+							toValue: heightPx,
+							...timingConfig,
+						},
+					)
+					.start()
+			} else {
+				Animated
+					.sequence([
+						Animated.timing(
+							translateYAnimated.current,
+							{
+								toValue: heightPx,
+								duration: 0,
+								useNativeDriver: true,
+							},
+						),
+						Animated.timing(
+							translateYAnimated.current,
+							{
+								toValue: 0,
+								...timingConfig,
+							},
+						),
+					])
+					.start()
+			}
+		}
+	}, [
+		heightPx,
+		visible,
+	])
+
+	useEffect(() => {
+		if(ref.current.heightPx != heightPx) {
+			Animated
+				.timing(
+					translateYAnimated.current,
+					{
+						toValue: 1,
+						duration: Motion.Duration.fast_02,
+						easing: Easing.bezier(
+							Motion.Easing.standard.productive.x1,
+							Motion.Easing.standard.productive.y1,
+							Motion.Easing.standard.productive.x2,
+							Motion.Easing.standard.productive.y2,
+						),
+						useNativeDriver: Platform.OS != "web",
+					},
+				)
+				.start()
+		}
+	}, [
+		heightPx,
+	])
+
+	return {
+
+		style: [
+			!visible ? [CarbonStyleSheet.g.absolute, CarbonStyleSheet.g.w_full] : undefined,
+			{
+				transform: [{
+					// eslint-disable-next-line react-hooks/refs
+					translateY: translateYAnimated.current,
+				}],
+				// eslint-disable-next-line react-hooks/refs
+				opacity: translateYAnimated.current.interpolate({
+					inputRange: [0, heightPx],
+					outputRange: [1, 0],
+				}),
+			},
+		],
+
+	} as const satisfies {
+
+		style: Animated.ComponentProps<View>["style"],
+
+	}
+
+}
+
+const
+	mapHeightBySize =
+		{
+			small: 32,
+			large: 48,
+		} as const satisfies Record<NonNullable<UseAnimatedContentProps["size"]>, number>,
+
+	mapRowSizeToToolbarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], NonNullable<UseAnimatedContentProps["size"]>>
diff --git a/packages/carbon-react-native/src/components/table-toolbar-switcher/index.ts b/packages/carbon-react-native/src/components/table-toolbar-switcher/index.ts
new file mode 100644
index 0000000..011808f
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar-switcher/index.ts
@@ -0,0 +1,4 @@
+export * from "./TableToolbarSwitcher"
+export type * from "./TableToolbarSwitcherProps"
+export type * from "./TableToolbarSwitcherRef"
+export type * from "./TableToolbarSwitcherRefBase"
diff --git a/packages/carbon-react-native/src/components/table-toolbar/TableToolbar.tsx b/packages/carbon-react-native/src/components/table-toolbar/TableToolbar.tsx
new file mode 100644
index 0000000..35b1d7d
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/TableToolbar.tsx
@@ -0,0 +1,165 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import {
+	TableContext,
+} from "../table/_TableContext"
+
+import type {
+	TableToolbarProps,
+} from "./TableToolbarProps"
+
+import type {
+	TableToolbarRef,
+} from "./TableToolbarRef"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+import {
+	TableToolbarContext,
+} from "./_TableToolbarContext"
+
+export const TableToolbar = forwardRef<TableToolbarRef, TableToolbarProps>(
+	function TableToolbar(
+		{
+			size: sizeProp,
+			buttons,
+			children,
+			horizontal = true,
+			role = "group",
+			"aria-label": ariaLabel = "table toolbar",
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableContext =
+				useContext(TableContext),
+
+			size =
+				sizeProp ?? tableContext.rowSize
+
+		return (
+			<TableToolbarContext.Provider
+				value={{
+					size: sizeProp ?? mapRowSizeToToolbarSize[tableContext.rowSize],
+				}}
+			>
+				<ScrollView
+					ref={ ref }
+					{ ...props }
+					role={ role }
+					aria-label={ ariaLabel }
+					horizontal={ horizontal }
+					style={ [
+						// if users provide size prop manually
+						// they will still get the correct size style
+						// the `large` and `small` from `TableToolbarSize`
+						// are also used by `TableRowSize`
+						styleSheetSize[
+							mapRowSizeToToolbarSize[size]
+						],
+
+						styleSheetBGPerLayer[`bg_${layerContext}`],
+
+						style,
+					] }
+					contentContainerStyle={ [
+						CarbonStyleSheet.g.flex_row,
+						CarbonStyleSheet.g.flex_auto,
+						CarbonStyleSheet.g.justify_between,
+						contentContainerStyle,
+					] }
+				>
+					<Box
+						style={ [
+							CarbonStyleSheet.g.flex_auto,
+						] }
+					>
+						{ children }
+					</Box>
+
+					{ !!buttons && (
+						<Box
+							style={ [
+								CarbonStyleSheet.g.flex_row,
+								CarbonStyleSheet.g.self_stretch,
+							] }
+						>
+							{ buttons }
+						</Box>
+					) }
+				</ScrollView>
+			</TableToolbarContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheetSize =
+		StyleSheet.create({
+			small: {
+				height: 32,
+			},
+			large: {
+				height: 48,
+			},
+		} as const satisfies Record<TableToolbarSize, NonNullable<Pick<ViewStyle, "height">>>),
+
+	mapRowSizeToToolbarSize =
+		{
+			extra_small: "small",
+			small: "small",
+			medium: "small",
+			large: "large",
+			extra_large: "large",
+		} as const satisfies Record<TableContext["rowSize"], TableToolbarSize>,
+
+	styleSheetBGPerLayer =
+		CarbonStyleSheet.create({
+			bg_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_01,
+			},
+			bg_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_02,
+			},
+			bg_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_03,
+			},
+		} as const satisfies {
+			[Name in `bg_${ColorLayerLevel}`]: NonNullable<Pick<ViewStyle, "backgroundColor">>
+		})
diff --git a/packages/carbon-react-native/src/components/table-toolbar/TableToolbarProps.ts b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarProps.ts
new file mode 100644
index 0000000..c598ce8
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarProps.ts
@@ -0,0 +1,27 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+export interface TableToolbarProps extends ScrollViewProps {
+	/**
+	 * Based on the IBM spec, the `large` toolbar is paired with the extra large and large row sizes.
+	 * The `small` toolbar is paired with the small and extra small row sizes.
+	 * 
+	 * You may don't want to set the toolbar size manually.
+	 * Prefer to opt `rowSize` in the `Table` prop instead,
+	 * and the toolbar size will be adjusted automatically based on what the row size is.
+	 * 
+	 * @default "large"
+	 */
+	size?: TableToolbarSize,
+	/**
+	 * Provide one or multiple `<TableToolbarButton>` in this prop.
+	 * 
+	 * To provide multiple buttons, you can start it with `<>` or `<Fragment>`
+	 */
+	buttons: React.ReactNode,
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar/TableToolbarRef.ts b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarRef.ts
new file mode 100644
index 0000000..49174fc
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarRef.ts
@@ -0,0 +1,6 @@
+import type {
+	ScrollView,
+} from "react-native"
+
+export interface TableToolbarRef extends ScrollView {
+}
diff --git a/packages/carbon-react-native/src/components/table-toolbar/TableToolbarSize.ts b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarSize.ts
new file mode 100644
index 0000000..4bc7188
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/TableToolbarSize.ts
@@ -0,0 +1,3 @@
+export type TableToolbarSize =
+	| "large"
+	| "small"
diff --git a/packages/carbon-react-native/src/components/table-toolbar/_TableToolbarContext.ts b/packages/carbon-react-native/src/components/table-toolbar/_TableToolbarContext.ts
new file mode 100644
index 0000000..6333d24
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/_TableToolbarContext.ts
@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableToolbarSize,
+} from "./TableToolbarSize"
+
+export interface TableToolbarContext {
+	size: TableToolbarSize,
+}
+
+export const TableToolbarContext = createContext<TableToolbarContext>({
+	size: "large",
+})
diff --git a/packages/carbon-react-native/src/components/table-toolbar/index.ts b/packages/carbon-react-native/src/components/table-toolbar/index.ts
new file mode 100644
index 0000000..19425d6
--- /dev/null
+++ b/packages/carbon-react-native/src/components/table-toolbar/index.ts
@@ -0,0 +1,4 @@
+export * from "./TableToolbar"
+export type * from "./TableToolbarProps"
+export type * from "./TableToolbarRef"
+export type * from "./TableToolbarSize"
diff --git a/storybook/stories/components/data-table/Table.stories.tsx b/storybook/stories/components/data-table/Table.stories.tsx
index a5cbbb2..42b514d 100644
--- a/storybook/stories/components/data-table/Table.stories.tsx
+++ b/storybook/stories/components/data-table/Table.stories.tsx
@@ -7,11 +7,16 @@ import {
 	Table as CarbonTable,
 	TableCell,
 	TableCellHeader,
+	TableHeader,
 	TableRow,
 	TableRowHeader,
+	TableToolbar,
+	TableToolbarButton,
 	type TableProps,
 } from "@audira/carbon-react-native"
 
+import IconDownload from "@carbon/icons/svg/32/download.svg"
+
 export default {
 
 	title: "Components/Data Table",
@@ -36,13 +41,31 @@ export default {
 } satisfies Meta<TableProps>
 
 export const Table: StoryFn<TableProps> = args => {
+
 	return (
 		<CarbonTable
 			{ ...args }
+			header={ <>
+				<TableHeader
+					title="Data Table"
+					description="Add description if needed"
+				/>
+
+				<TableToolbar
+					buttons={ <>
+						<TableToolbarButton.GhostIcon
+							Icon={ IconDownload }
+						/>
+						<TableToolbarButton.Primary
+							text="Hola"
+						/>
+					</> }
+				/>
+			</> }
 		>
 			<TableRowHeader>
 				<TableCellHeader
-					width={ 100 }
+					width={ 140 }
 					defaultSort="none"
 					text="Head 1"
 				/>
@@ -85,7 +108,7 @@ export const Table: StoryFn<TableProps> = args => {
 			</TableRowHeader>
 			<TableRow>
 				<TableCell
-					width={ 100 }
+					width={ 140 }
 					text="Col 1"
 				/>
 				<TableCell
@@ -127,7 +150,7 @@ export const Table: StoryFn<TableProps> = args => {
 			</TableRow>
 			<TableRow>
 				<TableCell
-					width={ 100 }
+					width={ 140 }
 					text="Col 11"
 				/>
 				<TableCell

From 4db348b495e72c6664dc3e9d56bc70d4ff8d97b6 Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 01:11:01 +0700
Subject: [PATCH 7/8] chore: version 1.0.5

---
 packages/carbon-react-native/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/carbon-react-native/package.json b/packages/carbon-react-native/package.json
index 2b09d65..4e20378 100644
--- a/packages/carbon-react-native/package.json
+++ b/packages/carbon-react-native/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@audira/carbon-react-native",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"license": "MIT",
 	"homepage": "https://rakadoank.github.io/carbon-react-native",
 	"repository": "https://github.com/RakaDoank/carbon-react-native",

From 82cfa4bb085248556ed0823dab42dd60b436857d Mon Sep 17 00:00:00 2001
From: RakaDoank <rakaaudira@gmail.com>
Date: Sun, 5 Apr 2026 01:21:04 +0700
Subject: [PATCH 8/8] Don't run when pull request is not merged yet

---
 .github/workflows/deploy-storybook.yml | 4 +++-
 .github/workflows/release.yml          | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
index 9b40826..316ed7b 100644
--- a/.github/workflows/deploy-storybook.yml
+++ b/.github/workflows/deploy-storybook.yml
@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - deploy-storybook
-  pull_request:
+  pull_request_target:
     branches:
       - deploy-storybook
+    types:
+      - closed
 
 jobs:
   deploy-storybook:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 5a8a2d4..153d5dc 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,9 +4,11 @@ on:
   push:
     branches:
       - release
-  pull_request:
+  pull_request_target:
     branches:
       - release
+    types:
+      - closed
 
 jobs:
   release: