androidreact-nativemodal-dialogradius

How to set borderRadius on a react-native modal?

I have a react-native Modal, I would like to render it with rounded corners like this: Modal example

but if I define it like this: 

 <Modal
       style={{
                borderTopLeftRadius: 10,
                borderTopRightRadius: 10,
                overflow: 'hidden',
            }}

nothing happens (at least on Android). I also tried to wrap the Modal with a View with the same style but with no more success.

What am I doing wrong?

Solution

  • The solution is to put a View inside the Modal (right after its declaration) with this style:

          <Modal>
          <View
            style={{
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10,
              overflow: 'hidden',
            }}
          >
      </Modal>