I am using an input component from the ui kit react native elements, and I am trying to style it to have a rounded shape with a border radius to no success. The default input style is just a line like shown in this picture:
[![enter image description here](https://i.stack.imgur.com/hONNh.jpg)](https://i.stack.imgur.com/hONNh.jpg)

I am trying to get my input to look something like this, from the react native elements demo app:
[![enter image description here](https://i.stack.imgur.com/B323F.jpg)](https://i.stack.imgur.com/B323F.jpg)

I have tried various types of styling in order to get the input rounded, such as the following:

```
<Input 
   borderStyle= 'solid'
   borderColor= 'black'
   borderRadius='25'
   overflow="hidden"
   keyboardAppearance="dark"
   placeholder=""
   onChangeText={(message) => { this.setState({message})}}
   value={this.state.message}
  />

```

However no changes seem to change the input from the default style. Any suggestions would be much appreciated.

EDIT: I have gotten a rounded text input to appear, however for some reason the straight line is still there and the text appears to far to the left in the input. Here is the updated code:

```
<Input
        containerStyle={{marginVertical: 10}}
        overflow="hidden"
        inputStyle={{ borderStyle: 'solid', marginLeft: -4,overflow: 'hidden', marginBottom: 10, marginTop: 10, borderWidth: 1, borderColor: 'lightgrey', borderRadius: 25}}
        keyboardAppearance="dark"
        placeholder=""
        autoCorrect={false}
        onChangeText={(message) => { this.setState({message})}}
        value={this.state.message}
        />

```

And this is the result:
[![enter image description here](https://i.stack.imgur.com/Z5E38.jpg)](https://i.stack.imgur.com/Z5E38.jpg)

How do I get rid of that line and move the text cursor to the right?