feat: Add Fabric implementation of inset logical properties (#35692)

Summary:
This PR implements `inset` logical properties as requested on https://github.com/facebook/react-native/issues/34425. This implementation includes the addition of the following style properties

- `inset`, equivalent to `top`, `bottom`, `right` and `left`.
- `insetBlock`, equivalent to `top` and `bottom`.
- `insetBlockEnd`, equivalent to `bottom`.
- `insetBlockStart`, equivalent to `top`.
- `insetInline`, equivalent to `right` and `left`.
- `insetInlineEnd`, equivalent to `right` or `left`.
- `insetInlineStart`, equivalent to `right` or `left`.

## Changelog

[GENERAL] [ADDED] - Add Fabric implementation of inset logical properties

Pull Request resolved: https://github.com/facebook/react-native/pull/35692

Test Plan:
1. Open the RNTester app and navigate to the `View` page
2. Test the new style properties through the `Insets` section

<table>
<tr>
    <td>Android</td>
    <td>iOS</td>
</tr>
  <tr>
    <td><img src="https://user-images.githubusercontent.com/11707729/208821212-fbbac6ed-09a4-43f4-ba98-dfd2cbabf044.png"  alt="1" width="360px"   />
    </td>
<td>
<img src="https://user-images.githubusercontent.com/11707729/208816997-ef044140-8824-4b1b-a77b-085f18ea9e0e.png" alt="2" width="360px"  />
</td>
   </tr>
</table>

Reviewed By: NickGerleman

Differential Revision: D42193661

Pulled By: ryancat

fbshipit-source-id: 3db8bcd2c4db0ef4886b9ec49a46424d57362620
This commit is contained in:
Gabriel Donadel Dall'Agnol
2022-12-21 20:07:35 -08:00
committed by Facebook GitHub Bot
parent 1542d71371
commit 9669c10afc
9 changed files with 217 additions and 0 deletions
@@ -258,6 +258,14 @@ const validAttributesForNonEventProps = {
top: true,
bottom: true,
inset: true,
insetBlock: true,
insetBlockEnd: true,
insetBlockStart: true,
insetInline: true,
insetInlineEnd: true,
insetInlineStart: true,
position: true,
style: ReactNativeStyleAttributes,