feat: mapped layout props for view component

[mayank-96]

Summary

This PR adds mapping for layout props, it maps

marginInlineStart: 'marginStart',
marginInlineEnd: 'marginEnd',
marginBlockStart: 'marginTop',
marginBlockEnd: 'marginBottom',
marginBlock: 'marginVertical',
marginInline: 'marginHorizontal',
paddingInlineStart: 'paddingStart',
paddingInlineEnd: 'paddingEnd',
paddingBlockStart: 'paddingTop',
paddingBlockEnd: 'paddingBottom',
paddingBlock: 'paddingVertical',
paddingInline: 'paddingHorizontal',

as requested on https://github.com/facebook/react-native/issues/34425

Changelog

[General][Added] - Added CSS logical properties by mapping layout props.

Test Plan

<View
  style={[
    {
      marginBlockStart: 5,        // maps to "marginTop"
      borderWidth: 1,
      borderRadius: 5,
      padding: 5,
    }
  ]}>
  <Text style={{fontSize: 11}}>Hello World!</Text>
</View>

[efoken]

What about shorthands? See https://github.com/facebook/react-native/issues/34425#issuecomment-1236664129

[mayank-96]

What about shorthands? See #34425 (comment)

Hello @necolas, Should we include this props as well?

[necolas]

Yes let's include those too. Thanks

[necolas]

Please can we add unit tests / examples for this?

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,066,372	-34,713
android	hermes	armeabi-v7a	6,439,011	-31,774
android	hermes	x86	7,482,080	-36,851
android	hermes	x86_64	7,341,307	-36,231
android	jsc	arm64-v8a	8,932,269	-32,889
android	jsc	armeabi-v7a	7,666,624	-29,927
android	jsc	x86	8,992,650	-35,004
android	jsc	x86_64	9,471,395	-34,397

Base commit: 5fb67b0fb21b0fa56106dad0bba8cca676451a4e Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 5fb67b0fb21b0fa56106dad0bba8cca676451a4e Branch: main

[necolas]

There's a lot of shared code that we should consolidate, because more properties will be added over time. It probably should go in the StyleSheet directory

[cipolleschi]

@mayank-96 could you rebase the PR, please?

[mayank-96]

Hello @cipolleschi, I'm rebasing it.

[mayank-96]

Hello @cipolleschi, I have rebased the PR and also shifted the shared code to the stylesheet directory by adding a helper function for mapping in View component as @necolas said. Please check if it is the right way to do so that I can add it for other components as well like Image, Text and TextInput.

[necolas]

There are still a number of issues in this PR that need to be resolved before moving forward: consistency of how the work is done across components, typos in variable names, and unit tests for the processing. It should then be rebased too. Thanks

[necolas]

@mayank-96 please rebase and resolve conflicts again, then @cipolleschi can import it. Thanks!

[cipolleschi]

If you touched the type definitions, remember to update also the typescript types!

[necolas]

@mayank-96 ping

[necolas]

@cipolleschi I think we'll need to rebase this ourselves as the author is no longer responding

[mayank-96]

Hello @necolas, sorry I couldn't respond you earlier due to some health issues. I'll rebase this PR today itself.

[pull-bot]

PR build artifact for 1589f7bbfc8f88c5626179e2bd5788ce5606ce9f is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 1589f7bbfc8f88c5626179e2bd5788ce5606ce9f is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 2d46f007d05f67fbbee54f1459d33cbce8e6923d is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 2d46f007d05f67fbbee54f1459d33cbce8e6923d is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[facebook-github-bot]

@necolas has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@necolas has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[pull-bot]

PR build artifact for 12b028a4e925bf6a3f3bf07d64d84161919725d8 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[pull-bot]

PR build artifact for 12b028a4e925bf6a3f3bf07d64d84161919725d8 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

[react-native-bot]

This pull request was successfully merged by @mayank-96 in cf3747957ab210e31504109bb6b3e34e773a5b9a.

^{When will my fix make it into a release? | Upcoming Releases}

[necolas]

This patched broke text layout internally and needed to be backed out

[facebook-github-bot]

This pull request has been reverted by 114098d419e2a7a254f81b9eb9f0cc542194a660.

[mayank-96]

Okay, I'll have a look into this.

[necolas]

This PR can't be imported anymore. I've opened a new PR with fixes and tests #35316

[pull-bot]

PR build artifact for d47e1ba00b8238fba0e1474f0ea624dfb8accb52 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.