Tcomb-form-native: Country search

[jjdp]

Is making a country search possible with this?

[alvaromb]

Sure! you would need to drop a custom factory. Something like this

/* @flow */

import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  TouchableNativeFeedback,
  StyleSheet,
  Platform
} from 'react-native'
import t from 'tcomb-form-native'

const Touchable = (Platform.OS === 'ios') ? TouchableOpacity : TouchableNativeFeedback

class ButtonAutocompleteFactory extends t.form.Component {
  getLocals () {
    let locals = super.getLocals()
    locals.onPress = this.props.options.onPress
    return locals
  }

  getTemplate () {
    return function (locals: Object) {
      const stylesheet = locals.stylesheet
      let formGroupStyle = stylesheet.formGroup.normal
      let controlLabelStyle = stylesheet.controlLabel.normal
      let helpBlockStyle = stylesheet.helpBlock.normal
      let textboxStyle = stylesheet.textbox.normal
      const errorBlockStyle = stylesheet.errorBlock

      if (locals.hasError) {
        formGroupStyle = stylesheet.formGroup.error
        controlLabelStyle = stylesheet.controlLabel.error
        helpBlockStyle = stylesheet.helpBlock.error
        textboxStyle = stylesheet.textbox.error
      }

      const label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null
      const help = locals.help ? <Text style={helpBlockStyle}>{locals.help}</Text> : null
      const error = locals.hasError && locals.error ? <Text accessibilityLiveRegion='polite' style={errorBlockStyle}>{locals.error}</Text> : null

      const value: string = (locals.value) ? locals.value.text : '-'

      return (
        <View>
          {label}
          <Touchable
            style={[formGroupStyle, styles.touchable]}
            onPress={locals.onPress}>
            <Text
              style={[textboxStyle, {paddingTop: 6}]}>
              {value}
            </Text>
            {help}
            {error}
          </Touchable>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  touchable: {
    height: 44,
  },
})

export default ButtonAutocompleteFactory

The onPress event should open another window that would let you choose the country and when the country is selected, you should update your form value.

[jjdp]

how does this work with the getValue() API validation since this is just a text? or any type of validation? @alvaromb