https://solito.dev/

Skip to main content
 
Solito LogoSolito Logo
by fernando rojo
TwitterGitHub


[*]

  * Welcome
  * Starter Project
  * Installation
  * API
      + <Link />
      + <TextLink />
      + <MotiLink />
      + useRouter()
      + useParam()
      + useLink()
  * Recipes
  * Gradual Adoption
  * Methodology
  * Resources

On this page

Welcome to Solito

[og]

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

About 

This library is two things:

 1. A tiny wrapper around React Navigation and Next.js that lets you
    share navigation code across plaforms.
 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:

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.

My first library, expo-next-react-navigation, was the first iteration
of Solito, which I used for a few years. 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.)

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

 5. Read the Solito Gradual Adoption and Methodology sections.

 6. 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".

Edit this page
 
Next
Starter Project

  * About
  * Motivation
  * Background
      + The rabbit hole

Docs

  * Get Started
  * Installation

Community

  * GitHub
  * Twitter

Copyright (c) 2022 Fernando Rojo.