Introducing solito: shared navigation code for React Native + Next.js.
👾 Next.js on Web
🗺 React Navigation on Native
⚡️ Moti integration
📂 Starter monorepo
Star it and try it out →
Crazy fact: React Native's built-in <Text> and <View> components are expensive. Our lists got noticeably faster by doing this:
const Text = props => createElement('RCTText', props)
You usually don't need the Text component's heavy features like onPress/inherited styles.
introducing burnt – native toasts & alerts for react native.
the UI is native, works with the new architecture, and displays on top of modals.
this was my first time playing with swift, and
@expo
's new modules api made it so easy.
To make your TypeScript server auto-restart for things like codegen'd files, add this to your .𝚟𝚜𝚌𝚘𝚍𝚎/𝚜𝚎𝚝𝚝𝚒𝚗𝚐𝚜.𝚓𝚜𝚘𝚗 and thank me later:
"𝚝𝚢𝚙𝚎𝚜𝚌𝚛𝚒𝚙𝚝.𝚝𝚜𝚜𝚎𝚛𝚟𝚎𝚛.𝚠𝚊𝚝𝚌𝚑𝙾𝚙𝚝𝚒𝚘𝚗𝚜": {
"𝚠𝚊𝚝𝚌𝚑𝙳𝚒𝚛𝚎𝚌𝚝𝚘𝚛𝚢":
Really wish there was a way to restart the TypeScript server in VSCode via the CLI - or at least alert it to clear its cache.
Would make so many workflows possible - post-checkout hooks, postinstall, post-codegen.
Want to see how we use React Native + Next.js in production?
I just applied to speak about it at this year’s Next.js Conf.
Retweet to help make it happen ⚡️
Introducing Zeego 2: dropdown & context menus that work everywhere
→ Pure Radix UI on Web
→ react-native-web dependency dropped
→ Works with Tailwind,
@shadcn
UI, pure CSS, etc.
→ Native menu on iOS & Android
→ Works in web-only codebases with zero config
yarn add zeego
Introducing Solito 4: React Native + Next.js App Router.
You can now share code for navigation, optimized images, animations, styles & more across iOS, Android, and the Next.js app directory.
Read the release notes:
i've always felt that react native was missing a good image viewer, so i took a stab at it over the weekend.
the result is galeria, a lightbox powered by native gestures & a composable api:
<Galeria>
<Galeria.Image src="/cat.png" />
<Galeria.Popup />
</Galeria>
I think this will be the most important release for React Native this year.
Write any web-only React code, put "use dom" at the top of the file, and the component turns into a WebView that you can import on native. Full with props and callbacks. And bundled dependencies. Unreal
⚡️ What if you could incrementally adopt native views in React websites instead of starting from scratch?
🚀 Expo DOM Components make this possible!
Watch: Migrating a
@shadcn
template to
@Expo
Router ↓
Stop using loading spinners.
I wrote about using placeholder skeletons for loading states in React. I discuss placeholder mental models, list components, strict TypeScript props, & more.
Coming soon: moti, the animation library for React Native.
⚡️ Powered by Reanimated 2.
🌎 Runs anywhere (Web, iOS, Android, etc.)
⚛️ Supports
@expo
.
📺 Mount/unmount animations, like
@framer
motion.
...& more.
Star on GitHub to follow along:
am i the only one who commonly uses immediately-invoked function expressions in jsx?
i like to put logic next to ui code, but i always wonder if there's a cleaner way.
Now available: Solito 1.0 with a Tailwind starter app.
💨 Pure Tailwind CSS on Web
👷♀️ Build-time compilation on Native
💻 SSR Support
⚡️ Powered by NativeWind
You can now share code for both navigation and styles with React Native & Next.js.
Dripsy is a responsive design system for
@expo
+
@reactnative
web with one goal: style once, run anywhere.
I'm excited to share that v1 now fully supports server-side rendering (including
@gatsbyjs
+
@vercel
's Next.js.)
🍷 Link:
I’m in the early stages of building a library like
@framer
motion for
@expo
/
@reactnative
. It’s working like magic on *all* platforms, with Reanimated 2 under the hood. Name TBD...
I just published my first YouTube video…here’s an in-depth look at how I build React Native libraries with:
→ native code (sometimes)
→ only JS (sometimes)
→ expo modules
Watch it now:
If you're a React or React Native developer looking for your next role in New York, DM me. There are many great options.
(or reply with recommendations below)
My talk was accepted for Next.js Conf on October 26th:
"Zero to $1 million with React Native + Next.js"
Stay tuned to see how our cross-platform stack helped us grow to $1m+ in revenue in under a year with two engineers (one frontend, one backend)
Want to see how we use React Native + Next.js in production?
I just applied to speak about it at this year’s Next.js Conf.
Retweet to help make it happen ⚡️
Can you really build a website, iOS and Android app with a single codebase? That's what I'm working on at .
We're using
@expo
+ Next.js, with Moti for animations. Skeletons, calendars, unmount animations, and auto height transitions – all universal code.
I’m in the early stages of building a library like
@framer
motion for
@expo
/
@reactnative
. It’s working like magic on *all* platforms, with Reanimated 2 under the hood. Name TBD...
this week i made my first vscode extension to view theme values with intellisense. it even supports multiple themes for a given token.
inspired by
@tailwindcss
, made for
@tamagui_js
the upcoming 2.0 will drop react-native-web as a dependency. instead, it will directly render radix components on web, making it easy to drop in
@shadcn
and props like className (while still working on native)
moti v0.9 is here, with new and improved sequence animations for React Native.
- Create an animated sequence by passing an array to any style.
- Want customization? Just pass an object.
⭐️ Star on Github:
📚 Docs:
🐼 yarn add moti
Navigation with React Native Web + Next.js is hard.
Here's a preview of the API I'm working on to solve it. It uses next/router on web, and react-navigation on native.
switching to GraphQL led to a massive improvement in my productivity. we became far more ambitious with features we build.
with GraphQL, the backend takes on immense complexity. in exchange, you get a frontend with unbelievable capabilities.
Excited to talk about React Native at Next.js Conf again this year.
Likely topics:
→ Advanced navigation patterns (bottom tabs, stacks, modals, sidebars)
→ File-system routing
→ Authentication
→ Dropdown & context menus
What am I missing?
Today, Expo is reimagining native routing!
✨ Automatically create (dynamic) routes with files
🚀 Zero boilerplate
🔗 Automatic deep linking
🧩 Nested layouts
🔥 Built on React Navigation for easy adoption.
Try the
@expo
router beta now!
So
#nextjsconf
is only a few days away, and I can't wait to show you how we use React Native with Next.js.
I have some Next.js t-shirts and mugs to give away, so I'll pick my favorite answers in the replies...
What's most exciting about the future of React Native?
Can an
@expo
app render thousands of high-res images without flickering?
Here's the artist search for the upcoming iOS app for .
It's so fast, you can barely notice when it loads more items ⚡️
i thought solving React Native + Next.js navigation would be a weekend project. almost a year later and I'm still working on it
there has been some great back-and-forth on this thread:
i'm almost there
Navigation with React Native Web + Next.js is hard.
Here's a preview of the API I'm working on to solve it. It uses next/router on web, and react-navigation on native.
i've learned so much about dates by coding an events product
→ if you're displaying/editing the date of an event that happens in real life, understanding timezones is *so* important
→ date pickers should use objects, not dates
→ luxon is an incredible library
Just released v2 of Dripsy, the responsive design system for
@expo
(+web).
💀 Headless styles for custom components
⚡️ Web performance upgrade
📝 Style using props, like styled-components
...and all 78 GitHub issues are now closed.
tbh, it’s impossible to tell that this app was built with
@Expo
(React Native):
◆ UIMenu
◆ UINavigationController
◆ SF Symbols
◆ Opens instantly
◆ No JS runs on-device—only bytecode in prod
→ Was very simple (and fun) to build this—only took a couple weekend hours.
The new Reanimated 2 component library I'm working on supports
@framer
motion's "exitBeforeEnter" prop. 🕺
Give components a unique "key" prop and them take turns animating as they mount/unmount.
Works on iOS, Android, Web, &
@expo
.
Some of my favorite details from the custom chat feature I made:
→ iMessage-style emoji reactions
→ iOS context menus
→ Low-res images in the list; high-res when you expand
→ Image transition/zooming/panning
→ Reactions position + animate flawlessly
Moti v0.8 is now available.
🆕 Compatible with Reanimated v2 stable
🔑 Works with
@expo
SDK 41 (including beta)
👀 Initial support for react-native-gesture-handler
Restoring a user's scroll position is an important part of a web app.
Since React Native Web doesn't use window scrolling, achieving this with
@expo
+ Next.js was tricky. Here's how:
Introducing v3 of Dripsy: unstyled, responsive UI primitives for React Native + Web.
→ TypeScript autocomplete for your custom theme
→ Auto-memoized styles
→ New docs:
→
@expo
43 + Next.js 12 support
See all the new features:
My dad called me last night to ask how he could build a script to test a math theorem. After an hour of struggling to explain how the terminal works, I gave up and sent him a link to
@replit
. Two hours later he'd finished his first python script
@markdalgleish
you can also add an action to toggle() to optionally set the value
[on, toggle] = useReducer(
(s, next) => next == null ? !s : next,
false
)
enable = () => toggle(true)
disable = () => toggle(false)
switch = () => toggle()
I've always had trouble scrolling to a view in React Native (+Web). Finally figured it out.
The solution is as simple as HTML anchor links. It's also as customizable as scrollTo('viewName').
I'll be releasing a new react-native-anchors package soon.
@schlimmson
Let Listings receive a ref, and assign scrollListToTop to the ref with useImperativeHandle. Then call ref.current. scrollListToTop() from the parent component instead of calling setRefresh()
Animating interactions in React Native requires a bit too much effort.
Here are some ideas I'm considering for Moti's next release.
→ Animate pressed & hovered states
→ 60 FPS, no re-renders
→ Nested children can access interaction state
Today I saw a tweet from
@Kaiyes_Ansary
about building an
@electronjs
tray app with
@expo
. So I tried it out, and ended up with a neat clipboard manager.
A few cool features:
📸 Image support
🕵️♂️ Search your clipboard history
🖼 Filter by images, text, etc.
Dripsy is a responsive design system for
@expo
/ React Native (+ Web).
The new v1.5 release includes big performance boosts. Every style is cached and statically parsed into CSS class names, even when you write styles inline.