fix: 🏷️ add as ReactNode to RenderPropType of children

fixing type not assignable to type 'ReactNode' error

Author: Karthik-B-06

src/components/badge/Badge.tsx

@@ -76,7 +76,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
         })
       ) : (
         <Box style={tailwind.style(cx(badgeStyles.size[size]?.prefix))}>
-          {prefix}
+          {prefix as React.ReactNode}
         </Box>
       );
 

src/components/button/ButtonSpinner.tsx

@@ -3,7 +3,7 @@ import React, { isValidElement } from "react";
 import { Box } from "../../primitives";
 import { useTheme } from "../../theme";
 import { cx } from "../../utils";
-import { Spinner } from "../spinner";
+import { Spinner, SpinnerSizes } from "../spinner";
 
 import { ButtonProps } from "./Button";
 
@@ -50,10 +50,11 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
   const tailwind = useTheme();
   const buttonTheme = useTheme("button");
 
-  const spinnerSize =
+  const spinnerSize = (
     prefix || suffix
       ? spinnerSizes[size]?.spinner
-      : spinnerSizes[size]?.iconOnly;
+      : spinnerSizes[size]?.iconOnly
+  ) as SpinnerSizes;
 
   return isValidElement(spinner) ? (
     React.cloneElement(spinner, {

src/components/select/SelectPrefix.tsx

@@ -64,7 +64,7 @@ export const SelectPrefix: React.FC<SelectPrefixProps> = ({
       )}
       {...props}
     >
-      {_prefix}
+      {_prefix as React.ReactNode}
     </Box>
   );
 };

src/components/select/SelectSuffix.tsx

@@ -52,7 +52,7 @@ export const SelectSuffix: React.FC<SelectSuffixProps> = ({
             iconFill: tailwind.getColor(iconColor),
           })
         : suffix;
-    return selectSuffix;
+    return selectSuffix as React.ReactNode;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [disabled, invalid, suffix, isPressedOrHovered]);
 

src/components/slider/SliderTooltip.tsx

@@ -118,7 +118,7 @@ const RNSliderTooltip: React.FC<Partial<SliderTooltipProps>> = props => {
           getContainerStyle,
         ]}
       >
-        {content}
+        {content as React.ReactNode}
       </Box>
       <AnimatedBox
         style={[

src/components/tag/Tag.tsx

@@ -111,7 +111,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
       })
     ) : (
       <Box style={tailwind.style(cx(tagTheme.size[size]?.prefix))}>
-        {prefix}
+        {prefix as React.ReactNode}
       </Box>
     ));
 
@@ -138,7 +138,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
       })
     ) : (
       <Box style={tailwind.style(cx(tagTheme.size[size]?.suffix))}>
-        {suffix}
+        {suffix as React.ReactNode}
       </Box>
     ));
 
@@ -163,7 +163,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
         adjustsFontSizeToFit
         allowFontScaling={false}
       >
-        {props.children}
+        {props.children as React.ReactNode}
       </Text>
     ) : (
       props.children
@@ -222,9 +222,11 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
       accessibilityRole="button"
       accessibilityLabel={accesibilityLabel}
     >
-      {_prefix}
-      {children}
-      {_suffix}
+      <>
+        {_prefix}
+        {children}
+        {_suffix}
+      </>
     </Touchable>
   );
 });

src/components/tooltip/Tooltip.tsx

@@ -107,7 +107,7 @@ export const RNTooltip: React.FC<Partial<TooltipProps>> = props => {
               {content}
             </Text>
           ) : (
-            content
+            (content as React.ReactNode)
           )}
         </Box>
       </Popover.Content>