CODEWITHSUNDEEP
androidreact-nativetextinput
Wesley
Wesley

Reputation: 93

TextInput Typed Text not appearing on android

I'm new to react-native and am trying to make an app for both android and iOS at the same time.

Currently, I have a login screen set up, but both the typed text and placeholder text used within textInput is not showing in the app for android (works fine for iPhone).

Here is the code snippet and style sheet:

    'use strict';
import React, { Component } from 'react'
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TextInput,
  Image
} from 'react-native';

class LoginPage extends Component {
  constructor() {
    super()
    this.state = {
        username: '',
        password: ''
    }
  }
  render() {
    return (
        <View style={styles.container}>
            <Image style={styles.bg} source={require('./Resources/orangebackground.png')} />
            <View style={styles.header}>
                <Image source={require('./Resources/logo.png')} />
            </View>
            <View style={styles.inputs}>
                <View style={styles.inputContainer}>
                    <Image style={styles.inputUsername} source={require('./Resources/un.png')}/>
                    <TextInput 
                        style={[styles.input, styles.whiteFont]}
                        underlineColorAndroid={'white'}
                        placeholder='Username'
                        placeholderTextColor="white"
                        //value={this.state.username}
                    />
                </View>
                <View style={styles.inputContainer}>
                    <Image style={styles.inputPassword} source={require('./Resources/pw.png')}/>
                    <TextInput
                        password={true}
                        style={[styles.input, styles.whiteFont]}
                        placeholder="Password"
                        placeholderTextColor="#FFF"
                        underlineColorAndroid={'transparent'}
                        //value={this.state.password}
                    />
                </View>
                <View style={styles.forgotContainer}>
                    <Text style={styles.greyFont}>Forgot Password</Text>
                </View>
            </View>
            <View style={styles.signin}>
                <Text style={styles.whiteFont}>Sign In</Text>
            </View>
            <View style={styles.signup}>
                <Text style={styles.greyFont}>Don't have an account?<Text style={styles.whiteFont}>  Sign Up</Text></Text>
            </View>
        </View>
    );
  }
}

var styles = StyleSheet.create({
    container: {
      flexDirection: 'column',
      flex: 1,
      backgroundColor: 'transparent'
    },
    bg: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: windowSize.width,
        height: windowSize.height
    },
    header: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: .5,
        backgroundColor: 'transparent'
    },
    mark: {
        width: 150,
        height: 150
    },
    signin: {
        backgroundColor: '#FF3366',
        padding: 20,
        alignItems: 'center'
    },
    signup: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: .15
    },
    inputs: {
        marginTop: 10,
        marginBottom: 10,
        flex: .25
    },
    inputPassword: {
        marginLeft: 15,
        width: 20,
        height: 21
    },
    inputUsername: {
      marginLeft: 15,
      width: 20,
      height: 20
    },
    inputContainer: {
        padding: 10,
        borderWidth: 1,
        borderBottomColor: '#CCC',
        borderColor: 'transparent'
    },
    input: {
        position: 'absolute',
        left: 61,
        top: 12,
        right: 0,
        height: 20,
        fontSize: 14
    },
    forgotContainer: {
      alignItems: 'flex-end',
      padding: 15,
    },
    greyFont: {
      color: '#D8D8D8'
    },
    whiteFont: {
      color: '#FFF'
    }
})

Any help is appreciated. Thank you.

Upvotes: 9

Views: 13340

Answers (5)

Thiran Hettiarachchi
Thiran Hettiarachchi

Reputation: 359

In my scenario it was the Dark Mode that caused the issue.

Either use a Darker color for the TextInput style color and the placeholderTextColor

  <TextInput
      style={[styles.textInput, {color: '#000000'} ]}
      onChangeText={setUserName}
      value={userName}
      keyboardType={'email-address'}
      placeholder={'Email'}
      placeholderTextColor={'#000000'}
    />

or

On IOS: Go to ios > name_app > Info.plist and add inside <dict> </dict>:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

On Android: Go to android > app > src > main > values > styles.xml and add inside <style> </style>

<item name="android:forceDarkAllowed">false</item>

Upvotes: 2

Dylan Moerland
Dylan Moerland

Reputation: 11

For android it's required to set the correct lineHeight aswell.

input: {
  position: 'absolute',
  left: 61,
  top: 12,
  right: 0,
  height: 20,
  fontSize: 14,
  lineHeight: 14 // <- line height should be corresponding to your font size
},

Upvotes: 1

Amogh Jahagirdar
Amogh Jahagirdar

Reputation: 559

Another thing to be careful about is in Android, if the TextInput height is set to less than or equal to 20, the cursor and text becomes invisible. They become properly visible on when height is set to greater than or equal to 40.

Upvotes: 1

usakc
usakc

Reputation: 455

I recently had this issue, and I solved it by adding paddingVertical: 0 to the style of the input and by set underlineColorAndroid="transparent" prop. The style can be same for both platforms this way. It seems like there is some default vertical padding on android.

There is also related issue on the Github of React Native.

Upvotes: 17

BradByte
BradByte

Reputation: 11093

For some reason the height style property needs to be double when on Android than iOS. There might be a cleaner way to do this but here is how we solved this. 

<TextInput style={[styles.input, {height: Platform.OS == 'android' ? 40 : 20}]} ... />

Upvotes: 29

Related Questions