Center Alignment of Text in React Native App - css

Question

A few issues with my visualization:
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?
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.
The Forgot Password text also appears on the left side even though I have aligned it.
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:
You don't need Left/Right, you can simply put it in View, Left was causing the issue.
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
Forget password is pushed to the center
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