Viewing github.com/facebook/react/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js

```
/**
```

 * 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
```
```
 */
```
```
import type {BoxStyle} from './types';
```
```
/**
```

 * This mirrors react-native/Libraries/Inspector/resolveBoxStyle.js (but without RTL support).

```
 *
```

 * Resolve a style property into it's component parts, e.g.

```
 *
```

 * resolveBoxStyle('margin', {margin: 5, marginBottom: 10})

 * -> {top: 5, left: 5, right: 5, bottom: 10}

```
 */
```

export default function resolveBoxStyle(

```
  prefix: string,
```
```
  style: Object,
```
```
): BoxStyle | null {
```
```
  let hasParts = false;
```
```
  const result = {
```
```
    bottom: 0,
```
```
    left: 0,
```
```
    right: 0,
```
```
    top: 0,
```
```
  };
```
```
  const styleForAll = style[prefix];
```
```
  if (styleForAll != null) {
```

    // eslint-disable-next-line no-for-of-loops/no-for-of-loops

    for (const key of Object.keys(result)) {

```
      result[key] = styleForAll;
```
```
    }
```
```
    hasParts = true;
```
```
  }
```

  const styleForHorizontal = style[prefix + 'Horizontal'];

```
  if (styleForHorizontal != null) {
```
```
    result.left = styleForHorizontal;
```
```
    result.right = styleForHorizontal;
```
```
    hasParts = true;
```
```
  } else {
```

    const styleForLeft = style[prefix + 'Left'];

```
    if (styleForLeft != null) {
```
```
      result.left = styleForLeft;
```
```
      hasParts = true;
```
```
    }
```

    const styleForRight = style[prefix + 'Right'];

```
    if (styleForRight != null) {
```
```
      result.right = styleForRight;
```
```
      hasParts = true;
```
```
    }
```

    const styleForEnd = style[prefix + 'End'];

```
    if (styleForEnd != null) {
```
```
      // TODO RTL support
```
```
      result.right = styleForEnd;
```
```
      hasParts = true;
```
```
    }
```

    const styleForStart = style[prefix + 'Start'];

```
    if (styleForStart != null) {
```
```
      // TODO RTL support
```
```
      result.left = styleForStart;
```
```
      hasParts = true;
```
```
    }
```
```
  }
```

  const styleForVertical = style[prefix + 'Vertical'];

```
  if (styleForVertical != null) {
```
```
    result.bottom = styleForVertical;
```
```
    result.top = styleForVertical;
```
```
    hasParts = true;
```
```
  } else {
```

    const styleForBottom = style[prefix + 'Bottom'];

```
    if (styleForBottom != null) {
```
```
      result.bottom = styleForBottom;
```
```
      hasParts = true;
```
```
    }
```

    const styleForTop = style[prefix + 'Top'];

```
    if (styleForTop != null) {
```
```
      result.top = styleForTop;
```
```
      hasParts = true;
```
```
    }
```
```
  }
```
```
  return hasParts ? result : null;
```
```
}
```

About Sign Up Leave Feedback Contact