HandleSubmit Redux Form in React Native doesn't work (No Values Print Out)

Question

I am using Redux Form to capture user info submission. I've connected Redux Form with the store and written the form according to the instructions, but when clicking the submit button, no values are passed through.

I do not usually ask on Stack Overflow so please excuse for my bad wording. I do not know how to articulate my problem.

I copied my code on to snack expo (link: https://snack.expo.io/S1_6f7dQV )

Here are my codes: Components/Form.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';

const renderField = ({ label, keyboardType, name }) => {
    return (
      <View>
        <Text>{label}</Text>
        <TextInput  keyboardType={keyboardType}
        >
        </TextInput>
    </View>
    );
};

const submit = values => { 
    alert(`here is the value ${JSON.stringify(values)}`)
}
const ContactComponent = props => {
    const { handleSubmit } = props;
    console.log('handle submit ...');
    console.log(handleSubmit);
    return (
        <View>
            <Text>Redux-form example</Text>
            <Field keyboardType="default" label="Username: " component={renderField} name="Username" />
            <Field keyboardType="email-address" label="Email: " component={renderField} name="Email" />
            <TouchableOpacity onPress={handleSubmit(submit)} style={{ margin: 10, alignItems: 'center' }}>
                <Text>Submit</Text>
            </TouchableOpacity>
        </View>
    );
}

const ContactForm = reduxForm({
    form: 'contact', // a unique identifier for this form
})(ContactComponent);

export default ContactForm;

Component/MainComponent.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import React, { Component } from 'react';
import { View, Icon} from 'native-base';

const MainNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
  // AddTransaction: { screen: AddTransaction },
  // TransactionList: { screen: TransactionList }
})

const Main = createAppContainer(MainNavigator);
export default Main;

Screen/HomeScreen.js

import React, {Component} from 'react';
import { Container, View, Text, Content, Button, Form } from 'native-base';
import ContactForm from '../components/Form.js';

class HomeScreen extends Component {

  static navigationOptions = { 
    title: 'Home',
  }

  render() {   
    return (
      <Container>
          <ContactForm/>
      </Container>
    );
  }
}

export default HomeScreen;

App.js

import React from 'react';
import { View, Text } from 'native-base';
import Main from './components/MainComponent';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createLogger } from 'redux-logger';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer, 
});
export const store = createStore(rootReducer)

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

Answer 1

Try including the input props to yout TextInput like below, as shown in the example here on ReduxForm's docs

const renderField = ({ label, keyboardType, name, input }) => {
    return (
      <View>
        <Text>{label}</Text>
        <TextInput  keyboardType={keyboardType} {...input}
        >
        </TextInput>
    </View>
    );
};