How to change the height of a multiline text input?

[alvaromb]

I'm struggling to change the height of a multiline input inside a form. Do I have to define an entire stylesheet for that element just for changing one property?

[gcanti]

Do I have to define an entire stylesheet for that element just for changing one property?

No, you can override the stylesheet locally:

https://github.com/gcanti/tcomb-form-native#stylesheets

and in t.form.Form.stylesheet.textbox you find the default stylesheet for textboxes, split by

• normal
• error
• notEditable

(see the file https://github.com/gcanti/tcomb-form-native/blob/master/lib/stylesheets/bootstrap.js#L62 for the complete code)

Example:

var Foo = t.struct({
  description: t.Str
});

var options = {
  fields: {
    description: {
      multiline: true,
      stylesheet: Object.assign({}, t.form.Form.stylesheet.textbox, {
        ...my overrides here...
      })
    }
  }
};

[alvaromb]

I was doing exactly that but using underscore's extend and with that I was also modifying the default stylesheet. This is how I finally managed to do it (using es6 property spread):

options: {
  fields: {
   description: {
      multiline: true,
        stylesheet: {
          ...Form.stylesheet,
          textbox: {
            ...Form.stylesheet.textbox,
            normal: {
              ...Form.stylesheet.textbox.normal,
              height: 100
            },
            error: {
              ...Form.stylesheet.textbox.error,
              height: 100
          }
        }
      }
    },
  }
}

[mintotsai]

For future reference, here is how I solved this:

var immutableMap = Immutable.fromJS(t.form.Form.stylesheet);
var immutableMerge = immutableMap.mergeDeep({textbox: {normal: {height: 100}}})
var tcombStyle = immutableMerge.toJS();
options.fields[item.name] = {
                                        label: [item.label],
                                        multiline: true,
                                        numberOfLines: 5,
                                        stylesheet: tcombStyle
                                      };

[weixingsun]

Hi, looks like all above are fixed height,

I am trying to implement an auto-grow TextInput like the official docs:
https://facebook.github.io/react-native/docs/textinput.html
But I found the onChange event was used to track for text only,
Is there an existing way to access the nativeEvent object from tcomb-form like this: "event.nativeEvent.contentSize.height" ?
Please let me know if you have any suggestions, thanks! I had tried several times but failed,

[gcanti]

But I found the onChange event was used to track for text only

@weixingsun looks like we use onChangeText(text):

https://github.com/gcanti/tcomb-form-native/blob/master/lib/templates/bootstrap/textbox.js#L64

Is there an existing way to access the nativeEvent object from tcomb-form

we could add an onChange(event) handler to TextInput

[weixingsun]

Thanks for your quick answer, it will be really helpful.
Also, I am thinking that, the initial idea is to make the textbox auto-growable,
I think it will be much easier for a developer if there is a way to create a prop, like "auto-grow=true"
what do you think?

[gcanti]

@weixingsun in general for this kind of things I'd prefer to provide low level APIs and let people implement its own customised solutions

[weixingsun]

Ok, that is good enough, thanks for your help!

[gcanti]

@weixingsun you can track the new feature here #168

[weixingsun]

@gcanti thanks for your help, do you know if there is any method to show multiline textbox for default value? My detail content field show only one line, any idea?

[atgitdeepak]

I was doing exactly that but using underscore's extend and with that I was also modifying the default stylesheet. This is how I finally managed to do it (using es6 property spread):

options: {
  fields: {
   description: {
      multiline: true,
        stylesheet: {
          ...Form.stylesheet,
          textbox: {
            ...Form.stylesheet.textbox,
            normal: {
              ...Form.stylesheet.textbox.normal,
              height: 100
            },
            error: {
              ...Form.stylesheet.textbox.error,
              height: 100
          }
        }
      }
    },
  }
}

The solution worked in terms of designing but when I top on the field to write something, It takes the cursor to the middle of the box, unable to start writing from top left corner.