Unwanted character on InpuText in React Native

Question

Im new in coding and Im working on a project on a React Native. Im making a login screen with a email and password field but when I run the app on my phone, it appears a space both on the email field and on the password field like shown in the picture. Would that be just in my phone? What I can do?

import React, { Component } from 'react'
import {View, TextInput, Dimensions, StyleSheet} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'



const {width: WIDTH } = Dimensions.get('window')
 
export default class Example extends Component {
  render () {
    return (
    <View>
  
      <TextInput  style={styles.input} 
      placeholder={'Email'} 
      underlineColorAndroid='transparent'> </TextInput>
      
      <TextInput  
      style={styles.input2} 
      placeholder={'Password'} 
      underlineColorAndroid='transparent'
      secureTextEntry={true}> </TextInput>
    </View>



    );

  }
  
}

const styles = StyleSheet.create({
  input: {
    position: 'absolute', 
    top: 300, 
    width: WIDTH - 55,
    height: 45,
    borderRadius: 25,
    fontSize: 16,
    paddingLeft: 45,
    backgroundColor: '#dcdcdc',
    color: 'rgba(255,255,255,0.7)',
    marginHorizontal: 25,
  },
  input2: {
    position: 'absolute', 
    top: 450, 
    width: WIDTH - 55,
    height: 45,
    borderRadius: 25,
    fontSize: 16,
    paddingLeft: 45,
    backgroundColor: '#dcdcdc',
    color: 'rgba(255,255,255,0.7)',
    marginHorizontal: 25,
  },
  inputIcon: {
    position: 'absolute', 
    top: 304, left: 15,
  },
  
});

Answer 1

No, that is not your phone error. My answer help your understanding. You can use my more simple code than yours.

import React, { Component } from 'react'
import { View,
         TextInput, 
         Dimensions, 
         StyleSheet
} from 'react-native'
const screen_width=Dimensions.get('window').width;
export default class App extends Component {
  render() {
     return (
         <View style={styles.container}>
           <TextInput
             style={styles.input}
             placeholder={'Email'}
           underlineColorAndroid='transparent'>
           </TextInput>
           <TextInput
             style={styles.input}
             placeholder={'Password'}
            underlineColorAndroid='transparent'
             secureTextEntry={true}>
           </TextInput>
         </View>
        );
     }
 }
 const styles = StyleSheet.create({
   container: {
           flex: 1,
           justifyContent: 'center',
           alignItems: 'center',
   },
   input: {
          height: 45,
          borderRadius: 25,
          fontSize: 16,
          backgroundColor: '#dcdcdc',
          color: 'rgba(255,255,255,0.7)',
          width: screen_width * 0.75,
          paddingHorizontal: 20,
          marginTop:50,
   }
 });

If you need my help more, welcome to you anytime. Hope your success.