RedwoodJs and React Native

this is :fire:

@SeanDunford Thank you for getting this conversation started. I just messaged some others that I know are interested as well.

1 Like

Looks like there’s a project called Solito that worked on unifying navigation for web and React-native (with or without Expo). Might be worth investigating.

3 Likes

I listened to a talk at ReactSummit in Amsterdam a week ago where they mentioned GitHub - software-mansion-labs/react-native-url-router: A new way to create navigation in react-native as a way to have the same router for both web and mobile. But I think we’re pretty set on using our own router for React (web) now. So if anything the other points in that same talk about the challenges about building a router and handling navigation across both web and mobile can help us make Redwood Router work on mobile too, if that’s a path we want to explore.

This was the talk, but it’s not public yet (will be in 24 days when I write this) https://portal.gitnation.org/contents/react-native-everywhere

@SeanDunford Thanks a lot for that link to Solito

I spent some time looking more into what Solito was all about yesterday, and especially the conf talk linked from their readme

Here are the linked resources from that video: https://fernandorojo.co/conf

If Redwood can do an integration between Redwood’s web side and RN like what he did, I really think that would be awesome! And also totally doable. I’ll bring it up with the core team and see what they say about it.

3 Likes

@Tobbe just watched the beginning of his about navigation. This already looks very similar to redwood router. This would be an awesome project to work on.

1 Like

Yeah, it got me excited! I’ll take a stab at it after I finish my prerender/SSG work.

Had some more thoughts pop up related to this that I wanted to write down.

Let’s say you’re building something like Slack, or Spotify. You’d want a web-side that’s your marketing pages and maybe a pricing page with buttons that take you to some checkout form.

You’d also want a web-side that’s your logged in experience for paying (or free, I guess) customers.
Plus you want a mobile app for your customers.

And finally you might want an internal “admin” web side too, to manage users, subscriptions, content etc

Now, we’ve mostly talked about a “mobile side” as a separate thing. But is that really what we want? Is that the end goal?

What if the web-side for your logged in customer experience (e.g. the Slack or Spotify web interface) could also be your mobile app? Wouldn’t that be better? Maybe we shouldn’t look at this as a separate mobile side. Maybe it should just be another web side that can also compile to an app. This is the kind of the approach Ionic Capacitor takes.

Or, I guess, if you want to flip it around and say that RW’s mobile side can also be viewed/used on the web as a web app. (This is the React Native Web approach)

Or we do keep it all fully separated where “mobile” is totally its own separate thing for full flexibility.

1 Like

I posted the above musings to the RW Core team chat as well.

The first question I got was “So, you’re asking PWA vs Native app?”

Any my reply was “Kind of, but not quite”.
It’s more like PWA + going the extra mile to make it a proper app that Apple will accept into the app store
vs
Making a mobile app + going the extra mile to make it work on the web as well

About PWAs: There are tools that simply take your PWA and bundle it into an app, like https://www.pwabuilder.com The problem is that only Google (and Microsoft) accept those kinds of apps into their app stores. Apple doesn’t.

Apple say

Your app should include features, content, and UI that elevate it beyond a repackaged website.

- https://developer.apple.com/app-store/review/guidelines/#minimum-functionality

Basically what that means is you need to integrate with native things on the platform that are not available to PWAs. The simplest thing is usually notifications.

The sneaky thing here is that Apple might approve your app the first time you submit it, depending on what reviewer you get looking at your app. But for any future update you wish to publish they might change their mind, basically looking you out of the store until you’ve rebuilt your app.

2 Likes

Another thing to think about is the router. For our current web side we have our own router that’s very opinionated in that it’s not file-system based, and that it’s very flat, with all routes defined in a single file with minimal nesting.

The most common React Native router, React Navigation - nesting does use nesting.

Should we spend the time to write our own router for React Native too, to keep it similar (or even the same? :open_mouth:) as our web side router? Or should we use an off the shelf solution like React Navigation because it’ll be faster to get something working, and it’s something people are used to?

1 Like

I’d just like to pop in as someone who is currently using Solito. It’s very heartening to see the Redwood core team actively considering this!

Right now I’m playing with Redwood’s API as a backend with for a Solito-powered front-end and native app. But if the entire thing could be in Redwood, that would be a dream come true!

The promise of not having to build completely separate apps for native and/or having to do tedious plumbing to set up shared components seems really aligned with the Redwood way of doing things.

I hope you’re still considering this :slight_smile:

4 Likes

:100:

1 Like

Hey guys, creator of Solito here. Glad the talk was useful. @glowy sent this thread my way.

I wouldn’t, personally. React Navigation has worked through the many kinks of native navigation over the years. Unlike the Web, native is full of opinionated, platform-specific UI and challenging patterns. React Navigation’s implementation is very strong and well-maintained.

One place it lacks is, well, the API. Once you build a massive app with tons of routes, the many nested navigators can get hard to manage.

Luckily, there is a file-system router in development at Expo which will wrap React Navigation with a Next.js/Remix-style router. File-system routing is a useful step for enforcing a URL mental model in general. This new router will play nicely with Solito.

Long-story-short, I wouldn’t recommend building a new navigation library. If you guys are experts in routing, I highly recommend offering to help Evan Bacon in his quest to bring file-system routing and code-splitting to React Native. He’s already made big strides with Metro (React Native’s bundler). I spent some time with him in person working on the API and it got me excited for the future of RN’s routing.

I’m not too familiar with how Redwood works, but spinning something up like solito-redwood is one approach you could take to bridge the Redwood router with React Navigation. In addition to the Next.js talk linked to above, the Methodology and Gradual Adoption pages of the Solito docs may offer some help as you think through the best solution.

10 Likes

I found this cool repo that splits up a React Native app into a Redwood sides-esque setup. Thought it might help drive some ideas for the mobile side(s) addition.

2 Likes

Here’s a blog post explaining an approach to using a file system based routing approach for mobile apps. Very opinionated but might be useful to the discussion.

2 Likes

Hi! can you share the code? Thank you

Hi! is there any news about this from the team?

Unfortunately not. Our work on totally restructuring auth has been taking longer than expected. But it’s finally ready to ship. Hopefully later this week. After that focus is going to be React18 and Vite (including SSR support). From what it looks like right now I wouldn’t expect any news regarding mobile support until April at the earliest.

Hi all! I will comment this here for consideration as an extra side, apart from React Native and Solito (which i think is great!). Today I have achieved to build and Android APK based on the rw’s web side using Capacitor.js, it is a simple example but could be the foundation to add the first side for mobile.

For sure someone else has done it first but it has not been officially promoted in Redwood. So I would like to know if you would consider taking a look at this, and analyze if it would be suitable in the Redwood Roadmap, I can help exposing with my findings in this topic.

C.C: @Tobbe

@disistemas I think @pi0neerpat uses capacitor for a production app. But as you said, not sure if anything is written about it. Would be awesome if you could write a guide for others to follow in a separate thread here on the forums!

@Tobbe the article is here: https://community.redwoodjs.com/t/how-to-add-redwoodjs-mobile-side/4640. I’ll be writing the guide as soon as possible.

1 Like

Awesome! Looking forward to it!