Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add zero-config web support #582

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Conversation

nandorojo
Copy link
Contributor

@nandorojo nandorojo commented Dec 11, 2024

Details

(Still a draft)

Removes any dependency on React Native, React Native Web, for Web users. Nothing changes for native. This should drastically fix any installation steps / config issues for Web users. Without these changes, web users will flood your issues constantly lol.

  • Rename .web.tsx files to be .native.tsx
  • Remove usages of inline Platform.select in favor of .native.tsx
  • Use web-specific code as the main file for any cross-platform files.
  • Remove StyleSheet.create
  • Remove StyleSheet.flatten (slow and not useful for this case)
  • Use inherit for caretColor instead of StyleSheet.flatten(props.style).color (pure CSS implementation, reproduction)
  • Address webStyleUtils
  • Remove the erroneous style = {} in the web file which broke memoization entirely for no benefit.

Breaking change

There is one breaking change: Consumers using StyleSheet.create on web will no longer work. They should be converted to plain style objects. This can be easily addressed with an error message. This breaking change could be easily reverted, but I recommend keeping it. Zeego made this change, and it was well worth it.

Related Issues

GH_LINK

Closes #579

Manual Tests

Linked PRs

@nandorojo
Copy link
Contributor Author

nandorojo commented Dec 11, 2024

Some feedback:

Currently webStyleUtils uses the following from React Native Web. I recommend removing or upstreaming them to get rid of the dependency on react-native-web.

  1. createReactDOMStyle (code)
    a. This adds support for a bunch of stuff that's basically never used, such as marginInline
    b. I'm thinking this could be simplified and implemented directly in library code, especially as React Native starts to support web code
    c. The only one that we might want to keep is the flex styles. I think this should be implemented by this lib instead of importing from RNW.
  2. preprocessStyle (code)
    a. The only real function this modules serves is to give deprecation warnings about the styles. I think this step should also get removed, as React Native now supports (and prefers) the web styles.
  3. dangerousStyleValue (code)
    a. This is nothing more than checking for nullish values / numbers / empty strings. This should be upstreamed to this library.

Tamagui, Gluestack, etc have all upstreamed these functions into their own libs, as seen here.

I haven't implemented these changes yet, I'll wait for feedback first. CC @tomekzaw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use .native.tsx instead of .web.tsx
1 participant