CODEWITHSUNDEEP
react-native
Pranab V V
Pranab V V

Reputation: 1446

'invariant violation :element type is invalid' issue in react-native

I am using redux form in my register component and trying to pass it into redux-store.

app.js

import React, { Component } from 'react';
import WelcomePage from './components/welcomePage';
import Register from './components/register';
import { StackNavigator } from 'react-navigation'
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

    import { Provider,connect } from 'react-redux';
    import  store  from './store/store';
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });
    
    type Props = {};
    
    
    const mapStateToProps=state => {
        return state;
    }
    const mapDispatchToProps=dispatch => {
        return {}
    }
    
    const handleSubmit=values=> {
      console.log(values);
    }
    const Navigationapp=StackNavigator({welcome:{screen:WelcomePage},register:{screen:props=><Register {...props} handleSubmit={handleSubmit} />}});
    const Container = connect(mapStateToProps,mapDispatchToProps)(Navigationapp);
    export default class App extends Component{
        render(){
            return (<Provider store={store}>
                         <Container/>
                </Provider>)
        }
    };

register.js

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';

const renderField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',height:50,alignItems:'center' }}>
                <Text>
                    <h4>{label}</h4>
                </Text>
                <Input />
            </View>
    )
}
const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:40,justifyContent:'flex-start'}}>

                <Field label="Username" component={renderField} name="username" />
                <Button title='SUBMIT' onPress={handleSubmit} />

            </View>
    )
}
const Register=reduxForm({
    form:'register',
})(RegisterForm);
export default Register;

store.js

import { createStore,combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer=combineReducers({
    form:formReducer
})
const store=createStore(rootReducer);
export default store;

when I navigate into the register component it shows following error.

enter image description here

I still failed to confirm whether the issue is in my register component or in my app.js.Please help me to solve this issue.

Upvotes: 0

Views: 405

Answers (1)

Dyo
Dyo

Reputation: 4464

The Input component doesn't exist in react-native-elements, just remove it from the import statement and from renderField :

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text } from 'react-native-elements'; // Removed 'Input' import
import { View,Button } from 'react-native';

const renderField=({label,keyboardType,name}) => {
    return(
            <View style={{flexDirection:'row',height:50,alignItems:'center' }}>
                <Text>
                    <h4>{label}</h4>
                </Text> // Removed <Input />
            </View>
    )
}

Edit: You may want to use <FormInput /> instead

Upvotes: 1

Related Questions