Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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', fields: ['username', 'password']}, mapStateToProps, actions)(Signin);

I cannot find anywhere else how to use onSubmit callback with nativebase Form.

like image 349
ckim16 Avatar asked Oct 19 '25 22:10

ckim16


1 Answers

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

like image 97
Sricharan Kambhammettu Avatar answered Oct 22 '25 18:10

Sricharan Kambhammettu