Button Styles not working in react native - react-native

Question

I want to change button borderRadius,color, and padding but it doesn't work
this is my view
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View, Image} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
function HomeScreen({navigation}) {
return(
<View
style={styles.container}>
<Text>Home Screen</Text>
<Button
style={styles.button}
title= "Go To Details"
onPress={()=> navigation.navigate('Details')}
/>
</View>
)
}
and this is my styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
button: {
width: 200,
marginTop: 20,
backgroundColor: "green",
padding: 15,
borderRadius: 50,
},
});
this is my screen
are there something that i miss?

Answer 1

I don't think so you can customize like your own with react native Button. But you can change something like title, color, etc. Check their doc https://reactnative.dev/docs/button
A better way is to make your own Button with your custom Style like this :
<TouchableOpacity onPress={()=> navigation.navigate('Details')}>
<View style={styles.button}>
<Text>Go To Details</Text>
</View>
</TouchableOpacity>

Answer 2

I'll suggest you to use View, because button from 'react-native' have some default styling and there can be some difficulty to override them, you can customise View like anything you want. just have a View and give them desired styles.
function HomeScreen({navigation}) {
return(
<View
style={styles.container}>
<Text>Home Screen</Text>
<View
style={styles.button}
title= "Go To Details"
onPress={()=> navigation.navigate('Details')}
/>
</View>
)
}
just give styles you want
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
button: {
width: 200,
marginTop: 20,
backgroundColor: "green",
padding: 15,
borderRadius: 50,
},
});