Files
react-native/Libraries/StyleSheet/splitLayoutProps.js
T
Nishan 9f3a3e13cc feat: flex gap bindings (#34974)
Summary:
This PR adds React native binding for https://github.com/facebook/yoga/pull/1116

## Changelog

[General] [Added] - Flex gap yoga bindings

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

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

Test Plan:
Run rn tester app and go to view example. You'll find a flex gap example. Example location - `packages/rn-tester/js/examples/View/ViewExample.js`

### Tested on
- [x] iOS Fabric
- [x] iOS non-fabric
- [x] Android Fabric
- [x] Android non-fabric

To test on non-fabric Android, I just switched these booleans. Let me know if there's anything else I might have missed.

<img width="674" alt="Screenshot 2022-10-14 at 3 30 48 AM" src="https://user-images.githubusercontent.com/23293248/195718971-7aee4e7e-dbf0-4452-9d47-7925919c61dc.png">

Reviewed By: mdvacca

Differential Revision: D40527474

Pulled By: NickGerleman

fbshipit-source-id: 81c2c97c76f58fad3bb40fb378aaf8b6ebd30d63
2022-10-20 14:53:32 -07:00

72 lines
1.9 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
import type {____ViewStyle_Internal} from './StyleSheetTypes';
export default function splitLayoutProps(props: ?____ViewStyle_Internal): {
outer: ?____ViewStyle_Internal,
inner: ?____ViewStyle_Internal,
} {
let outer: ?____ViewStyle_Internal = null;
let inner: ?____ViewStyle_Internal = null;
if (props != null) {
// $FlowIgnore[incompatible-exact] Will contain a subset of keys from `props`.
outer = {};
// $FlowIgnore[incompatible-exact] Will contain a subset of keys from `props`.
inner = {};
for (const prop of Object.keys(props)) {
switch (prop) {
case 'margin':
case 'marginHorizontal':
case 'marginVertical':
case 'marginBottom':
case 'marginTop':
case 'marginLeft':
case 'marginRight':
case 'flex':
case 'flexGrow':
case 'flexShrink':
case 'flexBasis':
case 'alignSelf':
case 'height':
case 'minHeight':
case 'maxHeight':
case 'width':
case 'minWidth':
case 'maxWidth':
case 'position':
case 'left':
case 'right':
case 'bottom':
case 'top':
case 'transform':
case 'rowGap':
case 'columnGap':
case 'gap':
// $FlowFixMe[cannot-write]
// $FlowFixMe[incompatible-use]
// $FlowFixMe[prop-missing]
outer[prop] = props[prop];
break;
default:
// $FlowFixMe[cannot-write]
// $FlowFixMe[incompatible-use]
// $FlowFixMe[prop-missing]
inner[prop] = props[prop];
break;
}
}
}
return {outer, inner};
}