A React Native version of Multi Currency Converter in 3 hours

- Posted in development react-native

Yesterday afternoon, I sat down with a friend and asked him for some advice on React Native.

He recommended that since everything is moving towards Expo to use Expo Router, to use React Native Reusables (which is akin to a shadcn/ui for React Native) and also to use NativeWind.

I got inspired and decided to just make an app. I started at 6pm and I finished at 9pm.

Making something is the best way to get experience. First, I created new React Native reusables project.

I removed some of the initial complexity of the setup. It ships with six or seven components, but I actually only wanted two. Components work shadcn-style so you can easily remove the code and add new components. It also ships with dark mode, and I didn’t want to get lost in the details, so I removed the dark mode code.

The easy thing about the Multi-Currency Converter is that I’ve built it two times before. I built an iOS version that I never shipped (see this blog post), and a web version (which you can find here). Because I know exactly what I want, I can look at the previous app and instruct an LLM to “vibe code” it for me.

Here’s a demo of my result:

How it was made

After doing some initial setup and understanding the codebase manually, I got started.

I set up the UI for the main view containing a list of your currencies and a virtual keyboard, the edit language settings view and the edit currency settings view, I started making improvements.

I used a combination of Cursor, IntelliJ Idea Ultimate, the mac OS terminal and Wispr flow

After having a working UI with mock data, I got to implementing the actual functionality. I already had the code for this from previous projects. This was an easy conversion from the web version since the code is pretty much the same: a request to an API storing the user settings in local storage and… done.

I decided not to focus on i8n, dark mode or offline support for now. These features can always be added later.

My impressions

Overall, the experience was quite good. Changing the Tailwind styles via NativeWind felt more closer to web development than anything else

The last time I tried to make something with React Native was 6 or 7 years ago. Yesterday I made an entire app in a couple of hours, that works both on my Android phones and my iPhones.

What’s next for this side project?

Next up is checking out more of the evolved ecosystem: I hear good things about EAS – Expo Application Services. Maybe I can get a build into the hands of people.

I also have a 6-month old marketing design that I need to get out. Maybe this could be a new Framer project? Framer has been evolving like crazy.

Looking to help?

If you’re looking to help ship any of this, let me know: johan@obra.studio .

Leave a Reply

Your email address will not be published. Required fields are marked *