DEV Community

Cover image for I got tired of rebuilding the same UI for every Expo app, so I built ExpoKit
Karan Kumar
Karan Kumar

Posted on

I got tired of rebuilding the same UI for every Expo app, so I built ExpoKit

Every new Expo app I start goes the same way.

Day one: "this time I'll focus on the actual product."
Day three: I'm still building a bottom sheet. Then a login screen. Then a settings page. Then charts that don't look like they're from 2015.

I've rebuilt the same UI so many times that I finally put it all in one place.

Meet ExpoKit

ExpoKit is a set of animated components, charts and full app screens for Expo and React Native.

It's not a package you install and fight with. You run one command and the code lands in your project:

npx @expokit/cli@latest add button otp-input
Enter fullscreen mode Exit fullscreen mode

That's it. It's your code now. Change the colors, the animations, whatever you want.

Six ExpoKit app screens in phone frames: Sign In, Checkout, Dashboard, Inbox, Profile and Settings

Why I built it this way

You own the code. UI libraries are great until you need to change one small thing and end up digging through someone else's source. Copy-paste fixes that.

No native modules. Everything runs in Expo Go. No prebuild, no dev client, no "works on iOS but crashes on Android" surprises.

It should feel native. Proper animations and gestures, not a web page squeezed into a phone.

Charts that actually feel good

This was my favorite part to build. Every chart is animated and touchable: tap to inspect, drag to scrub, and they all follow your theme.

ExpoKit charts: interactive area, bar, donut and radial charts in dark mode

Full screens, not just buttons

Sign In, Checkout, Dashboard, Inbox, Settings and more. Drop one in, wire up your data, and you're done.

Try it on your phone

Go to expokit.karandev.in and scan the QR with Expo Go. You'll be playing with everything on your real phone in seconds.

A lot of it is free. Pro is a one-time payment, no subscription.


I'd love honest feedback. What's the one screen or component you're tired of rebuilding? Drop it in the comments and I might build it next 👇

Top comments (2)

Collapse
 
davekurian profile image
Dave Kurian •

Nice that the code lands in the project. The quick install is the easy part; the real test is whether a component stays easy to change once product-specific states arrive. I'd compare one input end to end: add it, retheme it, and check its validation and loading states on iOS and Android before building a full screen. Which of the six screens do you see people customizing most?

Collapse
 
itsmeekaran profile image
Karan Kumar •

Thanks Dave! That’s exactly why the code lands in your project: when your states get product-specific, you just edit the file. Floating Input already handles error and disabled and picks up your theme from KitProvider. Loading isn’t there yet, adding it now. Sign-in and Settings get customized the most, since every app has its own providers and rows.