'flex' property doesn't work with textRestyleFunctions

We found some inconsistency with textRestyleFunctions add flex property and it doesn’t work I had to add layout restylefunction and it works

Example: (doesn’t work for me v1.6.1)

<Text flex={1}>Test</Text>

import { layout, TextProps as RestyleTextProps, textRestyleFunctions } from '@shopify/restyle';

.....
const restyleFunctions = [...textRestyleFunctions, layout];
....
const props = useRestyle(restyleFunctions, rest);

[sbalay]

Hey @msvargas

Text not support flex and other layout properties seems to be a decision made by design by previous maintainers, as layout is not included in textRestyleFunctions: https://github.com/Shopify/restyle/blob/master/src/createText.ts#L39

I guess the motivation was similar to what @flexbox mentioned above, and have a clear separation of resposibilities between Box and Text, but can’t say for sure as I wasn’t around back then.

If using typescript, you should get a type error when trying to apply flex to your Text component (before adding layout props to it.

Finally, If you do want layout props in your Text I think it’s perfectly fine to add them manually as you did. 👍

[flexbox]

😮 I didn’t know that I always split Box and Text to don’t overcomplicate things