title: Setting a border for react native TextInput
body: <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>