From 9add3c41476231b8f44d55f98140e493ff49fdc7 Mon Sep 17 00:00:00 2001
From: Youssef Henna <youssef.hisham14@gmail.com>
Date: Tue, 26 May 2026 18:19:25 +0200
Subject: [PATCH 1/3] Be more nativwind compatible

---
 .../src/components/DeckSwiper/DeckSwiper.tsx     |  4 +++-
 .../src/components/DeckSwiper/DeckSwiperCard.tsx | 14 +++++++++++---
 packages/core/src/components/LottieAnimation.tsx |  3 +--
 .../MediaPlayer/AudioPlayer/AudioPlayerCommon.ts |  1 +
 .../AudioPlayer/AudioPlayerWithInterface.tsx     |  2 ++
 .../MediaPlayer/VideoPlayer/VideoPlayer.tsx      | 10 ++++++++--
 .../CircularProgress/CircularProgress.tsx        |  2 ++
 .../Progress/LinearProgress/LinearProgress.tsx   |  2 ++
 .../src/components/Progress/ProgressCommon.ts    |  1 +
 .../components/SwipeableItem/SwipeableItem.tsx   |  3 +++
 packages/core/src/components/Swiper/Swiper.tsx   |  7 ++++---
 .../core/src/components/Swiper/SwiperItem.tsx    | 16 ++++++++++++----
 .../components/YoutubePlayer/YoutubePlayer.tsx   |  3 ++-
 .../YoutubePlayer/YoutubePlayerProps.ts          |  1 +
 yarn.lock                                        | 14 +++++++-------
 15 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/components/DeckSwiper/DeckSwiper.tsx b/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
index 3394f011b..15ddb76c4 100644
--- a/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
+++ b/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
@@ -25,6 +25,7 @@ export interface DeckSwiperProps<T> {
   keyExtractor?: (item: T) => string;
   renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
@@ -48,6 +49,7 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
       keyExtractor,
       renderItem,
       style,
+      className,
       children,
     }: React.PropsWithChildren<DeckSwiperProps<T>>,
     ref: React.Ref<DeckSwiperRef>
@@ -146,7 +148,7 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
      */
 
     return (
-      <View>
+      <View {...(className ? ({ className } as any) : {})}>
         <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
         <DeckSwiperComponent
           ref={deckSwiperRef}
diff --git a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
index 61b9e0e58..5e0e43e67 100644
--- a/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
+++ b/packages/core/src/components/DeckSwiper/DeckSwiperCard.tsx
@@ -1,16 +1,23 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  ViewProps,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import type { ReadTheme } from "@draftbit/theme";
 import { withTheme } from "@draftbit/theme";
 
-export interface DeckSwiperCardProps {
+export interface DeckSwiperCardProps
+  extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
 }
 
 const DeckSwiperCard: React.FC<
   React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme }) => (
+> = ({ style, children, theme, ...rest }) => (
   <View
     style={[
       styles.card,
@@ -20,6 +27,7 @@ const DeckSwiperCard: React.FC<
       },
       style,
     ]}
+    {...rest}
   >
     {children}
   </View>
diff --git a/packages/core/src/components/LottieAnimation.tsx b/packages/core/src/components/LottieAnimation.tsx
index d1a0dfbb8..6a6224a47 100644
--- a/packages/core/src/components/LottieAnimation.tsx
+++ b/packages/core/src/components/LottieAnimation.tsx
@@ -25,7 +25,7 @@ const LottieAnimation = forwardRef<LottieView, Props>(
     ref
   ) => {
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         <LottieView
           ref={ref}
           source={source}
@@ -36,7 +36,6 @@ const LottieAnimation = forwardRef<LottieView, Props>(
           // A specific size is required on mobile, but not on web.
           // This ensures consistent behavior across platforms during preview.
           style={{ width: "100%", height: "100%" }}
-          {...rest}
         />
       </View>
     );
diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts
index fa29fc144..a90f72c5d 100644
--- a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts
+++ b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts
@@ -13,6 +13,7 @@ export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
 }
 
 export interface AudioPlayerInterfaceProps {
+  className?: string;
   style?: StyleProp<ViewStyle & TextStyle>;
   thumbColor?: string;
   completedTrackColor?: string;
diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
index b88200b11..1632370bf 100644
--- a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
+++ b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
@@ -21,6 +21,7 @@ const AudioPlayerWithInterface = React.forwardRef<
   (
     {
       style,
+      className,
       thumbColor,
       completedTrackColor,
       remainingTrackColor,
@@ -127,6 +128,7 @@ const AudioPlayerWithInterface = React.forwardRef<
         />
         <View
           testID="audio-player-interface"
+          {...(className ? ({ className } as any) : {})}
           style={[
             {
               backgroundColor: theme.colors.background.base,
diff --git a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
index 7edf026f8..19ceaac70 100644
--- a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
+++ b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
@@ -75,6 +75,9 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
     },
     ref
   ) => {
+    // @ts-ignore
+    const { className, ...videoPlayerProps } = rest;
+
     const stableSource = useSourceDeepCompareMemoize(
       normalizeBase64Source(source, "video")
     );
@@ -248,7 +251,10 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
         ref={mediaPlaybackWrapperRef}
         onTogglePlayback={updateAudioMode}
       >
-        <View style={[style, styles.container]}>
+        <View
+          style={[style, styles.container]}
+          {...(className ? ({ className } as any) : {})}
+        >
           <VideoPlayerComponent
             ref={videoPlayerRef}
             player={player}
@@ -258,7 +264,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
             onFullscreenEnter={() => onFullscreenUpdate("entered")}
             onFullscreenExit={() => onFullscreenUpdate("exited")}
             allowsFullscreen={allowsFullscreen}
-            {...rest}
+            {...videoPlayerProps}
           />
           {showPoster && posterSource && (
             <View style={StyleSheet.absoluteFill} pointerEvents="none">
diff --git a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
index 47ad689b3..bed003f0c 100644
--- a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
+++ b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
@@ -41,6 +41,7 @@ export const CircularProgress: React.FC<
   trackCustomDashArray,
   onFullPathWidth,
   startPosition = "top",
+  className,
   style,
   testID,
 }) => {
@@ -128,6 +129,7 @@ export const CircularProgress: React.FC<
         },
         style,
       ]}
+      {...(className ? ({ className } as any) : {})}
     >
       <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
         {showTrack && (
diff --git a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
index fecf30711..b1fa55158 100644
--- a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
+++ b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
@@ -37,6 +37,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
   customDashArray,
   trackCustomDashArray,
   onFullPathWidth,
+  className,
   style,
   testID,
 }) => {
@@ -101,6 +102,7 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
         },
         style,
       ]}
+      {...(className ? ({ className } as any) : {})}
     >
       <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
         {showTrack && (
diff --git a/packages/core/src/components/Progress/ProgressCommon.ts b/packages/core/src/components/Progress/ProgressCommon.ts
index 819c675ef..6830e16d2 100644
--- a/packages/core/src/components/Progress/ProgressCommon.ts
+++ b/packages/core/src/components/Progress/ProgressCommon.ts
@@ -25,6 +25,7 @@ export interface BaseProgressProps {
   customDashArray?: string;
   trackCustomDashArray?: string;
   onFullPathWidth?: (width: number) => void;
+  className?: string;
   style?: StyleProp<ViewStyle>;
   theme: ReadTheme;
   testID?: string;
diff --git a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
index c4f32c35b..b3ca20e29 100644
--- a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
+++ b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
@@ -50,6 +50,7 @@ import {
  */
 
 export interface SwipeableItemProps extends IconSlot {
+  className?: string;
   closeOnPress?: boolean;
   leftOpenValue?: number;
   rightOpenValue?: number;
@@ -74,6 +75,7 @@ type Props = SwipeableItemProps & RightSwipeProps & LeftSwipeProps;
 
 const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   theme,
+  className,
   style,
   children: childrenProp,
   Icon,
@@ -232,6 +234,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         setComponentWidth(event.nativeEvent.layout.width);
       }}
       style={[styles.parentContainer, parentContainerStyles]}
+      {...(className ? ({ className } as any) : {})}
     >
       {/*@ts-ignore*/}
       <SwipeRow
diff --git a/packages/core/src/components/Swiper/Swiper.tsx b/packages/core/src/components/Swiper/Swiper.tsx
index 68ea3f630..9cf3210ac 100644
--- a/packages/core/src/components/Swiper/Swiper.tsx
+++ b/packages/core/src/components/Swiper/Swiper.tsx
@@ -1,6 +1,6 @@
 import { ReadTheme, withTheme } from "@draftbit/theme";
 import React, { forwardRef, useImperativeHandle } from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, StyleProp, ViewStyle, ViewProps } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
 export interface SwiperRef {
@@ -9,7 +9,7 @@ export interface SwiperRef {
   swipePrev: () => void;
 }
 
-export interface SwiperProps<T> {
+export interface SwiperProps<T> extends Omit<ViewProps, "style" | "children"> {
   onSwipe?: (index: number) => void;
   onSwipedNext?: (index: number) => void;
   onSwipedPrevious?: (index: number) => void;
@@ -63,6 +63,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       minDistanceToCapture,
       style,
       hideDots = false,
+      ...rest
     }: SwiperProps<any>,
     ref
   ) => {
@@ -141,7 +142,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
     }));
 
     return (
-      <View style={style}>
+      <View style={style} {...rest}>
         {/* @ts-ignore */}
         <SwiperComponent
           ref={swiperRef}
diff --git a/packages/core/src/components/Swiper/SwiperItem.tsx b/packages/core/src/components/Swiper/SwiperItem.tsx
index 3e5ee3043..f19d006ba 100644
--- a/packages/core/src/components/Swiper/SwiperItem.tsx
+++ b/packages/core/src/components/Swiper/SwiperItem.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from "react-native";
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -7,13 +13,15 @@ const styles = StyleSheet.create({
   },
 });
 
-export interface SwiperProps {
+export interface SwiperProps extends Omit<ViewProps, "style" | "children"> {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
-const SwiperItem = ({ children, style }: SwiperProps) => (
-  <View style={[styles.wrapper, style]}>{children}</View>
+const SwiperItem = ({ children, style, ...rest }: SwiperProps) => (
+  <View style={[styles.wrapper, style]} {...rest}>
+    {children}
+  </View>
 );
 
 export default SwiperItem;
diff --git a/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx b/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
index c2b0ec8c4..4da4504f8 100644
--- a/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
+++ b/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
@@ -9,6 +9,7 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   playlist,
   autoplay = false,
   style,
+  className,
 }) => {
   const { viewStyles } = extractStyles(style);
   const defaultVideoId = "nwMUpDESXrI";
@@ -24,7 +25,7 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   };
 
   return (
-    <View style={viewStyles}>
+    <View style={viewStyles} {...(className ? ({ className } as any) : {})}>
       <YouTube
         style={{ flex: 1 }}
         videoId={!videoId && !playlist ? defaultVideoId : videoId}
diff --git a/packages/core/src/components/YoutubePlayer/YoutubePlayerProps.ts b/packages/core/src/components/YoutubePlayer/YoutubePlayerProps.ts
index 181b33920..75d12ea09 100644
--- a/packages/core/src/components/YoutubePlayer/YoutubePlayerProps.ts
+++ b/packages/core/src/components/YoutubePlayer/YoutubePlayerProps.ts
@@ -5,4 +5,5 @@ export interface YoutubePlayerProps {
   playlist?: string;
   autoplay?: boolean;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
diff --git a/yarn.lock b/yarn.lock
index a46dccd8c..6e087235f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38,7 +38,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.20.0", "@babel/code-frame@^7.24.7", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2", "@babel/code-frame@^7.28.6", "@babel/code-frame@^7.29.0", "@babel/code-frame@^7.29.7":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.20.0", "@babel/code-frame@^7.24.7", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2", "@babel/code-frame@^7.29.0", "@babel/code-frame@^7.29.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.29.7.tgz#f2fbbfea87c44a21590ec515b778b2c26d8866e7"
   integrity sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==
@@ -73,7 +73,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.20.5", "@babel/generator@^7.25.0", "@babel/generator@^7.26.0", "@babel/generator@^7.26.3", "@babel/generator@^7.29.0", "@babel/generator@^7.29.1", "@babel/generator@^7.29.7", "@babel/generator@^7.7.2":
+"@babel/generator@^7.20.5", "@babel/generator@^7.25.0", "@babel/generator@^7.26.0", "@babel/generator@^7.26.3", "@babel/generator@^7.29.1", "@babel/generator@^7.29.7", "@babel/generator@^7.7.2":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.29.7.tgz#cca0b8827e6bcf3ba176788e7f3b180ad6db2fa3"
   integrity sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==
@@ -148,7 +148,7 @@
     "@babel/traverse" "^7.28.5"
     "@babel/types" "^7.28.5"
 
-"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.25.9", "@babel/helper-module-imports@^7.28.6", "@babel/helper-module-imports@^7.29.7":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.25.9", "@babel/helper-module-imports@^7.29.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz#ef25048a518e828d7393fac5882ddd73921d7396"
   integrity sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==
@@ -203,12 +203,12 @@
     "@babel/traverse" "^7.27.1"
     "@babel/types" "^7.27.1"
 
-"@babel/helper-string-parser@^7.27.1", "@babel/helper-string-parser@^7.29.7":
+"@babel/helper-string-parser@^7.29.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz#7f0871d99824d23137d60f86fcf6130fd5a1b51f"
   integrity sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==
 
-"@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.28.5", "@babel/helper-validator-identifier@^7.29.7":
+"@babel/helper-validator-identifier@^7.25.9", "@babel/helper-validator-identifier@^7.29.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz#bd87084ced0c796ec46bda492de6e83d29e89fc2"
   integrity sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==
@@ -245,7 +245,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.25.3", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3", "@babel/parser@^7.28.6", "@babel/parser@^7.29.0", "@babel/parser@^7.29.7":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.25.3", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3", "@babel/parser@^7.29.0", "@babel/parser@^7.29.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.29.7.tgz#837b87387cbf5ec5530cb634b3c622f68edb9334"
   integrity sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==
@@ -1088,7 +1088,7 @@
     "@babel/types" "^7.29.7"
     debug "^4.3.1"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.25.2", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.5", "@babel/types@^7.28.6", "@babel/types@^7.29.0", "@babel/types@^7.29.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.25.2", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.28.5", "@babel/types@^7.29.0", "@babel/types@^7.29.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.29.7.tgz#8005e31d82712ee7adaef6e23c63b71a62770a92"
   integrity sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==

From 030dba762c8ef243e826166e3765fc10202dc23b Mon Sep 17 00:00:00 2001
From: Youssef Henna <youssef.hisham14@gmail.com>
Date: Tue, 26 May 2026 18:32:50 +0200
Subject: [PATCH 2/3] more components

---
 packages/core/src/components/Layout/Spacer.tsx        |  6 ++++--
 packages/core/src/components/Picker/PickerCommon.ts   |  1 +
 .../src/components/Picker/PickerInputContainer.tsx    |  7 ++++++-
 packages/core/src/components/SVG.native.tsx           |  7 ++++++-
 packages/core/src/components/SVG.tsx                  | 10 +++++++++-
 .../core/src/components/SectionList/SectionHeader.tsx | 11 ++++++++---
 packages/core/src/components/Table/TableCell.tsx      |  3 +++
 packages/core/src/components/Table/TableRow.tsx       |  3 +++
 8 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/Layout/Spacer.tsx b/packages/core/src/components/Layout/Spacer.tsx
index 50ec05f3e..c6e85f74a 100644
--- a/packages/core/src/components/Layout/Spacer.tsx
+++ b/packages/core/src/components/Layout/Spacer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
 
-interface SpacerProps {
+interface SpacerProps extends Omit<ViewProps, "style"> {
   top?: number;
   right?: number;
   left?: number;
@@ -15,6 +15,7 @@ const Spacer: React.FC<SpacerProps> = ({
   bottom = 8,
   left = 8,
   style,
+  ...rest
 }) => {
   return (
     <View
@@ -27,6 +28,7 @@ const Spacer: React.FC<SpacerProps> = ({
           paddingBottom: bottom,
         },
       ]}
+      {...rest}
     />
   );
 };
diff --git a/packages/core/src/components/Picker/PickerCommon.ts b/packages/core/src/components/Picker/PickerCommon.ts
index 1f490584a..c13c87127 100644
--- a/packages/core/src/components/Picker/PickerCommon.ts
+++ b/packages/core/src/components/Picker/PickerCommon.ts
@@ -12,6 +12,7 @@ export interface PickerOption {
 }
 
 export interface PickerInputContainerProps extends IconSlot {
+  className?: string;
   error?: boolean;
   placeholder?: string;
   disabled?: boolean;
diff --git a/packages/core/src/components/Picker/PickerInputContainer.tsx b/packages/core/src/components/Picker/PickerInputContainer.tsx
index c35f354dd..5494780a3 100644
--- a/packages/core/src/components/Picker/PickerInputContainer.tsx
+++ b/packages/core/src/components/Picker/PickerInputContainer.tsx
@@ -33,6 +33,7 @@ const PickerInputContainer: React.FC<
   options = [],
   onPress,
   Icon,
+  className,
   style,
   selectedValue,
   disabled = false,
@@ -70,7 +71,11 @@ const PickerInputContainer: React.FC<
   }
 
   return (
-    <View testID={testID} style={[containerStyle, { zIndex }]}>
+    <View
+      testID={testID}
+      style={[containerStyle, { zIndex }]}
+      {...(className ? ({ className } as any) : {})}
+    >
       <TextField
         Icon={Icon}
         numberOfLines={1}
diff --git a/packages/core/src/components/SVG.native.tsx b/packages/core/src/components/SVG.native.tsx
index f3d0f4645..874f74ac7 100644
--- a/packages/core/src/components/SVG.native.tsx
+++ b/packages/core/src/components/SVG.native.tsx
@@ -7,14 +7,19 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
   return (
-    <View style={style as StyleProp<ViewStyle>}>
+    <View
+      style={style as StyleProp<ViewStyle>}
+      {...(className ? ({ className } as any) : {})}
+    >
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
   );
diff --git a/packages/core/src/components/SVG.tsx b/packages/core/src/components/SVG.tsx
index 607e27532..ed8e0e1b3 100644
--- a/packages/core/src/components/SVG.tsx
+++ b/packages/core/src/components/SVG.tsx
@@ -6,13 +6,21 @@ import Config from "./Config";
 type SVGComponentProps = {
   source: string;
   style?: StyleProp<ImageStyle>;
+  className?: string;
 };
 
 const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   source = Config.placeholderSvgURL,
   style,
+  className,
 }) => {
-  return <Image style={style} source={{ uri: source }} />;
+  return (
+    <Image
+      style={style}
+      source={{ uri: source }}
+      {...(className ? ({ className } as any) : {})}
+    />
+  );
 };
 
 export default SVG;
diff --git a/packages/core/src/components/SectionList/SectionHeader.tsx b/packages/core/src/components/SectionList/SectionHeader.tsx
index 1f8a9ec04..d805c5641 100644
--- a/packages/core/src/components/SectionList/SectionHeader.tsx
+++ b/packages/core/src/components/SectionList/SectionHeader.tsx
@@ -1,16 +1,21 @@
 import React from "react";
-import { View, StyleProp, ViewStyle, Text } from "react-native";
+import { View, ViewProps, StyleProp, ViewStyle, Text } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
 
-interface SectionHeaderProps {
+interface SectionHeaderProps extends Omit<ViewProps, "style" | "children"> {
   style?: StyleProp<ViewStyle>;
 }
 
 const SectionHeader: React.FC<React.PropsWithChildren<SectionHeaderProps>> = ({
   style,
   children,
-}) => <View style={style}>{children}</View>;
+  ...rest
+}) => (
+  <View style={style} {...rest}>
+    {children}
+  </View>
+);
 
 interface DefaultSectionHeaderProps {
   title: string;
diff --git a/packages/core/src/components/Table/TableCell.tsx b/packages/core/src/components/Table/TableCell.tsx
index 46215383b..2916a43be 100644
--- a/packages/core/src/components/Table/TableCell.tsx
+++ b/packages/core/src/components/Table/TableCell.tsx
@@ -10,6 +10,7 @@ import Pressable from "../Pressable";
 export interface Props extends TableProps {
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  className?: string;
 }
 
 const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
@@ -24,6 +25,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   cellHorizontalPadding,
   children,
   onPress,
+  className,
   style,
 }) => {
   const parentContextValue = React.useContext(TableStyleContext);
@@ -42,6 +44,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <ContainerComponent
       onPress={onPress}
+      {...(className ? ({ className } as any) : {})}
       style={[
         styles.cellContainer,
         borderViewStyle,
diff --git a/packages/core/src/components/Table/TableRow.tsx b/packages/core/src/components/Table/TableRow.tsx
index cf42ef058..7c05d61b2 100644
--- a/packages/core/src/components/Table/TableRow.tsx
+++ b/packages/core/src/components/Table/TableRow.tsx
@@ -14,6 +14,7 @@ export interface Props extends TableProps {
   onPress?: () => void;
   isTableHeader?: boolean;
   style?: StyleProp<ViewStyle>;
+  className?: string;
   theme: ReadTheme;
 }
 
@@ -30,6 +31,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
   isTableHeader = false,
   children,
   onPress,
+  className,
   style,
   theme,
 }) => {
@@ -61,6 +63,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
     <TableStyleContext.Provider value={contextValue}>
       <ContainerComponent
         onPress={onPress}
+        {...(className ? ({ className } as any) : {})}
         style={[
           borderViewStyle,
           isTableHeader

From 76566fc90f14b0a49ce9cd43510759d41e621234 Mon Sep 17 00:00:00 2001
From: Youssef Henna <youssef.hisham14@gmail.com>
Date: Tue, 26 May 2026 18:34:41 +0200
Subject: [PATCH 3/3] simpler syntax

---
 packages/core/src/components/DeckSwiper/DeckSwiper.tsx       | 4 +++-
 .../MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx     | 3 ++-
 .../src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx   | 3 ++-
 packages/core/src/components/Picker/PickerInputContainer.tsx | 3 ++-
 .../Progress/CircularProgress/CircularProgress.tsx           | 3 ++-
 .../components/Progress/LinearProgress/LinearProgress.tsx    | 3 ++-
 packages/core/src/components/SVG.native.tsx                  | 3 ++-
 packages/core/src/components/SVG.tsx                         | 3 ++-
 packages/core/src/components/SwipeableItem/SwipeableItem.tsx | 3 ++-
 packages/core/src/components/Table/TableCell.tsx             | 3 ++-
 packages/core/src/components/Table/TableRow.tsx              | 3 ++-
 packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx | 5 ++++-
 12 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/DeckSwiper/DeckSwiper.tsx b/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
index 15ddb76c4..e82e9e5b7 100644
--- a/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
+++ b/packages/core/src/components/DeckSwiper/DeckSwiper.tsx
@@ -148,7 +148,9 @@ const DeckSwiper = React.forwardRef<DeckSwiperRef, DeckSwiperProps<any>>(
      */
 
     return (
-      <View {...(className ? ({ className } as any) : {})}>
+      <View // @ts-ignore
+        className={className}
+      >
         <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
         <DeckSwiperComponent
           ref={deckSwiperRef}
diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
index 1632370bf..3ee955fec 100644
--- a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
+++ b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx
@@ -128,7 +128,8 @@ const AudioPlayerWithInterface = React.forwardRef<
         />
         <View
           testID="audio-player-interface"
-          {...(className ? ({ className } as any) : {})}
+          // @ts-ignore
+          className={className}
           style={[
             {
               backgroundColor: theme.colors.background.base,
diff --git a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
index 19ceaac70..420e2a52f 100644
--- a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
+++ b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
@@ -253,7 +253,8 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       >
         <View
           style={[style, styles.container]}
-          {...(className ? ({ className } as any) : {})}
+          // @ts-ignore
+          className={className}
         >
           <VideoPlayerComponent
             ref={videoPlayerRef}
diff --git a/packages/core/src/components/Picker/PickerInputContainer.tsx b/packages/core/src/components/Picker/PickerInputContainer.tsx
index 5494780a3..892f7eb7a 100644
--- a/packages/core/src/components/Picker/PickerInputContainer.tsx
+++ b/packages/core/src/components/Picker/PickerInputContainer.tsx
@@ -74,7 +74,8 @@ const PickerInputContainer: React.FC<
     <View
       testID={testID}
       style={[containerStyle, { zIndex }]}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     >
       <TextField
         Icon={Icon}
diff --git a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
index bed003f0c..ca6c32c2e 100644
--- a/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
+++ b/packages/core/src/components/Progress/CircularProgress/CircularProgress.tsx
@@ -129,7 +129,8 @@ export const CircularProgress: React.FC<
         },
         style,
       ]}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
         {showTrack && (
diff --git a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
index b1fa55158..0f0a20c7e 100644
--- a/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
+++ b/packages/core/src/components/Progress/LinearProgress/LinearProgress.tsx
@@ -102,7 +102,8 @@ export const LinearProgress: React.FC<ValueProgressProps> = ({
         },
         style,
       ]}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     >
       <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
         {showTrack && (
diff --git a/packages/core/src/components/SVG.native.tsx b/packages/core/src/components/SVG.native.tsx
index 874f74ac7..5266f1a11 100644
--- a/packages/core/src/components/SVG.native.tsx
+++ b/packages/core/src/components/SVG.native.tsx
@@ -18,7 +18,8 @@ const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   return (
     <View
       style={style as StyleProp<ViewStyle>}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     >
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
diff --git a/packages/core/src/components/SVG.tsx b/packages/core/src/components/SVG.tsx
index ed8e0e1b3..3da0509f9 100644
--- a/packages/core/src/components/SVG.tsx
+++ b/packages/core/src/components/SVG.tsx
@@ -18,7 +18,8 @@ const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
     <Image
       style={style}
       source={{ uri: source }}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     />
   );
 };
diff --git a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
index b3ca20e29..b6a4c9069 100644
--- a/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
+++ b/packages/core/src/components/SwipeableItem/SwipeableItem.tsx
@@ -234,7 +234,8 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
         setComponentWidth(event.nativeEvent.layout.width);
       }}
       style={[styles.parentContainer, parentContainerStyles]}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
     >
       {/*@ts-ignore*/}
       <SwipeRow
diff --git a/packages/core/src/components/Table/TableCell.tsx b/packages/core/src/components/Table/TableCell.tsx
index 2916a43be..0194ca760 100644
--- a/packages/core/src/components/Table/TableCell.tsx
+++ b/packages/core/src/components/Table/TableCell.tsx
@@ -44,7 +44,8 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <ContainerComponent
       onPress={onPress}
-      {...(className ? ({ className } as any) : {})}
+      // @ts-ignore
+      className={className}
       style={[
         styles.cellContainer,
         borderViewStyle,
diff --git a/packages/core/src/components/Table/TableRow.tsx b/packages/core/src/components/Table/TableRow.tsx
index 7c05d61b2..6a71bd98f 100644
--- a/packages/core/src/components/Table/TableRow.tsx
+++ b/packages/core/src/components/Table/TableRow.tsx
@@ -63,7 +63,8 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
     <TableStyleContext.Provider value={contextValue}>
       <ContainerComponent
         onPress={onPress}
-        {...(className ? ({ className } as any) : {})}
+        // @ts-ignore
+        className={className}
         style={[
           borderViewStyle,
           isTableHeader
diff --git a/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx b/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
index 4da4504f8..59232c10d 100644
--- a/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
+++ b/packages/core/src/components/YoutubePlayer/YoutubePlayer.tsx
@@ -25,7 +25,10 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   };
 
   return (
-    <View style={viewStyles} {...(className ? ({ className } as any) : {})}>
+    <View
+      style={viewStyles} // @ts-ignore
+      className={className}
+    >
       <YouTube
         style={{ flex: 1 }}
         videoId={!videoId && !playlist ? defaultVideoId : videoId}