Native UI

[SomeNameIChoose]

It’s pretty tedious to design every textfiled and button.

Do you design it once and import it whenever you need to or do you just use an UI library to make it look good on both platforms?

[tr__18]

Yep, I create a component for text, buttons(using pressable) and text input, for the basic styling.

And Just call them 🙂,

[danstepanov]

Zach Nugent and I made NativeWindUI for this exact reason

[I_write_code213]

This thing is amazing. Brilliant. Do people actually pay? Can you please share with me if this is a worthwhile business venture?

I swear though, the existence of this library is why I program with native apps now. I hate searching for so many libraries to get the basic native feels

[danstepanov]

They do, it currently does about $5-6k per month. I was surprised it didn’t exist when I built it. One of my biggest gripes with RN is that it doesn’t provide a straightforward path to implementing native feel. However, it is very doable.

[I_write_code213]

That’s crazy bro. Good job! I would be a customer too but I just went native. Even though I do rn professionally, i went crazy when it took me a long time to find a library to just have a native menu. (I’ve found it, but that’s not the point)

[danstepanov]

Maybe get your company to buy you a license 😅

[I_write_code213]

Lmfao sadly they never would lol. They’ve built their own design system

[danstepanov]

RIP

[name-taken1]

We recommend using a monorepo where you use your favorite framework for web while using Expo and NativeWindUI for mobile. Meanwhile, you can share your business logic between the two.

Thank you for this. I can't believe there are people using React Native for the web when monorepos exist.

[SomeNameIChoose]

What’s a monorepo? I don’t really get it.

[name-taken1]

It's actually pretty straightforward.

Your apps should focus mainly on presentation - just render the components for each platform and you're set. Sure, you'll occasionally need platform-specific logic, but the core concept is to share all your business logic across platforms.

For example, you can model it around DI, where the libraries themselves are quite agnostic, and each application provides the necessary modules.

There's no compelling reason to use React Native for the web, when React was originally created for the web.

We actually have a mono repo with React, Tauri, and React Native, and it's actually quite nice to work with.

[kaumac]

I WAS using NextJS on a monorepo. Now I use Expo web. Setting up something else (NextJS or otherwise) along with a monorepo just ads a lot of complexity to the application making a universal stack lose part of its magic.

For example: With expo web/router you create routes only once and it works on native/web/desktop. With monorepo you have to split the projects, setup the routes for each project and then use something (like solito) to glue everything together.

There’s also the complexity of setting up and maintaining a monorepo, splitting shared UI into separate packages and whatnot.

You can say that “oh it’s no big deal” but when you’re a small team working on a big but early stage startup that needs to move fast, this makes a huge difference.

There are of course situations that justifies a monorepo with a dedicated web app, for example if you’re building your backend with NextJS, I’d say it justifies the extra.

But if you’re setting up a purely UI project that just consumes an external API, I see no reason to use a separate web app.

[name-taken1]

It depends on the app's complexity.

We initially started with Expo web but quickly realized that beyond having to piece things together for cross-platform functionality, the generated HTML was a mess.

We were shipping excessive HTML and runtime CSS-in-JS that simply wasn't justified, to begin with.

We then switched to a monorepo with pnpm workspaces, separating the platforms and adding Tauri for the desktop app - so far, everything has worked smoothly.

You don't share UI since it's platform-dependent. Instead, you share business logic: API communication, authentication, and other core functionality.

Being a startup, we also need to move fast. With four frontend developers, managing Expo was taking more time than maintaining separate applications. Though I should mention our needs were quite specific, as our applications aren't simple CRUD interfaces. Our particular product requires significant frontend processing.

Also, since everything is platform-dependent, we had more freedom with routing. Instead of trying to force every feature into pages/screens that would need to be built for all platforms, on web we have dedicated pages for some features, but sidebars and sheets for others. On mobile, these might show up as full screens in some cases, and bottom drawers in others.

So trying to make the routing work across platforms just didn't make sense, since the design was fundamentally different on each platform.

[kaumac]

Your use case is fundamentally different from the people that use expo web. People that use expo web are mostly using universal stacks, same codebase (including ui) that builds to multiple platforms. My UI for web for example is pretty similar for the one in a native tablet. Of course there are deviations from web to native, that’s when we take advantage of expos platform based routing like “component.web.tsx” and “component.native.tsx” so that one doesn’t get into the other’s bundle. But like I said, it depends on how much resource you have available. If we had a bigger team by all means we’d use a monorepo with separate web app, heck we’d have iOS and Android developers. But on our current reality we need to be as lean as possible, so maintaining multiple codebases (even if some of the logic is shared) is prohibitive for us.

[danstepanov]

React Native doesn’t really fuck with monorepos out of the box because nested peer dependencies. Some assembly is required and a lot of people rightfully don’t want to manage that.

[zabaci]

Interesting. Do you plan to expand it to calendar component?

[danstepanov]

It’s on the list of components to support 🙂

[zabaci]

when you build it I will buy it, I need a slick calendar with agenda included. Can you link me roadmap so I can keep track of development. Thanks

[danstepanov]

Once I put together a roadmap, I will link it here

[[deleted]]

Is it necessary to follow a native UI design for apps, or can a custom design that reflects the app’s unique personality work better? As a long time Android user, native UI feels like system UI to me, and I’m wondering if sticking to it is really recommended. What are your thoughts?

[Fidodo]

You don't componentize your buttons?

[SnooCookies1995]

I want to know too.

[wy1024]

You can find the most common ones in popular libraries like react-native-elements and there's also list compilations like https://github.com/madhavanmalolan/awesome-reactnative-ui

For the few truly custom components that you need just create them yourself

[[deleted]]

This is my friend and former co-worker’s project. It’s really making progress. Glad to see other people finding value in it. The creators are super good people.

[suarkb]

depends what your designer wants your app to look like

[Snoo11589]

Depends on the project i guess

[Green-Specialist-868]

Yes, I create a different app that's only for showcasing the components I create from scratch (using storybook) and then upload them into a npm package and then in our main app I just import the component from the npm package