horizontal padding/margin seems to be ignored in react-native-web

I tried to create a react-native-web setup to build a storybook for react-native components that use stacks for layouting. First and foremost: This library solves layouting screens very very well and avoids a ton of headache (and code), so thank you for this 🙏

Now the problem I am facing surfaces when rendering a component that uses padding/margin from a styled (as in styled-components) stacks component (Box) in my case.

This is the component in question

import styled from "styled-components/native";
import { Box } from "@mobily/stacks";

const BaseComponent = styled(Box)({
  backgroundColor: "red",
  margin: 12,
  padding: 12,
});

which renders with a clean react-native-web app (no storybook included yet) as Note that there IS vertical padding and margin but no horizontal (explicitly defining `marginTop/Bottom/Left/Right did yield the same result).

Inspecting the rendered html reveals that indeed only vertical values are applied:

Here's my webpack config (built after https://mobily.github.io/stacks/docs/react-native-web#webpack)

// ...
rules: [{
  test: /\.m?[t|j]sx?$/,
  exclude: {
    and: [
      /node_modules/,
      {
        not: [/@mobily\/stacks/],
      },
    ],
  },
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env", "@babel/preset-react"],
        plugins: [
          ["react-native-web"],
          require.resolve("../node_modules/@mobily/stacks/babel"),
        ],
      },
   },
},
// ...

I am using stacks@1.4.1.

Edit: I tried to put together a code sandbox illustrating the problem https://codesandbox.io/s/react-native-web-stacks-reproducer-dth8h

Thanks in advance 🙏

grapp-dev / stacks

horizontal padding/margin seems to be ignored in react-native-web #32