border on cells of a grid is not uniform in react

Question

I am trying to build a simple calculator with react native.

I created a button component with borderWidth 0.5 and used this button component to form keypad. But border is not uniform. Border appears thick on few cells compared to others

Code for this is at https://github.com/akiran/exponent-calculator/blob/master/components/Buttons.js

https://github.com/akiran/exponent-calculator/blob/master/components/KeyPad.js

Answer 1

I used your code to build an example, could not quite figure out why that is happening. It is however a reproducible issue. Possibly has to do with overlapping borders?

As a workaround, you can use borderLeftWidth: 1 and borderTopWidth: 1 and leave the other borders at 0 width, which produces the result visible below.