How to round button before rendering?

Question

I want to create a button component that will automatically have rounded corners, no matter its dimension.

As you know, to achieve rounded corners, one way to achieve it is to specify the border radius as half of the height of the button.

The way I implemented is that in the custom component I use the onLayout function like this:

 onLayout(event: LayoutChangeEvent) {
    const { height } = event.nativeEvent.layout;
    this.setState({ borderRadius: height / 2 });
  }

The problem is that the button will initially appear on screen as a rectangle and only after a millisecond, it will round the corners causing a flicker.

My guess is that onLayout is called after the component renders.

How would one go about implementing this? Thanks!

Answer 1

Before the borderRadius is calculated, you could return transparent button, this would prevent this flickering effect...

// you pass radius, and height from component state

const MyButton = ({ radius, height }) => {
   if (radius === null) return <View style={{ backgroundColor: transparent }}>...</View>

else return <View style={{ borderRadius: radius, backgroundColor: 'red' }}>...</View>;
};