React native expo - first letter gets cut off due to letter spacing

25 Views Asked by At

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:

image of screen

From the above, you can see the 'W' is a little bit cut off on its left arm.

0

There are 0 best solutions below