From a69f600787dc7ff080f7539f4dfc4b8be3b770dc Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Sun, 8 May 2022 22:05:28 +1000
Subject: [PATCH] fix: rendering nested child styled components

---
 src/{styled.ts => styled.tsx} | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)
 rename src/{styled.ts => styled.tsx} (81%)

diff --git a/src/styled.ts b/src/styled.tsx
similarity index 81%
rename from src/styled.ts
rename to src/styled.tsx
index 0edd843..6d8dd55 100644
--- a/src/styled.ts
+++ b/src/styled.tsx
@@ -2,8 +2,6 @@ import { createElement, FunctionComponent, ComponentClass } from "react";
 import { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { useTailwind } from "./use-tailwind";
 
-const isStyled = Symbol("styled");
-
 type StyledProps<P> = P & {
   className?: string;
   tw?: string;
@@ -36,25 +34,17 @@ export function styled<P>(
     }`;
   }
 
-  Styled[isStyled] = true;
-
   return Styled;
 }
 
 type StyledComponentProps<P> = StyledProps<P> & {
-  component: Component<P> & {
-    [isStyled]?: boolean;
-  };
+  component: Component<P>;
 };
 
 export function StyledComponent<P>({
   component,
   ...options
 }: StyledComponentProps<P>) {
-  if (component[isStyled]) {
-    return component;
-  }
-
-  return styled<P>(component)(options as P);
+  const Component = styled<P>(component);
+  return <Component {...(options as P)} />;
 }
-StyledComponent[isStyled] = true;