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>