React Native TouchableOpacity full width style not working

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;

question from:https://stackoverflow.com/questions/65869038/react-native-touchableopacity-full-width-style-not-working

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;