Comments (11)
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
}
}
}
},
}
}
from tcomb-form-native.
@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?
from tcomb-form-native.
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
};
from tcomb-form-native.
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...
})
}
}
};
from tcomb-form-native.
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,
from tcomb-form-native.
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
from tcomb-form-native.
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?
from tcomb-form-native.
@weixingsun in general for this kind of things I'd prefer to provide low level APIs and let people implement its own customised solutions
from tcomb-form-native.
Ok, that is good enough, thanks for your help!
from tcomb-form-native.
@weixingsun you can track the new feature here #168
from tcomb-form-native.
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.
from tcomb-form-native.
Related Issues (20)
- Contact us form ?
- Styling error fields
- Terms validation ?
- Keep entered values after error HOT 1
- how we set height to input box? HOT 1
- numberOfLines is not working HOT 1
- Changing the placeholder for datetimepicker from Tap here to select a date to Start Date for example
- Unable to resolve "tcomb-form.native" from "app\components\forms\testForm.js"
- I've got error message when I try expo start --web HOT 1
- componentWillReceiveProps
- TypeError: locals.value.toDateString is not a function when trying to use value prop HOT 1
- Need more control over opening and closing of iOS Select component
- Does tcomb-form-native support async verification?
- iOS 14: Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`
- custom stylesheets does not apply to optional field title
- Problem with submit form HOT 1
- how to add BUTTON IN BETWEEN the form fields
- Please delete
- react native t comb form ERROR Warning: Component "Textbox" contains the string ref "input". React.createRef() HOT 2
- WARNING: This library will no longer work with React Native after version 0.65 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tcomb-form-native.