Home Ask Login Register

Developers Planet

Your answer is one click away!

ckim16 May 2017

how to handle Form's onSubmit function in nativebase

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', f        

Answers


Sricharan Kambhammettu May 2017

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

Post Status

Asked in May 2017
Viewed 1,009 times
Voted 4
Answered 0 times

Search




Leave an answer


Quote of the day: live life