Tcomb-form-native: All my values are null using template

Created on 7 Apr 2017  路  1Comment  路  Source: gcanti/tcomb-form-native

Version

Versions:

  • tcomb-form-native v0.6.7
  • react-native v0.41.2

Expected behaviour

When I submit the form, I should get some values from my input fields

Actual behaviour

Everything is logging out null

Steps to reproduce

  1. Wrap a component in a custom component, and use that as a template
  2. Submit the form

I'm wrapping a component from a library into my CustomTextField to use as the template for the form:

import React, {Component, PropTypes} from 'react';
import {TextInput} from 'react-native';
import TextField from 'react-native-md-textinput';

const CustomTextField = (locals) => (
    <TextField
      label={locals.label}
      value={locals.value}
    />
)

export default CustomTextField;

So far my form setup is as such (I set everything to maybe for now just to see what is getting passed through easier):

const Address = t.struct({
  email: t.maybe(t.String),
  firstName: t.maybe(t.String),
  lastName: t.maybe(t.String),
  addressOne: t.maybe(t.String),
  addressTwo: t.maybe(t.String),
  city: t.maybe(t.String),
  state: t.maybe(t.String),
  zip: t.maybe(t.String),
  country: t.maybe(t.String)
})

var options = {
  fields: {
    email: {
      template: TextField
    },
    firstName: {
      template: TextField
    },
    lastName: {
      template: TextField
    },
    addressOne: {
      template: TextField
    },
    addressTwo: {
      template: TextField
    },
    city: {
      template: TextField
    },
    state: {
      template: TextField
    },
    zip: {
      template: TextField
    },
    country: {
      template: TextField
    }
  }
};

And in the render function:

<Form
    ref="form"
    type={Address}
    options={options}
/>

Am I missing like a very basic step or something? I was trying to look at all the issues I can to figure out this situation. I know maybe wrapping another library's component in a custom component could potentially through it off, but i also tried just using the TextInput from react native and I can't even get that to render for some reason. Any help or thoughts appreciated!

Most helpful comment

I had this same issue until now. After reviewing the tcomb-form-native/lib/templates/bootstrap/textbox.js I noticed I needed the following in my TextInput

onChangeText={(value) => locals.onChange(value)}

I didn't have to add value={locals.value}

Now I officially love this library :)

>All comments

I had this same issue until now. After reviewing the tcomb-form-native/lib/templates/bootstrap/textbox.js I noticed I needed the following in my TextInput

onChangeText={(value) => locals.onChange(value)}

I didn't have to add value={locals.value}

Now I officially love this library :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pgmemk picture pgmemk  路  4Comments

semirturgay picture semirturgay  路  4Comments

abdelghafourzguindou picture abdelghafourzguindou  路  4Comments

timdoes picture timdoes  路  4Comments

albertogugliotta picture albertogugliotta  路  3Comments