I am using expo go as a live emulator on my android device.
Here is the code:
import React from 'react';
import { StyleSheet, View, Text, StatusBar, Image, TextInput,
TouchableOpacity } from 'react-native';
import AppLoading from 'expo-app-loading';
import { inlineStyles } from 'react-native-svg';
const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
backgroundColor: '#111111',
},
topbar: {
flexDirection: 'row', // Arrange items horizontally
alignItems: 'center', // Align items vertically
},
Short_Logo: {
marginTop: 50,
marginLeft: 26,
width: 25,
height: 50.5,
},
Line: {
marginTop: 40,
marginLeft: 93,
marginRight: 20,
width: 266,
height: 4,
backgroundColor: '#393939',
flex: 1,
borderRadius: 50,
},
Greetings: {
marginTop: 28.5,
},
Welcome: {
fontSize: 80,
fontWeight: '800',
letterSpacing: -8,
color: '#ffffff',
paddingLeft: 10,
},
WelcomeDetails: {
width: 390,
fontSize: 18,
fontWeight: '800',
color: '#969696',
marginLeft: 16,
},
logininputs: {
flex: 1,
alignItems: 'center',
}
});
const Login = () => {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#111111" />
<View style={styles.topbar}>
<Image
source=
{require('../../assets/Logo/Short_Logo.png')}
style={styles.Short_Logo}
/>
<View style={styles.Line}></View>
</View>
<View style={styles.Greetings}>
<Text style={styles.Welcome}>Welcome!</Text>
<Text style={styles.WelcomeDetails}>Enter your name,
email address, password & age to get access to your
account.</Text>
</View>
<View style={styles.logininputs}>
<TextInput
style={styles.input}
placeholder="Name"
onChangeText={text => setName(text)}
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.input}
placeholder="Email"
onChangeText={text => setEmail(text)}
keyboardType="email-address"
autoCapitalize="none"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry={true}
placeholderTextColor="#ffffff"
/>
<TouchableOpacity style={styles.loginButton}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default Login;
I was trying to increase the letter spacing to -8 to achieve like a overwriting effect and i got that, but for some reason the first letter is showing some problems:
From the above, you can see the 'W' is a little bit cut off on its left arm.
