CODEWITHSUNDEEP
react-native
coderzzz18
coderzzz18

Reputation: 2615

borderRadius property of TextInput not working in react-native.

I want to use rounded TextInput in my react-native application but when I am setting its borderRadius property its not working. Suggest me way to do that.

    <TextInput  placeholder="Email" style={styles.textInput} />

    textInput:{

    borderColor:'black',
    backgroundColor:'#D3D3D3',
    width:300,
    borderWidth: 1,
    borderStyle: 'solid',
    fontSize:15,
    borderRadius: 25,

    }

Upvotes: 5

Views: 23593

Answers (8)

hkniyi
hkniyi

Reputation: 353

*f you are using React Native Paper, try this:

 <TextInput
    label="Enter the URL of the recipe you want to save"
    value={url}
    onChangeText={text => setUrl(text)}
    autoCapitalize="none"
    style={styles.input}
    mode="outlined"
    outlineStyle={{borderRadius: 50}}
  />

Upvotes: 1

Faryar Kankash
Faryar Kankash

Reputation: 41

Add theme={{roundness: 20}} theme is a react native paper property

Upvotes: 1

aaronmbmorse
aaronmbmorse

Reputation: 459

I was having the same issue. You need to use the outlineStyle prop.

Example: <Input outlineStyle={{borderRadius: 20}} />

This works like a charm.

Upvotes: 0

Robert Coroianu
Robert Coroianu

Reputation: 426

In the latest version of react native paper docs, they mention that you need to use outlineStyle to set border color and border-radius

outlineStyle
Type: StyleProp<ViewStyle>
Pass style to override the default style of outlined wrapper. Overrides style when mode is set to outlined Example: borderRadius, borderColor

Upvotes: 0

Bohdan Kasian
Bohdan Kasian

Reputation: 61

<TextInput theme={{ roundness: 20 // try this }} />

Upvotes: 5

sumit kumar pradhan
sumit kumar pradhan

Reputation: 653

Apply below code :

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18 }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>

Upvotes: 1

Anjal Saneen
Anjal Saneen

Reputation: 3219

Try overflow:"hidden" on the TextInput that has borderRadius.

Upvotes: 9

Pir Shukarullah Shah
Pir Shukarullah Shah

Reputation: 4232

Apply border on View, parent of TextInput

<View style={styles.borderStyle}>
 <TextInput  placeholder="Email" style={styles.textInput} />
</View>

Upvotes: 6

Related Questions