I'm facing a few issues with my visualization:
Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center?
Currently, the 'Sign Up Here' text is displayed in the middle of the screen. I would like it to be towards the end. However, when I adjust the marginTop value, the text disappears. For example, setting it to 20 only shows half of the text (in the middle of the screen). Increasing it further makes it disappear entirely.
The Forgot Password text also appears on the left side even though it's aligned.
The title 'My App' is not visible at all.
How can I resolve 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,
},
});