Issues with `createText` typing
nelyousfi opened this issue · comments
What:
- Not forcing you to pass the custom component props as generic, this leads to add all the RN Text props to the restyled custom component.
const CustomText = ({ title }: { title: string }) => <Text>{title}</Text>;
const RestyledCustomText = createText<Theme>(CustomText);
<RestyledCustomText color="lightpink" accessibilityLabel="I am a label" />;
- There is no type inference between the generic and the props of the passed component:
const CustomText = ({ title }: { title: string }) => <Text>{title}</Text>;
const RestyledCustomText = createText<Theme, {}>(CustomText);
- We are not forcing the passed custom text to have a style prop (the style prop will contain all the calculated props as a style object)
I believe the same applied for createBox
.
I haven't checked your PR yet, but createText
is aimed to be a shorthand of creating a restyle component based on react-native's Text, hence, they are coupled by design.
If you would like to create a restyle version of a custom component you should use createRestyleComponent
instead. i.e.:
import {TextProps as RNTextProps} from 'react-native'
import {
createRestyleComponent,
textRestyleFunctions,
TextProps as RestyleTextProps,
} from '@shopify/restyle'
import {Theme} from './theme'
import {CustomText} from './CustomText'
type CustomTextProps = RestyleTextProps<Theme> &
Omit<
RNTextProps,
| 'fontWeight'
| 'fontFamily'
| 'fontSize'
| 'lineHeight'
| 'letterSpacing'
| 'style'
>
const CustomRestyleText = createRestyleComponent<CustomTextProps, Theme>(
textRestyleFunctions,
CustomText
)
export const Text = (props: CustomTextProps) => {
return (
<CustomRestyleText
{...props}
/>
)
}
But then why we can pass an optional BaseComponent to createText
+ the props as generic?
Cause for me, looking at that, I thought that createText
and createView
can also be used as a customised createRestyleComponent
for Text and View.