text in basic MKTextField is not visible while typing

styles.textfield = {
    height: 48, // have to do it on iOS
    marginTop: 60
}

...

  render() {
        return (
            <View>
                <View style={{
                    margin: 20,
                    padding: 20,
                    backgroundColor: "#CCC"
                }}>
                    <MKTextField tintColor={MKColor.Orange} textInputStyle={{
                        color: MKColor.Blue
                    }} placeholder="Text…" style={styles.textfield}/>
                </View>
                <View style={{
                    margin: 20,
                    padding: 20,
                    backgroundColor: "#CCC"
                }}>
                    <TextfieldWithFloatingLabel ref="defaultInput"/>
                    <Text style={styles.legendLabel}>With floating label</Text>
                </View>
            </View>
        )
    }

When focus is on another text box:

When focus is on top text box:

When triple clicking top text box’s text:

So the text is there, definitely, but I can’t see it. Also that placeholder text is right in the middle of the line.

$ react-native --version
react-native-cli: 1.2.0
react-native: 0.39.2
...
"react-native-material-kit": "~0.3.4",

[agrass]

fixed with textInputStyle={{flexGrow: 1, flex: 0}}

[quan118]

You can fix this bug by adding flex:1 in the textInputStype prop

<MKTextField
   tintColor={MKColor.Orange}
   textInputStyle={{color: MKColor.Blue, flex:1}}
   placeholder="Text…"
   style={styles.textfield}
/>