'flex' property doesn't work with textRestyleFunctions
msvargas opened this issue · comments
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);
Hey @msvargas
Thank you for the issue, from my perspective it's not supported by intent
On the React Native documentation flexbox layout is used only for Views
https://reactnative.dev/docs/text-style-props
Hey @flexbox thank you for your answer but yes it supports all view styles, look at this:
https://reactnative.dev/docs/text#style
Also, other properties like position, top, left,bottom, right, flexShrink, ...etc doesn't work either
😮 I didn't know that I always split Box and Text to don't overcomplicate things
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. 👍