Center Alignment of Text in React Native App

Question

A few issues with my visualization:

1. The text on my first button appears on the right end of the button, even though I have aligned it to the center. How can I shift the text 'login' to the center?

2. Currently, the 'Sign Up Here' text appears in the mid of the screen. I want it towards the end. However, when I increase the value for marginTop, the text disappears. For instance if I change it to 20, I can see only half of it (in the middle of the screen). If I increase it further it just disappears.

3. The Forgot Password text also appears on the left side even though I have aligned it.

4. The title 'My App' does not appear at all.

How can I fix these minor issues?

<Container View style={styles.container}>
      <Text View style={styles.title}>
        Instaride</Text>
        <View style={{flex:1}}></View>
      <Form View style={styles.formInput}> 
            <Item floatingLabel>
              <Label View style={styles.labelText}>Username</Label>
              <Input 
              View style={styles.textInput}
              onChangeText={(textUname) => uname(textUname)}
              value={textUname}

          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel >
              <Label View style={styles.labelText}>Password</Label>
              <Input 
              View style={styles.textInput}
              onChangeText={(textPassword) => password(textPassword)}
              value={textPassword}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>

            <Button View style={styles.button}
            onPress={() => navigation.navigate("Details")}>
              <Text>Login</Text>
            </Button>
            <Text View style={styles.forgotText}>
              Forgot Password?</Text>

          <Right>
            <Button hasText transparent onPress={() => navigation.navigate('Registration')}>
              <Text View style={styles.signupText}>
                Don't have an account? Sign Up Here</Text>
            </Button>
          </Right>
      </Container>
    );
  }
);

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

Answer 1

UPDATE:

You don't need to use Input View, as that's not the right way.

The below code works and you can check in the Expo demo, you need to add full in the Button.

---

Answers to the points:

1. You don't need Left/Right, you can simply put it in View, Left was causing the issue.
2. Use flex:1 on the Middle Part, so it will grow and occupy the screen and will push your Sign Up here at the bottom
3. Forget password is pushed to the center
4. We used getStatusBarHeight and have padding equal to the statusBarHeight

---

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  Container,
  Form,
  Item,
  Label,
  Input,
  Left,
  Right,
  Button,
  Content
} from "native-base";
import { SafeAreaView } from "react-native";
import Constants from "expo-constants";
import { getStatusBarHeight } from "react-native-status-bar-height";

// You can import from local files
import AssetExample from "./components/AssetExample";

// or any pure javascript modules available in npm
import { Card } from "react-native-paper";

export default class App extends React.Component {
  render() {
    return (
      <Container
        View
        style={Object.assign(
          { ...styles.container },
          { marginTop: getStatusBarHeight() }
        )}
      >
        <Content contentContainerStyle={{ flex: 1 }}>
          <View>
            <Text style={styles.title}>Instaride</Text>
          </View>

          <View style={{ flex: 1 }}>
            <Form style={Object.assign({ ...styles.formInput }, { flex: 1 })}>
              <Item floatingLabel>
                <Label style={styles.labelText}>Username</Label>
                <Input style={styles.textInput} placeholder={"Username"} />
              </Item>
              <Item floatingLabel>
                <Label style={styles.labelText}>Password</Label>
                <Input
                  View
                  style={styles.textInput}
                  placeholder={"Password"}
                  secureTextEntry={true}
                />
              </Item>
              <Button
                full
                style={styles.button}
                onPress={() => navigation.navigate("Details")}
              >
                <Text>Login</Text>
              </Button>
            </Form>
          </View>

          <View>
            <Text View style={styles.forgotText}>
              Forgot Password?
            </Text>

            <Button
              hasText
              transparent
              onPress={() => navigation.navigate("Registration")}
              style={{ justifyContent: "center" }}
            >
              <Text style={styles.signupText}>
                Don't have an account? Sign Up Here
              </Text>
            </Button>
          </View>
        </Content>
      </Container>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#242625",
    borderWidth: 2,
    borderColor: "red"
  },
  title: {
    textAlign: "center",
    fontSize: 22,
    color: "white"
  },
  textInput: {
    color: "white"
  },
  button: {
    marginTop: 15,
    backgroundColor: "#65c756"
  },
  forgotText: {
    marginTop: 15,
    justifyContent: "center",
    textAlign: "center",
    color: "white"
  },
  signupText: {
    textAlign: "center",
    justifyContent: "center",
    color: "white"
  },
  labelText: {
    fontSize: 14
  },
  formInput: {
    borderBottomWidth: 1,
    marginLeft: 20,
    marginRight: 20
  }
};

Temporary Link to Expo: https://snack.expo.io/@dhavaljardosh/8af9d3