Editing Floating Label & Button from React Native

Question

My username field is somehow shorter than password field. How can I make them smaller, and same size?

How can I change the length of the button? There's only a width option.

The "Don't have an account? Sign Up" text keeps coming in uppercase and the text-transform doesn't work on it. Is there an alternative?

Header: I am not using any header but there is still a white one present. How could I remove it??

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StyleSheet, View} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { DrawerNavigator } from "react-navigation";
import { createAppContainer } from 'react-navigation';

export class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <Container View style={styles.container}>
      <Text View style={styles.title}>
      My App</Text>
      <Form View style={styles.formInput}>
            <Item floatingLabel>
              <Label View style={styles.labelText}>Username</Label>
              <Input 
              View style={styles.textInput}
              value={this.state.username}
          onChangeText={username => this.setState({ username })}
          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel last>
              <Label View style={styles.labelText}>Password</Label>
              <Input 
              View style={styles.textInput}
              value={this.state.password}
          onChangeText={password => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>
          <Left>
            <Button View style={styles.button}
            onPress={() => this.props.navigation.navigate("Details")}>
              <Text>Login</Text>
            </Button>
            <Text View style={styles.forgotText} >
            Forgot Password?</Text>
          </Left>
          <Right>
            <Button hasText transparent>
              <Text
              View style={styles.signupText}
              >Don't have an account? Sign Up</Text>
            </Button>
          </Right>
      </Container>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
        <Text>Details Screen</Text>
    );
  }
}

class RegisterationScreen extends React.Component {
  render() {
    return (

        <Text>sign up time</Text>
    );
  }
}

const LoginRouter = createStackNavigator(
  {
    Home: { screen: Login },
    Details: { screen: DetailsScreen },       
  }
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#242625',
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    color: 'white',
  },
  textInput: {
    color: 'white',
  },
  button: {
    marginTop: 15,
    backgroundColor: '#65c756',
    width: '170%',
    justifyContent: 'center',
    alignSelf: 'center'
  },
  forgotText: {
    marginTop: 15,
    justifyContent: 'center',
    color: 'white',
  },
   signupText: {
    marginTop: 70,
    justifyContent: 'center',
    color: 'white',
  },
  labelText: {
    fontSize : 14,
  },
  formInput: {    
    borderBottomWidth: 1, 
    marginLeft: 20,   
    marginRight: 20,   
  },
});

export default createAppContainer(LoginRouter);

This could be run on Snack Expo.

Answer 1

You had 4 separate questions, so I will address them in order:

Snack with changes implemented so you can follow along

1) Text Input widths

First of all, the label components are currently covering up the <Input> Components, so I removed them for now. They seem to be intended to function as placeholder components, so we can fix the `placeholder instead

Inspecting the elements, I see that both inputs have the same width, but the <Item>s containing them are different widths. This is caused by the last attribute on the second <Item>.

Removing the last attribute from <Item floatingLabel last> yields <Item floatingLabel>, which now has the same width bottom white border for both <Item> components

2) Button length

The button size properties are width and height

const styles = StyleSheet.create({
    ...
    button: {
        ...
        width: '170%',
        height: '15%',
        ...
    },

3) Button text capitalization

The default prop for a in React Native includes an uppercase prop, so setting it to the javascript false will turn off the all-caps styling on text within the button.

<Button hasText transparent>
    <Text style={styles.signupText} uppercase={false}>
    {"Don't have an account? Sign Up"}
    </Text>
</Button>

https://github.com/GeekyAnts/NativeBase/issues/1033

4) Removing white header

To remove the header, we can add a static navigationOptions property to your Login component

export class Login extends Component {
  static navigationOptions = {
    headerShown: false,
  };

  constructor(props) {
    super(props);
    ...

https://reactnavigation.org/docs/en/headers.html

Hide header in stack navigator React navigation