I want to use redux-form in nativebase but it does not work quite as same as using in web. I don't think my onSubmit
callback is not getting invoked and I am not sure why.
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import {
Container,
Content,
Item,
Input,
Button,
Form,
Label,
Text,
Icon
} from 'native-base';
import * as actions from '../actions';
class Signin extends Component {
handleFormSubmit({ username, password }) {
this.props.userSignIn({ username, password });
}
renderUsername() {
return (
<Item floatingLabel>
<Icon name="ios-person" />
<Label>Username</Label>
<Input autoCorrect={false} autoCapitalize="none"/>
</Item>
);
}
renderPassword() {
return (
<Item floatingLabel>
<Icon name="ios-lock" />
<Label>Password</Label>
<Input secureTextEntry={true} />
</Item>
);
}
renderLoginBtn() {
return (
<Container style={styles.button}>
<Content>
<Button primary action="submit">
<Text>Login</Text>
</Button>
</Content>
</Container>
);
}
render() {
const { handleSubmit, fields: { username, password } } = this.props;
return (
<Container style={styles.container}>
<Content>
<Form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<Field name="username" component={this.renderUsername} />
<Field name="password" component={this.renderPassword} />
{this.renderLoginBtn()}
</Form>
</Content>
</Container>
);
}
}
function mapStateToProps(state) {
return {
errorMsg: state.auth.error
};
}
export default reduxForm({form: 'signin', fields: ['username', 'password']}, mapStateToProps, actions)(Signin);
I cannot find anywhere else how to use onSubmit
callback with nativebase Form.
If you look at native base documentation its says.
"Note: Form in native base is just a wrapper around the inputs and hence has no onSubmit function"
You should define you own button or touchablehighlight and use onPress callback
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With