Add layout props to createText function

The RN `Text` component supports layout styles like `flex` and `maxWidth` these are commonly used, especially flex={1} for layouting and therefore useful to be exposed as props.

CHANGELOG.md

@@ -8,6 +8,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 ## Next
 
 - Fixed: clean up the project configuration for RN0.71, aligning some packages to the right version [#271](https://github.com/Shopify/restyle/pull/271) by [kelset](https://github.com/kelset) & [tido64](https://github.com/tido64)
+- Added: Add layout props to createText function [#262](https://github.com/Shopify/restyle/pull/262) by [robrechtme](https://github.com/robrechtme)
 
 ## 2.4.2 - 2023-03-30
 

documentation/docs/fundamentals/components/predefined-components.md

@@ -31,7 +31,7 @@ const Text = createText<Theme>();
 export default Text;
 ```
 
-The Text component comes with the following [Restyle functions](/fundamentals/restyle-functions#predefined-restyle-functions): `color`, `textDecorationColor`, `opacity`, `visible`, `typography`, `textShadow`, `spacing`. It also includes a [variant](/fundamentals/variants) that picks up styles under the `textVariants` key in your theme:
+The Text component comes with the following [Restyle functions](/fundamentals/restyle-functions#predefined-restyle-functions): `color`, `textDecorationColor`, `opacity`, `visible`, `typography`, `textShadow`, `spacing`, `layout`. It also includes a [variant](/fundamentals/variants) that picks up styles under the `textVariants` key in your theme:
 
 ```tsx
 // In your theme

src/createText.ts

@@ -18,6 +18,8 @@ import {
   VisibleProps,
   spacingShorthand,
   SpacingShorthandProps,
+  layout,
+  LayoutProps,
 } from './restyleFunctions';
 import createVariant, {VariantProps} from './createVariant';
 
@@ -26,6 +28,7 @@ type BaseTextProps<Theme extends BaseTheme> = ColorProps<Theme> &
   VisibleProps<Theme> &
   TypographyProps<Theme> &
   SpacingProps<Theme> &
+  LayoutProps<Theme> &
   TextShadowProps<Theme> &
   VariantProps<Theme, 'textVariants'>;
 
@@ -44,6 +47,7 @@ export const textRestyleFunctions = [
   spacing,
   spacingShorthand,
   textShadow,
+  layout,
   createVariant({themeKey: 'textVariants'}),
 ];
 

src/test/createText.test.tsx

@@ -120,6 +120,8 @@ describe('createText', () => {
           textTransform="capitalize"
           verticalAlign="top"
           writingDirection="rtl"
+          flex={1}
+          maxWidth={250}
         >
           Some text
         </Text>
@@ -148,6 +150,8 @@ describe('createText', () => {
         textTransform: 'capitalize',
         verticalAlign: 'top',
         writingDirection: 'rtl',
+        flex: 1,
+        maxWidth: 250,
       },
     ]);
   });