React-native TouchableOpacity button doesn't respect border/border-radius - react-native

Question

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:
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
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
}
};
However, it remains to be square and doesn't respond to borderRadius at all.
It's invoked as such:
<Button onPress={this.onButtonPress.bind(this)}>
Log in
</Button>
How do I make it respect borderRadius and get round edges?
The login form in which it appears(Render)
render() {
return (
<Card>
<CardSection>
<Input
placeholder="user#gmail.com"
label="Email"
value={this.state.email}
onChangeText={email => this.setState({ email })}
/>
</CardSection>
<CardSection>
<Input
secureTextEntry
placeholder="password"
label="Password"
value={this.state.password}
onChangeText={password => this.setState({ password })}
/>
</CardSection>
<View style={styles.btnWrapper}>
<CardSection>
{this.state.loading ?
<Spinner size="small" /> :
<Button onPress={this.onButtonPress.bind(this)}>
Log in
</Button>}
</CardSection>
</View>
<Text style={styles.errorTextStyle} disabled={this.state.error !== null}>
{this.state.error}
</Text>
</Card>
CardSection component:
const CardSection = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
}
};

Answer 1

Works perfectly fine. Just make sure to use react native's StyleSheet.create to get cached styles.
Maybe your button container view background is white and you're not seeing the rounded corners.
Heres my working snack
Code snippet i used, but refer to the snack as you'll see it live in action.
import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
return (
<TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
<Text style={styles.textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Button>
Log in
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'black',
},
textStyle: {
alignSelf: 'center',
color: 'teal',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10,
},
buttonStyle: {
flex: 1,
backgroundColor: 'white',
marginLeft: 5,
marginRight: 5,
borderRadius: 50
},
});

Answer 2

You have to add style overflow: hidden to TouchableOpacity

Answer 3

Try add attribute borderWidth and borderColor on buttonStyle, like below:
buttonStyle: {
backgroundColor: colors.whiteText,
marginLeft: 5,
marginRight: 5,
borderRadius: 50,
borderWidth: 2,
borderColor: "#3b5998"
}
A complete example:
<TouchableOpacity
onPress={() => handleSubmit()}
disabled={!isValid}
style={{
alignSelf: "center",
marginBottom: 30,
overflow: 'hidden',
borderColor: "#3b5998",
borderWidth: 2,
borderRadius: 100,
}}
>
<View
style={{
flexDirection: "row",
alignSelf: "center",
paddingLeft: 15,
paddingRight: 15,
minHeight: 40,
alignItems: 'center',
}}
>
<Text style={{ fontSize: 20, fontWeight: "bold", color: "#3b5998" }}>
SEND
</Text>
</View>
</TouchableOpacity>

Answer 4

I think you might be looking for the containerStyle prop
<TouchableOpacity containerStyle={ViewStyleProps}>