blank view

[jonbcampos]

Looking forward to using this. Ran into an issue though. If I have a simple render function with just a it shows the label with text. Anything I put within

and I end up with a blank view.

Code

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Text, TouchableOpacity} from 'react-native';
import {reduxForm, Field} from 'redux-form/immutable';
import * as regexp from '../inputs/regexp.constants';
import * as formStates from '../forms.constants';
import styles from './login.styles';
import {authenticate} from '../../../states/auth/auth.actions';
import {connect} from 'react-redux';
import {bindRoutineCreators} from 'redux-saga-routines';
import {Button, Form, FieldsContainer, Fieldset, ActionsContainer} from 'react-native-clean-form'
import {Input} from 'react-native-clean-form/redux-form-immutable';

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit() {
        const {handleSubmit, authenticate} = this.props;
        //handleSubmit(authenticate).then(
        this.props.authenticate().trigger().then(
            function (result) {
                console.warn(JSON.stringify(result));
            }, function (error) {
                console.error(JSON.stringify(error));
            }
        )
    }

    render() {
        const {handleSubmit, authenticate, submitting} = this.props;
        return (
            <Form>
                <FieldsContainer>
                    <Fieldset label="Login">
                        <Input name="email"
                               label="Email"
                               autoCapitalize="none"
                               autoCorrect={false}
                               spellCheck={false}
                               autoFocus={true}
                               keyboardType="email-address"
                               returnKeyType="next"
                               placeholder="Enter Your Email Address"/>
                        <Input name="password"
                               label="Password"
                               autoCapitalize="none"
                               autoCorrect={false}
                               spellCheck={false}
                               keyboardType="default"
                               returnKeyType="done"
                               secureTextEntry={true}
                               placeholder="Enter Password"/>
                    </Fieldset>
                </FieldsContainer>
                <ActionsContainer>
                    <Button icon="md-checkmark"
                            iconPlacement="left"
                            onPress={handleSubmit(authenticate)}
                            submitting={submitting}>
                        Login
                    </Button>
                </ActionsContainer>
            </Form>
        );
    }
}

const validate = values => {
    const errors = {};
    values = values.toJS();
    errors.email = !values.email
        ? 'Email field is required'
        : !regexp.EMAIL.test(values.email)
                       ? 'Email format is invalid'
                       : undefined;
    errors.password = !values.password
        ? 'Password field is required'
        : values.password.length < 6
                          ? 'Password must be at least 6 characters long'
                          : undefined;
    return errors;
};

LoginForm.propTypes = {
    //onSubmit: PropTypes.func.isRequired, // redux-form included
};

function mapStateToProps(state) {
    return {
        //initialValues: state.get('auth').get('loginInfo'),
    };
}

function mapDispatchToProps(dispatch) {
    return {
        ...bindRoutineCreators({authenticate}, dispatch),
    };
}

LoginForm = reduxForm({form: 'login', validate: validate})(LoginForm);
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Any ideas?

[leoskyrocker]

What is rendering this ? Have you tried returning a simple view in this component to verify it is actually displayed:

render () {
  return (
    <View style={{flex: 1}}><Text>Hello World</Text></View>
  )
}

[markusguenther]

Sry I am currently not working much with react native and the most dependencies in this library are outdated. But don't have the time to upgrade this.