ReduxForm vs tcomb-form for Native Development

Question

We used ReduxForm in our Web App and we are now trying to build a native app and it seems most of the guys are using tcomb-form.

ReduxForm can be used for native development. Not sure what's the biggest advantage of using tcomb-form.

I tried using it (Didn't explore all the advanced features yet) how ever once we define the schema the basic rendering of the controls is done for you. How ever if you want to customize how a control is displayed i am not sure whether tcomb-form supports it.

Ex:

Here in my Component's render() method:

let Form= tFormNative.form.Form;

        let options= {
            fields: {
            }
        };

        let username= {
            label: I18n.t('LoginForm.username'),
            maxLength: 12,
            editable: true,

        };

        let email = {
            label: I18n.t('LoginForm.email'),
            keyboardType: 'email-address',
            editable: true,

        };

        let password = {
            label: I18n.t('LoginForm.password'),
            maxLength: 12,
            secureTextEntry: true,
            editable: true,
        };

        let registerForm = tFormNative.struct({
            username: tFormNative.String,
            email: tFormNative.String,
            password: tFormNative.String,
            passwordReEnter: tFormNative.String,
        });

  return(
     <View style={styles.container}>
            <Form 
                style={styles.textInput}
                ref='form'
                type={registerForm}
                options={options}
            />
         </View>
  );

Now the Label and Control ( based on the type you provided in struct() ) are created.

How ever Lets say i want to use an Icon aling with the Label for each control i am not sure whether that is permitted.

Appreciate any inputs.

Thanks Sateesh

Answer 1

If you would like to customize the entire control you can go for a factory, I'll post an example of a Slider i use for number input. I have not tried ReduxForm but i do like tcomb-form a lot, and I don't see anything that should not be doable in terms of customization. Good luck to you!

import React from 'react';
import { View, Text, Slider } from 'react-native';
import t from 'tcomb-form-native';
import Strings from '../config/strings.js';

var Component = t.form.Component;

class TcombSlider extends Component {

    constructor(props) {
        super(props);
        var locals = super.getLocals();
    }

    getLocals() {
        var locals = super.getLocals();
        return locals;
    }

    getTemplate() {
        let self = this;
        return function (locals) {
            var sliderConfig = locals.config.slider; 
            var stylesheet = locals.stylesheet;
            var formGroupStyle = stylesheet.formGroup.normal;
            var controlLabelStyle = stylesheet.controlLabel.normal;
            var checkboxStyle = stylesheet.checkbox.normal;
            var helpBlockStyle = stylesheet.helpBlock.normal;
            var errorBlockStyle = stylesheet.errorBlock;

            if (locals.hasError) {
                formGroupStyle = stylesheet.formGroup.error;
                controlLabelStyle = stylesheet.controlLabel.error;
                checkboxStyle = stylesheet.checkbox.error;
                helpBlockStyle = stylesheet.helpBlock.error;
            }

            var label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;
            var help = locals.config.help ? <Text style={helpBlockStyle}>{locals.config.help}</Text> : null;
            var error = locals.hasError && locals.error ? <Text accessibilityLiveRegion="polite" style={[errorBlockStyle, {marginTop: 2}]}>{locals.error}</Text> : null;

            return (
                <View style={formGroupStyle}>
                  {label}
                  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', paddingRight: 15}}>
                    <Text>{locals.value}m</Text>
                  </View>  
                  <View style={{marginBottom: 5}}>
                    <Slider
                      minimumValue={sliderConfig.minimumValue}
                      maximumValue={sliderConfig.maximumValue}
                      step={sliderConfig.step}
                      value={locals.value}
                      onValueChange={(value) => self._onChange(locals, value)}/>
                  </View>
                  {help}
                  {error}
                </View>
            );
        }
    }

    _onChange(locals, val) {
        locals.onChange(val);
    }
}

export default TcombSlider

And use it like this:

const options = {
    fields: {
        search_range: {
            config: {
            slider: {
                maximumValue: 1000,
                minimumValue: 0,
                step: 5,
                disabled: false,
            },
         },
         factory: TcombSlider,
       },
       ...
   },
}

I'm posting this as an example because i had a hard time putting together my first factory.

Answer 2

I would leave this as a comment if I could, but my reputation isn't high enough.

You need to override your form's local template with a custom template which adds an Icon and TextInput for each field.
This gist shows how you can do this.