how do i integrate nachos-ui with react-native-web

[bogdant]

Can you provide an example of how nachos-ui can be used in a RNW project?

[mattapperson]

I am not sure I follow, it should "just work". what issues are you running into?

[saintego]

I have

Error: Cannot find module 'Platform'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.get Platform [as Platform] (/mnt/c/Users/stege/Projects/exchange/node_modules/react-native/Libraries/react-native/react-native-implementation.js:293:12)
    at Object.<anonymous> (/mnt/c/Users/stege/Projects/exchange/node_modules/nachos-ui/lib/components/Carousel/index.js:1:10487)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/mnt/c/Users/stege/Projects/exchange/node_modules/nachos-ui/lib/index.js:1:234)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.nachos-ui (/mnt/c/Users/stege/Projects/exchange/.next/server/static/development/pages/index.js:5086:18)```

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[slorber]

@mattapperson it's not that easy it seems.

I just tried nachos ui for my RNW "showcase" based on Gatsby here:
https://gatsby-rnw-uikits.netlify.com/nachos

Some things worked nice and others not so nice.

• It seems the ThemeProvider is required. Note this comp usage is not documented at all.
• It seems the new versions use material icons while the online demo use ionicons
• I couldn't get Button/Bubble to work with Gatsby SSR/static/production mode, looks like it was related to theming as well.
• Some things do not work so well (like checkboxes not like documented, button with icons not rendering the icons...)

My sources are https://github.com/slorber/gatsby-plugin-react-native-web/tree/master/examples/uikits and specifically the nachos ui examples are https://github.com/slorber/gatsby-plugin-react-native-web/blob/master/examples/uikits/src/pages/nachos.js

If you want to contribute and help me do the fixes you are welcome

Note your online version is using a quite old version of RNW, that might be one reason some things are not working. But I suspect it's also some of your doc that is not totally up to date.

Overall of all RN UI toolkits tested, Nachos is not so bad for web and have better feedback that reactnative elements or nativebase that I could not even run

Edit Actually it seems I have a weird issue. Gatsby static output does not look good on first run, but after React client side rehydratation it seems to fix it, don't really know why. Any idea?

I initially get this weird thing:

[mattapperson]

Yea the docs are in desperate need of being updated, and I would both welcome and support such an effort, just been swamped with work recently.
As for the SSR I am really unsure. I did test with Next.JS for SSR and it worked so their must be something with gatsby but I’m not familiar enough with gatsby to know what 😞

[slorber]

@mattapperson unfortunately I don't have much time to contribute to a library that I don't use in practice. I'm just reporting my findings to help others and help you improve your lib.

What I suspect is that the initial output (that is generated statically in node with Gatsby) does not actually get injected the theme. This is why I can't render at all some comps in node/SSR/static, while others are just unstyled.

Read the code and to me the problem is related to your "theme config" static prop and the fact that themed components do update theme provider config lazily. IE on first SSR render it can't work because it won't render with the updated theme config, so the static output is unstyled. If this works with Next it's probably because it rehydrates differently on the frontend, but there's probably an unstyled first render in Next too for a few milliseconds.

Don't really have any idea to fix this problem except collecting all the comp theme configs into a global object upfront, which could also serve as a default value for the theme context (ie not force users to use a ThemeProvider). Unfortunately this would defeat ability to treeshake unused styles. Also as the themeconfig is assigned to comp static this would also prevent threeshaking of unused comps so a refactor could be useful.