My placeholder is not displaying the Placeholder text. Text input is displayed. Placeholder text is also displayed while i am running on emulator. But when i install and run the code on my device. It doesnot display any placeholder text.

Here is my code

<View style={styles.root}>
<Text style={styles.title}>Create an account</Text>
            <CustomInput
                placeholder="Username"
                value={userName}
                setValue={setUserName}
            />
</View>

Stylesheet looks like this:

const styles = StyleSheet.create({
    root: {
        alignItems: 'center',
        padding: 20
    },
    title:{
        fontSize: 24,
        fontWeight: 'bold',
        color: '#051c60',
        margin:10
    }
})

;

Custom Input section looks like this:

import { View, TextInput, StyleSheet } from 'react-native'
import React from 'react'

const CustomInput = ({value, setValue, placeholder, secureTextEntry}) => {
  return (
    <View style={styles.container}>
        <TextInput
            placeholder={placeholder}
            value={value}
            onChangeText={setValue}
            style={styles.input}
            secureTextEntry={secureTextEntry}
        />
    </View>
  )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'white',
        width: '100%',
        borderColor:'#e8e8e8',
        borderWidth:1,
        borderRadius:5,
        paddingHorizontal:10,
        marginVertical:5,
    },
    input:{
        fontSize:16,
        color:'#000',
        paddingVertical:10,
    }
})

export default CustomInput;