title: React-native TouchableOpacity button doesn't respect border/border-radius
body: <p>I have created a generic button which I'd like to have round edges instead of being a square. My button component is as such:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>const Button = ({ onPress, children }) =&gt; {
    const { buttonStyle, textStyle } = styles;
  
    return (
      &lt;TouchableOpacity onPress={onPress} style={buttonStyle}&gt;
        &lt;Text style={textStyle}&gt;
            {children}
        &lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
    );
  };
  
  const styles = {
      textStyle: {
          alignSelf: 'center',
          color: colors.primaryTeal,
          fontSize: 16,
          fontWeight: '600',
          paddingTop: 10,
          paddingBottom: 10,
      },
      buttonStyle: {
          flex: 1,
          backgroundColor: colors.whiteText,
          marginLeft: 5,
          marginRight: 5,
          borderRadius: 50
      }
  };
  </code></pre>
  
  <p>However, it remains to be square and doesn't respond to <code>borderRadius</code> at all.</p>
  
  <p>It's invoked as such:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Button onPress={this.onButtonPress.bind(this)}&gt;
      Log in
  &lt;/Button&gt;
  </code></pre>
  
  <p>How do I make it respect borderRadius and get round edges?</p>
  
  <p>The login form in which it appears(Render)</p>
  
  <pre class="lang-js prettyprint-override"><code>  render() {
      return (
          &lt;Card&gt;
              &lt;CardSection&gt;
                  &lt;Input
                      placeholder="user@gmail.com"
                      label="Email"
                      value={this.state.email}
                      onChangeText={email =&gt; this.setState({ email })}
                  /&gt;
              &lt;/CardSection&gt;
              &lt;CardSection&gt;
                  &lt;Input
                      secureTextEntry
                      placeholder="password"
                      label="Password"
                      value={this.state.password}
                      onChangeText={password =&gt; this.setState({ password })}
                  /&gt;
              &lt;/CardSection&gt;
              &lt;View style={styles.btnWrapper}&gt;
              &lt;CardSection&gt;
                  {this.state.loading ? 
                      &lt;Spinner size="small" /&gt; : 
                      &lt;Button onPress={this.onButtonPress.bind(this)}&gt;
                          Log in
                      &lt;/Button&gt;}
              &lt;/CardSection&gt;
              &lt;/View&gt;
              &lt;Text style={styles.errorTextStyle} disabled={this.state.error !== null}&gt;
                  {this.state.error}
              &lt;/Text&gt;
          &lt;/Card&gt;
  </code></pre>
  
  <p>CardSection component:</p>
  
  <pre class="lang-js prettyprint-override"><code>const CardSection = (props) =&gt; {
    return (
      &lt;View style={styles.containerStyle}&gt;
        {props.children}
      &lt;/View&gt;
    );
  };
  
  const styles = {
    containerStyle: {
      borderBottomWidth: 1,
      padding: 5,
      backgroundColor: '#fff',
      justifyContent: 'flex-start',
      flexDirection: 'row',
      borderColor: '#ddd',
      position: 'relative'
    }
  };
  </code></pre>