Describe the bug
Unable to assign children to a styled component.
import { defaultTheme, styled } from "@fast-styles/react";
import { View } from "react-native";
export const StyledView = styled(View, {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "red",
variants: {
mode: {
light: {
color: defaultTheme.tokens.$textDefault,
},
dark: {
color: defaultTheme.tokens.$textLight,
},
},
},
});
export default function App() {
const [mode] = useMode();
return (
<ModeProvider>
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<StyledView mode={mode}>
<Text>Styled View</Text>
</StyledView>
<StatusBar style="auto" />
</View>
</ModeProvider>
);
}
Type 'Element' is not assignable to type 'string | number | OpaqueColorValue | AnimatedNode | Readonly<{ width: number; height: number; }> | (PerpectiveTransform | ... 11 more ... | MatrixTransform)[] | number[] | null | undefined'.ts(2322)
To Reproduce
Reproducible example
Expected behavior
No ts errors
Environment
"@fast-styles/babel-plugin": "^0.2.3",
"@fast-styles/react": "^0.2.9",
"expo": "~49.0.8",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.4"