React Native - Button Styling Issues - reactjs

Question

I'm confused as to why my button doesn't seem to resemble the default native react button with a square shape that spans to the max width of the viewport - I've researched and understand from the react docs that the native button is very limited in terms of styling and props, but mine seems to be missing the default styling - any tips? My button component can be found here
I've tried adding backgroundColor to the styles, color, etc. but nothing changes

Answer 1

try this... customise further as you required
you will love react-native and to style after this :)
import React, { useState } from "react";
import { StyleSheet, View, TextInput, TouchableOpacity } from "react-native";
export default function AddTodo({ submitHandler }) {
const [text, setText] = useState("");
const changeHandler = (val) => {
setText(val);
};
return (
<View>
<TextInput
style={styles.input}
placeholder="add a game to the docket..."
placeholderTextColor="white"
onChangeText={changeHandler}
clearTextOnFocus="true"
/>
<TouchableOpacity style={styles.btn} onPress={() => submitHandler(text)}>
<Text style={styles.btnText}>add game</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
input: {
marginBottom: 10,
paddingHorizontal: 8,
paddingVertical: 6,
backgroundColor: "#2DCCCF",
flexDirection: "row",
color: "white",
},
btn: {
height: 45,
borderRadius: 8,
elevation: 3,
backgroundColor: "#AB47BC",
justifyContent: "center",
},
btnText: {
color: "#fff",
},
});