CODEWITHSUNDEEP
react-nativestyled-components
ncesar
ncesar

Reputation: 1792

How to create a rounded shape in react native?

I'm trying to this Register style shape in React Native:

enter image description here

But I have no idea how to create this shape in React Native. I'm using styled-components and tried messing with border-radius but it looks ugly."

This is my code:

export const HomeOptions = styled(TouchableOpacity)`
  display: flex;
  align-items: flex-end;
  background-color: #43e394;
  width: 200px;
  height: 100px;
  align-self: flex-end;
  border-radius: 100px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 50px;
  position: relative;
`;

Can someone help me? I'm still learning Native.

I have also tried using some css shapes generators like clippy but I did not work as expected.

Upvotes: 0

Views: 2284

Answers (1)

Pramod
Pramod

Reputation: 1940

Below is the working example

Link: https://snack.expo.io/@msbot01/authentic-pretzels

import * as React from 'react';

import { View, Text, Image } from "react-native";



export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    }}

   

  render() {
    return (
      <View  style={{flex: 1, justifyContent:'center', alignItems:'center', backgroundColor:'#289d75'}}>
      <View style={{height:230, width:230, borderRadius:180, backgroundColor:'#3bb77b', position:'absolute', top:-150, left:-20, transform: [{scaleX: 2}]}}/>
      

      
      <View style={{height:220, width:220, borderRadius:200, backgroundColor:'#38e892', position:'absolute', top:-120, left:-80, transform: [{scaleX: 2}]}}/>

      <Text style={{position:'absolute', top:30, left:30, fontSize:18, fontWeight: 'bold', color:'white'}} >Register</Text>

      <View style={{alignItems:'center', width:'70%'}}>
        <Image
          style={{width:80, height:80}}
          source={require('./whatsap.png')}
        />
        <Text style={{marginTop:10, fontWeight:'bold', color:'white'}}>Welcome to WhatsApp!</Text>
        <Text style={{marginTop:10, color:'white', textAlign:'center', fontSize:11}}>Cross-platform mobile messaging with firends all over the world</Text>
      </View>
           
      </View>
    )
  }
}

Upvotes: 1

Related Questions