[v3] Fix view style mismatch with web styles.

[zoriya]

This fixes bugs in v3 introduced due to switching to <div> instead of <View>:

• paddingHorizontal doesn't exist on web, we need to assign left/right separetly.
• display: flex; flex-direction: column is the default on a View, it's not on a div and that breaks component styles such as align-self: center
• add the stickyHeaderConfig props in the PositionViewState to make sure it doesn't get forwarded to the dom (and raise a warning saying this prop is not recognize)
• handle stickyHeaderConfig.backdropComponent

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dfc2e8ed73

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Preserve column flex direction when merging web styles

The new base style sets flexDirection: "column", but it is merged as { ...base, ...composed }, and Container still passes flexDirection: undefined for horizontal rows without a separator (src/components/Container.tsx), which overwrites the fallback and leaves the DOM element at browser default row. In that scenario the web layout still diverges from React Native defaults (e.g., alignSelf behavior), so this fix is incomplete for non-separator horizontal items (and the same pattern is repeated in the sticky variant).

Useful? React with 👍 / 👎.

[zoriya]

There's the onLayout of the PositionComponent that also doesn't work on the web but i'm not sure if we really need it or not

[jmeistrich]

Thanks @zoriya! The padding changes look good, but the others could cause problems:

• The flex settings in PositionView.tsx make sense for react-native-web, but not react-dom. I'm not sure how to detect that though... Maybe something like this?

const isRNWeb = typeof document !== 'undefined' && !!document.getElementById('react-native-stylesheet');

• renderStickyHeaderBackdrop definitely needs to be in PositionView.tsx! But in native it wraps it in an absolutely positioned view, so for consistency should it wrap in an absolutely positioned div?
• you removed some biome-ignore comments which breaks linting

[zoriya]

Sorry for the delay, those issues should be fixed!

[zoriya]

I pushed a few more commits because:

• gaps applied too much negative margin on the container and it made it go outside the screen
• an option to add other styles to the container so users can add for example outer margins only to items and not to headers