Setting a border for react native TextInput
<p>Using React native 0.26,</p>

<p>My component is something like this</p>

<pre><code>const Search = () =&gt; {
    return (
      &lt;View style={styles.backgroundImage}&gt;
        &lt;TextInput style={styles.textInput} onChangeText={(text) =&gt; console.log(text)} placeholder={"Enter Search Term"}/&gt;
      &lt;/View&gt;
    )
}
</code></pre>

<p>And my styles : </p>

<pre><code>const styles = StyleSheet.create({
  backgroundImage: {
    flex : 1,
    flexDirection: "column",
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    justifyContent: "center",
    alignItems: "stretch",
    borderRightWidth: 30,
    borderLeftWidth: 30,
    height: 50,
    borderColor: "#FFFFFF",
  }
})
</code></pre>

<p>The problems that I am facing are</p>

<ol>
<li>The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.</li>
<li>The background of TextInput is "grey" its the same as the View's background. I was expecting it to be white by default, (Feels transparent).</li>
<li>With iOS simulator how to bring up the keyboard, I would like to set <code>returnKeyType</code> and see how the keyboard looks (and have some code on <code>onSubmitEditing</code> and test).</li>
</ol>

<p>Screenshot below :
<a href="https://i.stack.imgur.com/HxCvv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HxCvv.png" alt="Screenshot"></a></p>