Yellowbox warning when running basic app with Expo / RN

[dabit3]

Describe the issue

I'm testing out the library in a bare Expo project.

When running the app, the following warning / error is logged:

iOS Bundled 29ms (node_modules/expo/AppEntry.js)
 ERROR  Warning: Failed prop type: Invalid prop `position` of value `static` supplied to `Text`, expected one of ["absolute","relative"].
Bad object: {
  "fontSize": 24,
  "fontWeight": "bold",
  "position": "static",
  "userSelect": "auto",
  "padding": 10,
  "flexShrink": 1
}

This is my codebase:

import { css, html } from 'react-strict-dom';
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Failed prop type'])

const styles = css.create({
  container: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1
  },
  h1: { padding: 10 },
  button: {
    borderRadius: 20,
    backgroundColor: '#700fad',
    padding: 10,
    paddingLeft: 50,
    paddingRight: 50
  },
  buttonText: { 
    color: 'white',
    position: 'relative',
    fontWeight: 'bold'
  }
});

export default function App() {
  return (
    <html.div style={styles.container}>
      <html.h1 style={styles.h1}>Hello World</html.h1>
      <html.button
        style={styles.button}
        onClick={() => alert('Hello World')}
      >
        <html.p
          style={styles.buttonText}
        >
          Click me
        </html.p>
      </html.button>
    </html.div>
  );
}

Expected behavior

No error / wraning

Steps to reproduce

steps to reproduce are outlined in the steps in this repo:

https://github.com/dabit3/react-strict-dom-example/blob/main/tokens.stylex.js

Test case

No response

Additional comments

No response

[ecreeth]

There's a PR that aims to fix this: facebook/react-native#43119

[necolas]

Certain features like position:static (which is used in the internals to match web defaults) require the use of canary React Native, the Fabric architecture, and various feature flags enabled. COMPATIBILITY.md says:

NOTE: React Native support assumes use of React Native's "Fabric" architecture, and relevant feature flags enabled.

The React Native team is working on rolling out the new architecture to OSS, and on simplifying the use of feature flags in the future. For the time being React Native is still in a transitional state and that's the main reason this library is marked as "experimental".

I'm happy to keep open a more general issue (#21) about improving and documenting how React Native web capabilities can be configured for OSS users. It will help surface the need for improved documentation and ergonomics to the React Native team. Input from the community will be very valuable in this regard.

For other Expo-related configuration that's required for xplat support, please refer to this repo's example app: https://github.com/facebook/react-strict-dom/tree/main/apps/examples

[necolas]

#21