React Native: cant change button style - react-native

Question

I am trying to change the style of a button in React Native, but the edits for the button colour, margin, outlines etc aren't working at all. Here is the pic. Below is my code for HomeScreen.js
import React from 'react';
import {
StyleSheet,
TextInput,
View,
Text,
Button,
ScrollView,
Image,
Keyboard,
TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('../image/success.png')}
style={{
width: '50%',
height: 100,
resizeMode: 'contain',
marginTop: 0,
}}
/>
<Text style={{
fontSize: 20,
textAlign: 'center',
marginLeft: 35,
marginRight: 35,
marginTop: 0,
marginBottom: 10,
color: '#00a3cc'
}}>
{'\n\n'}
This is the Home Screen
</Text>
<Button
style={styles.buttonStyle}
onPress={() => navigation.navigate('Settings')}
title="Go to Settings"
/>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create ({
buttonStyle: {
backgroundColor: '#7DE24E',
borderWidth: 0,
color: '#FFFFFF',
borderColor: '#7DE24E',
height: 40,
alignItems: 'center',
borderRadius: 30,
marginLeft: 35,
marginRight: 35,
marginTop: 20,
marginBottom: 25,
}
});
Some help would be appreciated, let me know if more info is required. Thanks in advance.

Answer 1

You should use TouchableOpacity instead.
import React from 'react';
import {
StyleSheet,
TextInput,
View,
Text,
ScrollView,
Image,
Keyboard,
TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Image
source={require('../image/success.png')}
style={{
width: '50%',
height: 100,
resizeMode: 'contain',
marginTop: 0,
}}
/>
<Text style={{
fontSize: 20,
textAlign: 'center',
marginLeft: 35,
marginRight: 35,
marginTop: 0,
marginBottom: 10,
color: '#00a3cc'
}}>
{'\n\n'}
This is the Home Screen
</Text>
<TouchableOpacity
onPress={() => navigation.navigate('Settings')}
style={styles.buttonStyle}
>
<Text style={styles.btnText}>Go to Settings</Text>
</TouchableOpacity>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create ({
btnText: {
color: '#FFFFFF',
fontSize: 18,
textAlign: 'center',
},
buttonStyle: {
backgroundColor: '#7DE24E',
height: 40,
alignItems: 'center',
borderRadius: 30,
marginLeft: 35,
marginRight: 35,
marginTop: 20,
marginBottom: 25,
}
});