I’ve been working with React Native from last 3 months and I’m already in love with it. It makes android and iOS app development a breeze because of its awesome features like hot reload, live reload, chrome debugging etc.
I started building an app with android first approach and wanted to port it to iOS. React native is a framework with the idea of “Learn Once, write anywhere” and not “Write once, deploy anywhere”
When I started porting the app to iOS, I was able to re-use almost 80% of the code! Most of the code changes were with styles. Mostly padding, margins, borders etc.
One issue that confused me was border-radius. Usually, borderRadius is applied to get rounded corners for a View. There were many views with rounded corners like speech bubbles, buttons etc.
All these views with rounded corners were behaving differently on iOS. Few elements did not have top corners, few did not have bottom corners. There wasn’t any consistency.
All the speech bubbles in the above image have same border radius but each of them has different corners.
The solution for this issue is just to apply overflow: 'hidden'. Simple solution but takes time to figure it out because of its inconsistency.
It looks like this after applying overflow hidden.
This app that I’m building now is Helpy which is a location based Q & A app with really good UI and UX. The React Native version of the app will be out in a week. Meanwhile, Try out the native version of the app from here – http://helpyapp.co/
Other React Native articles
