React Native Button Not Reacting To Stylesheet Changes (Centering Button)

Question

I started learning react native for the first time yesterday and building out a expo app at the same time. I started off by creating a login screen but once it was time to design the sign up feature I ran into a issue I couldn't understand.

A photo of the app

As you can see I have the password and username fields correctly inline with the flex-box but for some reason the "Sign Up" button is not responding to any of the positioning I'm applying.

In short all I'm trying to achieve is to center the sign-up button.

The code for the app is here, anyone reading the question should only be concerned with the signup: style and the button although the solution may lie in the in casing everything.

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',
  },
});

I've tried most of the basic solutions to this problem but my google queries have not returned helpful results. I believe it has something to do with flex-box but I don't understand it because it should be inside the other tag.

As for answers it would be much appreciated to explain the reason why no rules are applying and correct the code snippet above to center the button.

Answer 1

The problem is that the React Native Button component doesn't allow you to overwrite its styles, you can see the docs, style prop that you're trying to use isn't listed anywhere.

As per docs:

A basic button component that should render nicely on any platform. Supports a minimal level of customization. If this button doesn't look right for your app, you can build your own button using Pressable. For inspiration, look at the source code for the Button component.

Perhaps you can try to setup some linting or type checking because using an undeclared prop should result in an error and give you a hint that something is wrong.