CODEWITHSUNDEEP
reactjsreact-nativereact-native-ios
Riddhi
Riddhi

Reputation: 777

Custom circle respect to content length in react-native

I want to draw custom circle respect to inside content length. I tried using height:100, width:100, borderRadius:50 but it is static when content increases it will looks inconvenient. I googled but it gives me same solution.

Required output https://i.sstatic.net/lvRu9.png

My output https://i.sstatic.net/1VcOv.png

Any help is appreciated. Thank you.

Upvotes: 0

Views: 1317

Answers (3)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You can achieve that with the help of minWidth and a little padding

Try this with the dynamic content

<View style={{height: 100, minWidth: 100, paddingLeft: 10, paddingRight: 10, borderRadius: 50, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}} >
    <Text>// Dynamic Text</Text>
</View>

Upvotes: 1

Gautam Naik
Gautam Naik

Reputation: 9348

Do not give static width and height.

Pass a prop called onLayoutChange to your View, the callback will give you the height and width of your view before it changes.

You can then use either width or height to calculate the border radius, according to your requirement.

But my suggestion would be to use a static height and not to pass width, and give a border radius half of that of the height, this will help you achieve your required goal

Upvotes: 1

renuka
renuka

Reputation: 758

Use This code    
<ul class="size-List">
         <li><a href="javascript:void(0)">S</a></li>
         <li><a href="javascript:void(0)">M</a></li>
         <li><a href="javascript:void(0)">L</a></li>
         <li><a href="javascript:void(0)">XL</a></li>
         <li><a href="javascript:void(0)">XXL</a></li>
       </ul>
    <style>
    .size-List{
        list-style:none;
    }
    .size-List li{
        display:inline-block;
    }
    .size-List li a{
        border:1px solid gray;
        width:45px;
        height:45px;
        color:gray;
        line-height:45px;
        text-align:center;
        display:block;
        border-radius:100%;
        text-decoration:none;
        font-size:16px;
    }
    </style>

Upvotes: 0

Related Questions