React Native Border Radius with background color

Question

In React Native  borderRadius is working but the background color given to the button stays a square  What is going on here   JS   lt TouchableHighlight   style  styles submit    onPress       gt  this submitSuggestion this props     underlayColor   fff  gt       lt Text style   this getFontSize   styles submitText   gt Submit lt  Text gt   lt  TouchableHighlight gt    Style      submit       marginRight 40      marginLeft 40      marginTop 10     submitText       paddingTop 20      paddingBottom 20      color   fff       textAlign  center       backgroundColor   68a0cf       borderRadius  10      borderWidth  1      borderColor    fff

User · Answer

Apply the below line of code     lt TextInput   style    height  40  width   95    borderColor   gray   borderWidth  2  borderRadius  20   marginBottom  20  fontSize  18  backgroundColor    68a0cf          Adding hint in TextInput using Placeholder option    placeholder   Enter Your First Name       Making the Under line Transparent    underlineColorAndroid  transparent    gt

User · Answer

Try moving the button styling to the TouchableHighlight itself   Styles     submit       marginRight 40      marginLeft 40      marginTop 10      paddingTop 20      paddingBottom 20      backgroundColor   68a0cf       borderRadius 10      borderWidth  1      borderColor    fff         submitText         color   fff         textAlign  center         Button  same     lt TouchableHighlight   style  styles submit    onPress       gt  this submitSuggestion this props     underlayColor   fff  gt       lt Text style   this getFontSize   styles submitText   gt Submit lt  Text gt   lt  TouchableHighlight gt

User · Answer

Remember if you want to give Text a backgroundcolor and then also borderRadius in that case also write overflow  hidden  your text having a background colour will also get the radius otherwise it s impossible to achieve until unless you wrap it with View and give backgroundcolor and radius to it   lt Text style    backgroundColor   black   color  white   borderRadius 10  overflow  hidden    gt Dummy lt  Text gt

User · Answer

Never give borderRadius to your  lt Text   gt  always wrap that  lt Text   gt  inside your  lt View   gt  or in your  lt TouchableOpacity  gt    borderRadius on  lt Text   gt  will work perfectly on Android devices  But on IOS devices it won t work    So keep this in your practice to wrap your  lt Text  gt  inside your  lt View  gt  or on  lt TouchableOpacity  gt  and then give the borderRadius to that  lt View   gt  or  lt TouchableOpacity   gt   so that it will work on both Android as well as on IOS devices   For example -   lt TouchableOpacity style   borderRadius  15   gt      lt Text gt Button Text lt  Text gt   lt  TouchableOpacity gt    -Thanks

User · Answer

You should add overflow  hidden to your styles   Js    lt Button style  styles submit  gt Submit lt  Button gt    Styles   submit      backgroundColor    68a0cf      overflow   hidden

[javascript] React Native Border Radius with background color

Examples related to javascript

Examples related to styles

Examples related to react-native