ReactNative - Button Not Visible - react-native

Question

I'm having an issue where I'm creating a simple button that isn't visible (but it is there because I'm able to trigger the onPress method) within this view, but I am able to create other components within this View that appear. My code in App.js is below, any help would be greatly appreciated!
import React from 'react';
import {
View,
StyleSheet,
Text,
TouchableOpacity,
} from 'react-native';
export default function App() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<TouchableOpacity style={styles.button} onPress={() => console.log("Clicked")}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
button: {
color: "tomato",
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
padding: 15,
height: 50,
width: "100%",
},
text: {
color: "#fff",
fontSize: 18,
fontWeight: "bold",
textTransform: "uppercase",
}
})

Answer 1

You have a white button with white text in front of a white background so it all blends in. Look at this expo snack and the code below to see why (https://snack.expo.dev/#heytony01/thankful-juice-box)
import React from 'react';
import {
View,
StyleSheet,
Text,
TouchableOpacity,
} from 'react-native';
export default function App() {
return (
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<TouchableOpacity style={styles.button} onPress={() => console.log("Clicked")}>
<Text style={styles.text}>Login</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
button: {
borderColor:"red", // give border color
borderWidth:2, // give border width
color: "tomato",
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
padding: 15,
height: 50,
width: "100%",
},
text: {
color: "black", // change font to black
fontSize: 18,
fontWeight: "bold",
textTransform: "uppercase",
}
})

Answer 2

I was setting the color of the button instead of the backgroundColor