Fernando Rojo @FernandoTheRojo Twitter profile

Pinned Tweet

Fernando Rojo

2 years

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 →

35

216

1K

Last Seen Profiles

@reset_inj

@HarukiInaz20370

@theindicator

@VektroidLive

@SterlingLordLit

@ijiola_

@EMBO

@TimShear

@ImEdHeavy

@new_eggofficial

@uNfJZGkHkh93164

@Vol_Softball

@oregon_guy

@d0255alap77ks97

@Playantz

@ilomilorph

@adabehindustan

@Mr_Chidindu

@norareinachula

@bihzi6005930669

@kalinowski007

@Danirai_GWENT

@mugi47587997384

@boluakindele

@mosaud08

@Eviewriter

@BTSxSUL

@kooriosidade

@cardaemack33

@SyncusI

@RubenHood15M

@8bitesquire

@julie_renbe

@CoachDustinHass

@0zsA9w9nnK9R8BU

Fernando Rojo

@FernandoTheRojo

1 year

sometimes .then() just hits harder than await

37

63

1K

Fernando Rojo

@FernandoTheRojo

8 months

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.

Nate

@natebirdman

9 months

one weird trick to make your react native components 50% faster (before/after):

29

81

872

13

75

739

Fernando Rojo

@FernandoTheRojo

1 year

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.

19

66

720

Fernando Rojo

@FernandoTheRojo

3 years

Now available: moti, the universal animation library for React Native (+ Web). ⚡️ Native animations at 60 FPS (w/ Reanimated v2) 🏂 Mount, unmount animations ✅ @expo & vanilla RN support 👻 Animate presence (like @framer motion) Star on GitHub & try it:

22

100

596

Fernando Rojo

@FernandoTheRojo

3 years

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 ⚡️

19

143

487

Fernando Rojo

@FernandoTheRojo

2 years

@markdalgleish it’s nice for toggling too [on, toggle] = useReducer(s => !s, false)

5

22

441

Fernando Rojo

@FernandoTheRojo

3 years

Made a quick React Native price ticker. 60 FPS, zero re-renders, & works on web.

18

431

Fernando Rojo

@FernandoTheRojo

2 years

i built an animated price ticker library for react native (+ web) to release or not to release…

17

13

392

Fernando Rojo

@FernandoTheRojo

10 months

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:

14

49

390

Fernando Rojo

@FernandoTheRojo

1 year

has anyone built a react component for filters like these from @linear / @wopehq ? ideally something headless

25

8

365

Fernando Rojo

@FernandoTheRojo

4 months

We're reimagining bottom sheets from the ground up at BeatGig. Exciting things ahead.

19

26

366

Fernando Rojo

@FernandoTheRojo

8 months

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>

22

350

Fernando Rojo

@FernandoTheRojo

1 year

this iOS widget lives in a react native app, without ejecting from expo's managed workflow.

10

21

342

Fernando Rojo

@FernandoTheRojo

2 years

what if i told you this bottom sheet was made with the built-in React Native modal?

20

338

Fernando Rojo

@FernandoTheRojo

3 years

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.

Stop using loading spinners

Skeletons are better than spinners. If you're refreshing data, or fetching more, show a spinner. But...

dev.to

10

32

316

Fernando Rojo

@FernandoTheRojo

3 years

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:

Fernando Rojo

@FernandoTheRojo

3 years

Here's a preview of the API I've been working on for the Reanimated 2 component library, inspired by framer-motion.

13

21

298

16

47

308

Fernando Rojo

@FernandoTheRojo

2 months

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.

106

10

306

Fernando Rojo

@FernandoTheRojo

2 years

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.

14

27

297

Fernando Rojo

@FernandoTheRojo

3 years

Here's a preview of the API I've been working on for the Reanimated 2 component library, inspired by framer-motion.

Fernando Rojo

@FernandoTheRojo

3 years

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

10

6

176

13

21

298

Fernando Rojo

@FernandoTheRojo

4 years

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:

7

58

292

Fernando Rojo

@FernandoTheRojo

3 years

What if we could use @radix_ui 's APIs in React Native?

10

20

293

Fernando Rojo

@FernandoTheRojo

1 year

should i pay $12,774 to make my $407 flight refundable

13

3

286

Fernando Rojo

@FernandoTheRojo

7 months

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:

10

34

285

Fernando Rojo

@FernandoTheRojo

2 years

should i use tailwind?

107

5

278

Fernando Rojo

@FernandoTheRojo

2 years

1,255 file changes later...

14

7

264

Fernando Rojo

@FernandoTheRojo

1 year

Next.js Conf with @rauchg + @Baconbrix

9

1

247

Fernando Rojo

@FernandoTheRojo

3 years

Tomorrow at Next.js Conf...

10

14

245

Fernando Rojo

@FernandoTheRojo

2 years

just opened a PR to drastically reduce the bundle size of react-native-reanimated (& moti) on web

🌲 Reduce bundle size on Web by 80% by nandorojo · Pull Request #3278 · software-mansion/react-na...

Description Fixes #2843. Reduces Reanimated's bundle size on Web from 85kb to 17kb. Changes Zero user-facing changes are in this PR. It is strictly file organization changes to optimize Reanim...

github.com

9

11

239

Fernando Rojo

@FernandoTheRojo

2 years

can't wait to release this new library...

9

237

Fernando Rojo

@FernandoTheRojo

2 years

i’m in too deep @nextjs

4

220

Fernando Rojo

@FernandoTheRojo

3 years

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)

Fernando Rojo

@FernandoTheRojo

3 years

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 ⚡️

19

143

487

12

18

200

Fernando Rojo

@FernandoTheRojo

3 years

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.

11

24

195

Fernando Rojo

@FernandoTheRojo

6 months

Why does forwardRef exist? Why can’t ref just be a prop?

6

3

173

Fernando Rojo

@FernandoTheRojo

3 years

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

10

6

176

Fernando Rojo

@FernandoTheRojo

3 years

Starting to record my talk for Next.js Conf.

10

0

175

Fernando Rojo

@FernandoTheRojo

1 year

solito 2: → SolitoImage: next/image on Web, react-native-fast-image on native → Next.js 13 support → React Navigation stack replace()

5

14

171

Fernando Rojo

@FernandoTheRojo

2 years

springy forms

11

7

165

Fernando Rojo

@FernandoTheRojo

9 months

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

9

165

Fernando Rojo

@FernandoTheRojo

3 years

Whoa. Want unmount animations in React Native at 60 FPS? Just use the exit prop. Coming soon... Thanks to @mattgperry for the help here.

Fernando Rojo

@FernandoTheRojo

3 years

Here's a preview of the API I've been working on for the Reanimated 2 component library, inspired by framer-motion.

13

21

298

11

15

163

Fernando Rojo

@FernandoTheRojo

3 years

In case you missed it, my Next.js Conf talk is now on YouTube.

Zero to $10 Million with React Native + Next.js - Fernando Rojo -...

What does it take to grow to $10m in sales in under a year with one frontend engineer? In this talk, I’ll discuss how we used React Native with Next.js to ac...

www.youtube.com

11

21

159

Fernando Rojo

@FernandoTheRojo

3 years

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

3

24

159

Fernando Rojo

@FernandoTheRojo

3 years

Moti's <Skeleton /> loader for React Native apps is now available. yarn add @motify /skeleton Powered by Moti & Reanimated 2. Web & @expo support, too.

Fernando Rojo

@FernandoTheRojo

3 years

Trying out a <Skeleton /> loading component for @expo (+ web) using Moti / Reanimated v2. Light & dark mode, too.

4

5

75

3

19

157

Fernando Rojo

@FernandoTheRojo

3 years

Announcing Moti interactions: universal, animated interactions for React Native + Web. 🖱 Pressed & hovered animations 🚸 Animate children + siblings ⚡️ Zero re-renders 🌊 React Native Gesture Handler + Reanimated 2

3

17

153

Fernando Rojo

@FernandoTheRojo

2 years

Just applied to speak at @nextjs conf ✅

5

0

146

Fernando Rojo

@FernandoTheRojo

1 year

small, well-documented PRs only

9

2

149

Fernando Rojo

@FernandoTheRojo

3 years

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.

Nate b/acc SpaceSteading

@nk1tz

3 years

@FernandoTheRojo Can we get a teaser? The suspense is killing me 💀 🚀

1

0

2

5

14

148

Fernando Rojo

@FernandoTheRojo

4 years

My new open-source project is a responsive design system that works for @reactnative + @expo web. Style once, run anywhere. 🍷 Dripsy:

GitHub - nandorojo/dripsy: 🍷 Responsive, unstyled UI primitives for React Native + Web.

🍷 Responsive, unstyled UI primitives for React Native + Web. - nandorojo/dripsy

github.com

Brandon 🚀 Flightcontrol

@flybayer

4 years

🤯 Theme-UI for React Native and React Native Web!! And works with Next.js

2

16

81

4

27

144

Fernando Rojo

@FernandoTheRojo

2 months

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.

Fernando Rojo

@FernandoTheRojo

2 years

1,255 file changes later...

14

7

264

14

10

140

Fernando Rojo

@FernandoTheRojo

1 year

somehow @Baconbrix has thought of everything

6

4

138

Fernando Rojo

@FernandoTheRojo

2 years

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?

Fernando Rojo

@FernandoTheRojo

2 years

Just applied to speak at @nextjs conf ✅

5

0

146

7

1

136

Fernando Rojo

@FernandoTheRojo

2 years

had an amazing time at app.js conf 🇵🇱

8

0

135

Fernando Rojo

@FernandoTheRojo

1 year

time to learn swift (to build my first native library)...

12

4

135

Fernando Rojo

@FernandoTheRojo

3 years

Moti 0.7 is now available! 🪝 New useDynamicAnimation hook 📁 Simpler imports 🐛 Fixes for AnimatePresence and Skeleton yarn add moti

7

19

135

Fernando Rojo

@FernandoTheRojo

11 months

building an animated svg icon in react native is so easy when you use moti

4

6

131

Fernando Rojo

@FernandoTheRojo

2 years

file-system routing for native apps 🤯

Evan Bacon 🥓

@Baconbrix

2 years

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!

78

413

3K

2

8

128

Fernando Rojo

@FernandoTheRojo

3 years

2k stars ⭐️

5

4

128

Fernando Rojo

@FernandoTheRojo

3 years

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?

27

3

128

Fernando Rojo

@FernandoTheRojo

2 years

should I start a youtube channel…

26

0

125

Fernando Rojo

@FernandoTheRojo

3 years

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 ⚡️

12

11

123

Fernando Rojo

@FernandoTheRojo

2 years

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 by axeldelafosse · Pull Request #1 · axeldelafosse/expo-next-monorepo-example

Hey! Here is an example of how to handle navigation in your Expo and Next.js universal app. How to think about it: Use URLs to name your routes pages folder contains your navigators screens folder...

github.com

Fernando Rojo

@FernandoTheRojo

3 years

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.

5

14

148

7

6

121

Fernando Rojo

@FernandoTheRojo

3 years

I want to start a reality TV show about trying to open a keyboard on Android using React Native

8

10

122

Fernando Rojo

@FernandoTheRojo

2 years

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

9

4

120

Fernando Rojo

@FernandoTheRojo

3 years

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.

4

22

120

Fernando Rojo

@FernandoTheRojo

3 years

Curious what an @expo + Next.js monorepo looks like? I made a starter project with a guide:

GitHub - nandorojo/expo-next-monorepo: 💸 Expo + Next.js monorepo starter.

💸 Expo + Next.js monorepo starter. Contribute to nandorojo/expo-next-monorepo development by creating an account on GitHub.

github.com

5

14

119

Fernando Rojo

@FernandoTheRojo

3 months

this is the power of using . you use a radix-like API, but on iOS, it renders a native UIMenu. source from evan's example:

Evan Bacon 🥓

@Baconbrix

3 months

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.

11

29

483

4

7

116

Fernando Rojo

@FernandoTheRojo

3 years

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 .

Fernando Rojo

@FernandoTheRojo

3 years

Whoa. Want unmount animations in React Native at 60 FPS? Just use the exit prop. Coming soon... Thanks to @mattgperry for the help here.

11

15

163

9

14

115

Fernando Rojo

@FernandoTheRojo

3 years

What does it take to build an animated carousel in React Native? With Moti + AnimatePresence, not much at all. The key is the unique "key" prop. 🔑

5

6

111

Fernando Rojo

@FernandoTheRojo

3 years

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

3

6

112

Fernando Rojo

@FernandoTheRojo

1 year

@CherryJimbo can you explain <Gates children>

6

2

106

Fernando Rojo

@FernandoTheRojo

3 years

Moti's skeleton component for React Native now works smoothly on Web. No configuration needed. <Skeleton show={loading} />

6

14

110

Fernando Rojo

@FernandoTheRojo

1 year

thanks to @gaishimo for this awesome example

GitHub - gaishimo/eas-widget-example: Example of a Widget in Expo's Managed Workflow (EAS).

Example of a Widget in Expo's Managed Workflow (EAS). - gaishimo/eas-widget-example

github.com

2

6

110

Fernando Rojo

@FernandoTheRojo

2 years

Moti 0.17 is now available, with @expo SDK 44 support, Reanimated 2.3 support (+ layout animations) & more.

1

4

110

Fernando Rojo

@FernandoTheRojo

3 years

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:

4

7

108

Fernando Rojo

@FernandoTheRojo

2 years

everything got better when i started organizing files by feature features/user/detail/screen > screens/user-detail

9

2

104

Fernando Rojo

@FernandoTheRojo

1 year

solito v2 is coming along...

4

5

105

Fernando Rojo

@FernandoTheRojo

5 years

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

4

2

102

Fernando Rojo

@FernandoTheRojo

4 years

Build @Firebase phone auth in an @expo app without detaching. 🚪 Link: 🔥 Works great with @reactnavigation v5's component-based API! cc @reactnative #reactnative

4

21

101

Fernando Rojo

@FernandoTheRojo

3 years

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:

2

12

104

Fernando Rojo

@FernandoTheRojo

7 months

I love the idea server actions. `fetch('/api/user').then(r => r.json()) as User` will not be missed.

4

3

102

Fernando Rojo

@FernandoTheRojo

2 years

@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()

4

3

101

Fernando Rojo

@FernandoTheRojo

1 year

@samselikoff change it to const. since it’s “let” it could be reassigned before the line within map, so TS has no guarantee that it’s defined

9

0

98

Fernando Rojo

@FernandoTheRojo

4 years

If you want your heavy @reactnavigation screens to feel smooth in your @expo / @reactnative app, try out optimizeHeavyScreen. ⚡️Link:

1

19

97

Fernando Rojo

@FernandoTheRojo

7 months

@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()

2

3

95

Fernando Rojo

@FernandoTheRojo

3 years

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.

1

2

98

Fernando Rojo

@FernandoTheRojo

3 years

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

2

13

95

Fernando Rojo

@FernandoTheRojo

2 years

couldn't help myself. here's a solito + expo-router starter monorepo: npx create-solito-app -t with-expo-router

Expo Router | Solito

Expo recently announced an experimental new routing system which lets you use file-system based routing in native apps. The API is very Next.js- and Remix-esque. I view it as the future of cross-pl...

solito.dev

6

9

96

Fernando Rojo

@FernandoTheRojo

3 years

making a video about React Native with Next.js was harder than coding it lol

3

1

93

Fernando Rojo

@FernandoTheRojo

19 days

@rauchg @jdan might be time to make this the default behavior

Fernando Rojo

@FernandoTheRojo

10 months

react-image-lightbox ships multiple photos of cats to npm lol

2

5

79

0

1

94

Fernando Rojo

@FernandoTheRojo

4 years

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.

7

15

92

Fernando Rojo

@FernandoTheRojo

3 years

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.

2

4

92

Fernando Rojo

@FernandoTheRojo

3 years

Does anyone have a good release process for React Native/ @expo apps? Something that: - Rebuilds the app when there are native changes & submits to the App Store - Sends over-the-air updates for JS changes - Updates every time you ‘git push’ (like @vercel ) using GitHub actions

13

5

90

Fernando Rojo

@FernandoTheRojo

2 years

debugging with @Baconbrix @lkosmaty @tsapeta

2

1

87

Fernando Rojo

@FernandoTheRojo

1 year

should i use xstate?

25

0

89

Fernando Rojo

@FernandoTheRojo

2 years

solito is #3 on Hacker News

Fernando Rojo

@FernandoTheRojo

2 years

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 →

35

216

1K

1

6

91

Fernando Rojo

@FernandoTheRojo

3 years

Moti's API is so simple, I built the <MotiPressable /> component with like 80 lines of code.

2

4

89

Fernando Rojo

@FernandoTheRojo

1 year

just opened a PR to make Reanimated (+ moti) work on Web without a Babel plugin. thanks to @kzzzf for the help here!

Add web support without a Babel/SWC Plugin by nandorojo · Pull Request #3997 · software-mansion/r...

Description This PR adds support for using Reanimated without a plugin on Web. Before 😢 Without a Babel plugin (or SWC on Next.js), animations do nothing. Code.-.index.js.reanima...

github.com

2

7

88

Fernando Rojo

@FernandoTheRojo

2 years

the little hand on BeatGig's time picker changes as you pick a time