CromaApp: My First React Native App After 7 Years of Backend Development
I decided to learn react native and build something useful as well so decided to rewrite one of the popular app Croma that me and my friend Satyajit Sahoo
developed back in 2014. Croma is an app to organize, generate and save color palettes focusing on simple clutter-free design. We could not get time to maintain it and it was written with a web view and native android.
Since Satyajit Sahoo
suggested to rewrite it in react native so I thought this is a good opportunity to learn react native. Let’s see how I build the initial version
Get your hands dirty
The best way to learn a new framework or a language is to start building something and explore and learn along the way. So I started with a boilerplate react native app using expo as documentation said it’s easier to start with expo.
I started hello word example app which has some basic functionality already present so this way I can start experimenting right away.
Expo is really easy to start as you can set up a working example app in 5 mins and see the real-time changes in the expo app.
80–20 % rule
I was able to build most of the functionality in few days but completing the whole project became tricky as I got caught up in issues and final styling, making it work with the web turned out to be more difficult than it seemed. I mainly struggled with web.
On mobile browser, the scrollview did not work (Issue
) Making it look good and understanding styling took some time for me. Storage, icons etc. also required some debugging
Finishing something 100 % is way harder than it seems and the last 20 % of the work takes 80 % of the time.
Learning a new language or framework can be frustrating at the starting so it’s critical to not overthink and have fun while doing it. Don’t worry too much about getting all the details right. I am having fun building Croma and I have made it open source so feel free to jump in a fix some code that I have screwed up. Looking forward to learning from the community
The first impression of react native and learnings
but the performance turned out to be really a bottleneck. So eventually I will have to move out of expo to implement this feature in the native.
The state of the react-native web is not good and I lot of the things just don’t work on the web. I still managed to fix most of the issues but you have to put extra effort to make things work on the web.
Github actions are awesome to automate the build and release process. I was able to automate web release using Github pages and android release using expo publish. See these workflows
if you are also trying to do the same. I am learning so much about colors and design by building this app that I had very little chance to work on while doing backend development.
Looking forward to seeing how people use the app. Please try it out here
or download it from the playstore
and feel free to send a PR
and raise an issue. Really excited about my react journey and looking forward to learning from the community.
Subscribe to get your daily round-up of top tech stories!