Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with createText typing #153

Open
nelyousfi opened this issue Apr 18, 2022 · 2 comments
Open

Issues with createText typing #153

nelyousfi opened this issue Apr 18, 2022 · 2 comments
Labels
enhancement New feature or request

Comments

@nelyousfi
Copy link
Contributor

nelyousfi commented Apr 18, 2022

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.

@nelyousfi nelyousfi added the enhancement New feature or request label Apr 18, 2022
@sbalay
Copy link
Contributor

sbalay commented Apr 19, 2022

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}
    />
  )
}

@nelyousfi
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants