React Native border radius issue on iOS (solved)

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.

react native border radius overflow on iOS

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.

react native border radius overflow on iOS

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

0 0 vote
Article Rating
Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Robin
Robin
3 years ago

Where did you put the overflow: ‘hidden’? I have the same problem but it doesn’t seem to do anything for me. I put it on the button itself, also tried on the text tag inside the button. Thnx

Robin
Robin
3 years ago
Reply to  Robin

Forgot to mention: In your example they are views, my example they are buttons which behave as randomly as your views.

Robin
Robin
3 years ago
Reply to  Ranjith kumar

Hi Ranjith, Thanks for the reply and the sample code. Unfortunately my error still occurs. I will dive into it deeper when I finish my Android version and start with ios. It must be the overflow hidden, i will experiment

Yash
Yash
3 years ago
Reply to  Robin

Hi Robin,

Were you able to figure out the solution, I am having the same issue and overflow: ‘hidden’ doesn’t work for me either. it is hiding the shadow in fact.

Robin
Robin
3 years ago
Reply to  Yash

Hi Yash, no I did not 🙁 To be fair, I only looked at it briefly and have postponed this problem to when I will start on the iPhone version. Which will most likely be in August.

Nabil M. Firdaus
3 years ago

Awesome. This is what I looking for. Thanks for sharing.

Ani
Ani
2 years ago

THanks Ranjith! THis saved me a lot of time.