O botão React Native não reage às alterações da folha de estilo (botão de centralização)

Comecei a aprender a reagir nativo pela primeira vez ontem e a construir um aplicativo de exposição ao mesmo tempo. Comecei criando uma tela de login, mas quando chegou a hora de projetar o recurso de inscrição, me deparei com um problema que não consegui entender.

Uma foto do aplicativo

Como você pode ver, tenho os campos de senha e nome de usuário alinhados corretamente com o flex-box, mas por algum motivo o botão "Inscrever-se" não está respondendo a nenhum dos posicionamentos que estou aplicando.

Resumindo, tudo o que estou tentando conseguir é centralizar o botão de inscrição.

O código do aplicativo está aqui, quem estiver lendo a pergunta deve se preocupar apenas com o estilo de inscrição: e o botão, embora a solução possa estar no caso de tudo.

import React, { useRef,useState} from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View,Button} from 'react-native';

export default function Login() {

  const user = React.useRef();
  const pass = React.useRef();
  const [username, setText] = useState('');

  const moveToPass = () => {
    pass.current.focus();
  };

  const handleKeyPress = ({ nativeEvent: {text} }) => {
    console.log(text)
    console.log(username);
    let fire= []

    if(username.length==0){
      fire.push(user)
    }
    if(text.length==0){
      fire.push(pass)
    }
  } 

  const handleSignUp =({nativeEvent: PressEvent})=>{
    console.log(PressEvent)
  }
  
  return (
    <View style={styles.container}>
      <TextInput ref={user} style={styles.input} onSubmitEditing={moveToPass} returnKeyType="next" onChangeText={newText => setText(newText)}  placeholder="Username"/>
      <TextInput ref={pass} style={styles.input} onSubmitEditing={handleKeyPress} secureTextEntry={true} placeholder="Password"/>
      <Button title="Sign Up" style={styles.signup} color={'#FF0000'} onPress={handleSignUp} ></Button>
      <StatusBar style="auto" />

    </View>
  );
}
 

const styles = StyleSheet.create({
  container: {
    paddingTop:'10%',
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'flex-start',
  },
  input:{
    height: 40,
    width:'80%',
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor:'blue',
    alignSelf:'center',
    borderRadius:20,
  },
  signup:{
    width: '100%',
    height: '30%',
    alignSelf:'center',
    justifyContent:'center',
    alignContent:'center',
    alignItems:'center',
  },
});

Tentei a maioria das soluções básicas para esse problema, mas minhas consultas no Google não retornaram resultados úteis. Acredito que tenha algo a ver com flex-box mas não entendo porque deveria estar dentro da outra tag.

Quanto às respostas, agradeceríamos muito explicar o motivo pelo qual nenhuma regra se aplica e corrigir o trecho de código acima para centralizar o botão.