5

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?

Simon
  • 6,025
  • 7
  • 46
  • 98

1 Answers1

9

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>
Simon
  • 6,025
  • 7
  • 46
  • 98