react-native-material-kit TextField not shown on iOS

Hi,

I am trying to use MKTextField on iOS and it is not displayed at all in the simulator. It is working on Android.

Version: RN: 0.27.2 RNMK: 0.3.2 iOS: 9.3

This is the expected result (on Android simulator):

This is how it looks like on iOS simulator:

They grey area is the place where the two MKTextField components are supposed to be.

Here is the JS code snippet:

import React from 'react';
import BaseReactComponent from '../common/BaseReactComponent';

import { View, StyleSheet } from 'react-native';
import { MKTextField, MKColor } from 'react-native-material-kit';
import PrimaryRaisedButton from '../common/buttons/PrimaryRaisedButton';
import {
    TEXTFIELD_WITH_FLOATING_LABEL,
    COMMON_STYLES
} from '../../styles/styles';

export default class LoginForm extends BaseReactComponent {
    constructor () {
        super();
        this._bindClassMethods('_setInitialState', '_handleLogin');
        this._setInitialState();
    }

    _setInitialState () {
        this.state = {
            username: '',
            password: ''
        };
    }

    render () {
        return (
            <View style={ [loginFormStyles.loginFormContainer, COMMON_STYLES.MARGIN_TOP_LG] }>
                <MKTextField
                    style={ [TEXTFIELD_WITH_FLOATING_LABEL] }
                    keyboardType="email-address"
                    floatingLabelEnabled={ true }
                    highlightColor={ MKColor.Blue }
                    placeholder="Email Address" />

                <MKTextField
                    style={ TEXTFIELD_WITH_FLOATING_LABEL }
                    password={ true }
                    floatingLabelEnabled={ true }
                    highlightColor={ MKColor.Blue }
                    placeholder="Password" />

                <PrimaryRaisedButton
                    text='LOGIN'
                    onPress={ this._handleLogin } />

            </View>
        );
    }
}

const loginFormStyles = StyleSheet.create({
    loginFormContainer: {
        alignItems: 'center'
    }
});

Thanks!

Jun 11 '16 19:06 edocsss

Thanks for taking the time to report this issue.

Just tested your code and I was not able to see MKTextField. But if I remove the alignItems : 'center' from the style, I can see them. I ran the same issue by adding alignSelf : 'center' directly on MKTextField component.

I need to test this behavior with RN TextInput component to see if it comes from our lib or from RN.

Jun 13 '16 09:06 Crash--

@Crash-- Thank you for testing it out and letting me know the problem source! In that case, is there any possible way of making the button in the middle without using alignItems and alignSelf?

Jun 13 '16 13:06 edocsss

I've dug into this issue. If you set a width / height to your MKTextField it'll work with alignItems : center.

Can you give it a try and see if it sill working on Android?

Jun 18 '16 09:06 Crash--

it is working in Android, but on IOS, the height isnt working well. I gave an height of 48 to the MKTextField and it still have a strange height. As you can see below, Left is IOS and right is Android