Tcomb-form-native: Layout question

[sibelius]

How can I display to text component one beside another?

is this possible?

[alvaromb]

Yes @sibeliusseraphini, with a custom template (credit card example):

/* @flow */

import React, { View } from 'react-native'

function creditCard (locals: Object) {
  return (
    <View>
      {locals.inputs.card_number}
      // Here you have this three fields in one line
      <View style={styles.expirationContainer}>
        <View style={[styles.expirationField, styles.margin]}>
          {locals.inputs.card_expire_year}
        </View>
        <View style={[styles.expirationField, styles.margin]}>
          {locals.inputs.card_expire_month}
        </View>
        <View style={styles.expirationField}>
          {locals.inputs.card_cvv2}
        </View>
      </View>
    </View>
  )
}

const styles = React.StyleSheet.create({
  expirationContainer: {
    flexDirection: 'row',
  },
  expirationField: {
    flex: 1,
  },
  margin: {
    paddingRight: 5,
  },
})

module.exports = creditCard

And in your options

options: {
  template: creditCard,
}

[alvaromb]

Please let me know if you need further info @sibeliusseraphini 👍

[sibelius]

thanks, I will try that

[Ajith128]

May I know how I can read the values from a custom template view added to tcomb-form. I have added a slider to show a range of values,

function sliderTemplate(locals) { return ( <View> <Slider minimumValue={0} locals={locals} decimal={locals.config.decimal ? locals.config.decimal : 0} maximumValue={locals.config.maxVal} step={locals.config.step} /> </View> ); }