'flex' property doesn't work with textRestyleFunctions

[msvargas]

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);

[flexbox]

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

[msvargas]

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

[flexbox]

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

[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. 👍

[msvargas]

Hi @sbalay thanks, I needed flexShrink to shrink the text well in some cases (for example with allowFontScaling equals to true) but also I agree with you about separating responsibilities

[RodolfoSilva]

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. 👍

import {Theme} from '@/theme';
import {createText} from '@shopify/restyle';
import {ComponentProps} from 'react';
import {TextStyle} from 'react-native';

const BaseText = createText<Theme>();

type Props = ComponentProps<typeof BaseText> &
  Pick<TextStyle, 'flex' | 'flexShrink' | 'flexGrow'>;

export default function Text(props: Props) {
  const {style, flex, flexGrow, flexShrink, ...rest} = props;
  return (
    <BaseText
      style={[
        {
          flex,
          flexGrow,
          flexShrink,
        },
        style,
      ]}
      {...rest}
    />
  );
}