CODEWITHSUNDEEP
cssreact-nativestyles
Vitor Albres
Vitor Albres

Reputation: 123

Make card with semi circle react native

I'm new at react native development, I want to make a card with a semi circle like this:

enter image description here

I tried something with :

 borderRadius:'45%',
 bottom:10,
 right:10,

And get that this result, but isn't what I need

enter image description here

Upvotes: 0

Views: 1076

Answers (2)

Kenedy Nopriansyah
Kenedy Nopriansyah

Reputation: 739

You can do this works

      <View style={{
        width: '90%',
        height: 160,
        backgroundColor: 'white',
        elevation: 4,
        borderRadius: 40,
        overflow: 'hidden',
        alignSelf: 'center'
      }}>
        <View style={{
          width: 100,
          height: 100,
          justifyContent: 'center',
          alignItems: 'center',
          borderBottomRightRadius: 80,
          borderTopRightRadius: 80,
          backgroundColor: '#f29a50',
          elevation: 4,
        }}>
          {/* Your Icon */}
        </View>
      </View>


  [1]: https://i.sstatic.net/4tcEh.png

Upvotes: 2

Vitor Albres
Vitor Albres

Reputation: 123

Putting overflow: "hidden" on the parent View solved the overlay issue.

enter image description here

Upvotes: 0

Related Questions