Skip to main content

Welcome to Solito

Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps.

Hackernews

Solito reached #3 on the front page of Hackernews. Check out the post here.

About​

This library is two things:

  1. A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms.
  2. A set of patterns and examples for building cross-platform apps with React Native + Next.js.

Motivation​

In 2021, I spoke at Next.js Conf about how I built beatgig.com with Next.js and React Native.

Since then, a sizable community has grown around this stack. The goal of this project is to bring together the hardest piece of cross-platform development: navigation.

If you haven't seen it yet, I recommend you watch the talk:

In June 2022, I spoke about Solito at App.js Conf in Poland. In that talk, I also released the first version zeego, a cross-platform menu library I built inspired by Radix UI.

The Solito stack slowly transitioned from a lofty idea to a library and community used by many apps in production.

But many questions sparked up:

  • Can I use file-system routing on the native app?
  • How do I handle authentication?
  • What about UI patterns like menus? Can I use libraries like Radix UI?

To address these questions and more, I spoke at Next.js Conf 2022 to show where the React Native + Next.js stack was.

Background​

Prior to Solito, I built Moti for cross-platform animations, powered by Reanimated 2. I also made Dripsy, a library for building theme-based, responsive design for React Native and Web.

Little by little, I released a number of libraries dedicated to Next.js + React Native.

One of my first, expo-next-react-navigation, was the earliest iteration of Solito. I used this for a few years as I built out BeatGig. Eventually, I realized that the API was too convoluted to work as a replacement for next/router. Then React Navigation released a great API for navigating around with URLs, and I realized that that would be the future.

I opened an issue on expo-next-react-navigation called "The Future API" where I thought through all the necessary steps to truly unify the stack.

Next, I worked on a PR with Axel Delafosse, hoping to share navigation code between Expo + Next.js. That PR has nearly 100 comments from people in the community chiming in on my ideas. Ultimately, I dropped the approach I built in that PR in favor of a simpler, headless navigation method. And there, Solito was born.

The rabbit hole​

If you are curious about my journey working on Expo + Next.js, and how I arrived here, I recommend doing a few things:

  1. Watch my Next.js Conf talk.

  2. Follow me on Twitter and read through my tweets.

  3. Read through issues & PRs created by me on my GitHub repos – mainly on Moti and Dripsy.

    a. For example, in this issue on the Dripsy repo, I explained my desire for a high-performance, simple animation library. That idea became Moti, which is now one of the most popular libraries for animating in React Native (+ Web).

    b. I spent a lot of time trying to add SSR support to Dripsy to Next.js, and ultimately dropped it due to limitations from React Native. If you do some Googling about React Native Web's Server Side Rendering support, you'll find me talking about it.

c. This PR I mentioned earlier is good to read through too (not the code, just the comments.) Here I unveil the idea for the Solito methodology.

  1. Listen to this episode of React Native Radio, where we discuss Expo + Next.js.

  2. Read the Solito Gradual Adoption and Methodology sections.

  3. Read the introduction of the Moti docs, where I shared my thoughts on the state of React Native.

Special thanks to Axel for sharing my love for this stack and for coming up with the idea of an Expo + Next.js "metaframework".