React Native TouchableOpacity full width style not working - react-native

Question

I am trying to put a simple Username-Password-Login button layout in react-native.
Problem I found is with style on TouchableOpacity button area. I have put width as 80% but still button width is showing only what text "LOGIN" requires. I want that button area to be of full width or 80%.
const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",
alignItems: "center",
padding: 10,
borderRadius: 25,
width: "80%",
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20,
},
inputText: {
height: 50,
color: "white",
},
});
export default Practice27;

Answer 1

const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<View style={styles.loginBtn}> //using a view tag here
<TouchableOpacity onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",//you using alignitem center Thats why i remove this
padding: 10,
borderRadius: 25,
width: "80%",
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
padding: 20,
},
inputText: {
height: 50,
justifyContent: "center",
textAlign:"center"
color: "white",
},
});
export default Practice27;
Just copy and Pest it...This will works for you...I am Giving Comments where I changed...

Answer 2

You can use dimensions for give width, height, margins, padding etc. When you use dimension it work different screen sizes without no problem.
import { Dimensions } from 'react-native';
const window = Dimensions.get('window');
const Practice27 = (props) => {
const [text, setText] = useState("");
const [textp, setTextp] = useState("");
return (
<View style={styles.container}>
<View style={styles.inputView}>
<TextInput
placeholder="Username..."
value={text}
keyboardType="email-address"
style={styles.inputText}
onChangeText={(text) => {
setText(text);
username = text;
}}
></TextInput>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Password..."
style={styles.inputText}
secureTextEntry={true}
value={textp}
onChangeText={(textp) => {
setTextp(textp);
password = textp;
}}
></TextInput>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={login}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#003f5c",
alignItems: "center",
justifyContent: "center",
},
loginBtn: {
backgroundColor: "#33eacd",
height: 50,
justifyContent: "center",
alignItems: "center",
padding: 10,
borderRadius: 25,
width: (window.width)*0.9,//this means button get width window-width*0.9
},
loginText: {
color: "white",
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20,
},
inputText: {
height: 50,
color: "white",
},
});
export default Practice27;