0

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.

x89
  • 2,798
  • 5
  • 46
  • 110

2 Answers2

2

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

davidgamero
  • 466
  • 2
  • 5
1

I was frustrated with the solutions on the internet, none of which worked according to my needs. So I wrote custom solution, made it maximum dynamic, and uploaded as a library, here it is.

Note: This is Expo supported solution

Preview: https://raw.githubusercontent.com/mahevstark/fiction-expo-floating-label/HEAD/example.gif

to install:

npm i fiction-expo-floating-label-input

to Import:

import {FictionFloatingLabelInput} from "fiction-expo-floating-label";

basic Example:

<FictionFloatingLabelInput
  label="First Name"
  value={x} // just a state variable
  labelFocusedTop={10} // Y position of label when focused
  labelUnFocusedTop={-5} // Y position of label when un-focused
  onChangeText={(t)=>setX(t)} // setting state variable
/>

Full Example:

<FictionFloatingLabelInput
  label="First Name" // label itself
  value={x} // just a state variable

  labelFocusedTop={-5} // Y position of label when focused
  labelUnFocusedTop={10} // Y position of label when un-focused

  containerStyle={{}} // container style
  focusedContainerStyle={{}} // container style when focused
  unFocusedContainerStyle={{}} // container style when un-focused

  subContainerStyle={{}} // child container style
  focusedSubContainerStyle={{}} // child container style when focused
  unfocusedSubContainerStyle={{}} // child container style when un-focused

  labelStyle={{}} // label style
  focusedLabelStyle={{}} // label style when focused
  unfocusedLabelStyle={{}} // label style when un-focused

  textInputStyle={{}} // text input style
  focusedTextInputStyle={{}} // text input style when focused
  unFocusedTextInputStyle={{}} // text input style when un-focused

  labelFontSizeUnFocused={14} // label font size when un-focused
  labelFontSizeFocused={10} // label font size when focused

  labelColorUnFocused={"red"} // label color when un-focused
  labelColorFocused={"green"} // label color when focused

  underlineColorAndroid={"transparent"} // you know this one, right?

  selectionColor={"red"} // cursor and selection color

  onChangeText={(value)=>setX(value)} // setting state variable

  // all other text input props are supported too, Except onFocus and onBlur, 
  // instead below focus and blur events are explained

  preOnFocus={()=>{ 
    // gets called before the animation starts , focusing
  }}

  postOnFocus={()=>{ 
    // gets called after the animation ends , focusing
  }}

  preOnBlur={()=>{ 
    // gets called before the animation starts , unfocusing
  }}

  postOnBlur={()=>{ 
    // gets called after the animation ends, unfocusing
  }}

/>

Note: Don't forget to declare state variable as x, like

const [x, setX] = React.useState("")
Faisal Shahzad
  • 694
  • 9
  • 13