DEV Community

Cover image for Create a FormBuilder component in React Native (Part 7)
Vasile Stefirta 🇲🇩 ✈️ 🇺🇸
Vasile Stefirta 🇲🇩 ✈️ 🇺🇸

Posted on

Create a FormBuilder component in React Native (Part 7)

#react #reactnative #ios #javascript

This series contents:

Part 7: Add support for Boolean field type

Now that we verified that our FormBuilder worked perfectly fine while creating a new form, let's see how we can add support for a new field type - a Boolean field in our case.

Create a new FormBooleanInput component

Let's start by creating a new custom component which will render out a Boolean field for us. We'll call it FormBooleanInput:

import React from 'react';
import PropTypes from 'prop-types';
import {
    View, Switch, Text, StyleSheet,
} from 'react-native';

/**
 * A stateless function component which renders a Boolean input (Switch).
 *
 * @param {obj} props
 */
const FormBooleanInput = (props) => {
    const { labelText, ...inputProps } = props;

    return (
        <View style={styles.switchWrapper}>
            <Switch {...inputProps} />
            {labelText && <Text style={styles.label}>{labelText}</Text>}
        </View>
    );
};

FormBooleanInput.propTypes = {
    labelText: PropTypes.string,
};

FormBooleanInput.defaultProps = {
    labelText: null,
};

const styles = StyleSheet.create({
    switchWrapper: {
        flex: 1,
        marginBottom: 15,
        paddingHorizontal: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    label: {
        flex: 1,
        color: '#FFF',
        marginLeft: 10,
    },
});

export default FormBooleanInput;
Enter fullscreen mode Exit fullscreen mode

As you can see it's a pretty basic component which renders out a Switch React Native component along with a label (if provided).

Add a new field to the Sign Up form

Let's use the Sign Up form we created in our last post and add a new field to it, which hypothetically will allow users to subscribe to a mailing list. The field's "definition" would look like this:

[
    {
        name: 'subscribe',
        label: 'Subscribe me to weekly news from Tech world.',
        type: 'boolean',
        defaultValue: true,
    },
]
Enter fullscreen mode Exit fullscreen mode

You've probably noticed the new defaultValue field property. We'll use it to allow us having default values for any of our form fields. See the next section for details about how we'll be implementing this logic.

Add support for the boolean field within the FormBuilder component

Here we'll need to work on a couple of changes:

  • Allow form fields to have predefined default values by using the defaultValue field's property. Let's create a helper function which will detect for us what should be the default value for a given field. 
/**
 * Determine what should be the default value
 * for a given field.
 */
getFormFieldDefaultValue = ({ defaultValue, type }) => {
    if (defaultValue !== undefined) {
        return defaultValue;
    }

    switch (type) {
    case 'boolean':
        return false;
    default:
        return '';
    }
};
Enter fullscreen mode Exit fullscreen mode

Now we can make use of this function within our constructor() like so:

const formFieldNames = formFields.reduce((obj, field) => {
    obj[field.name] = this.getFormFieldDefaultValue(field);
    return obj;
}, {});
Enter fullscreen mode Exit fullscreen mode
  • Update our hasValidFormData() helper function to ignore boolean field types simply because this type of fields will always have a value (either true or false). The updated version looks like this: 
hasValidFormData = () => {
    const formFields = this.getFormFields();
    const isFilled = formFields
        // filter out Boolean fields because they will always have a value
        .filter(field => field.type !== 'boolean')
        // check if all remaining fields have been filled out
        .every(field => !!this.state[field.name]);

    return isFilled;
};
Enter fullscreen mode Exit fullscreen mode
  • Update our hasDirtyFormData() helper function and use a different approach for detecting if a boolean field changed its value or not, like so: 
hasDirtyFormData = () => {
    const formFields = this.getFormFields();
    const isDirty = formFields.some((field) => {
        switch (field.type) {
        case 'boolean':
            // because Boolean fields will have a default value,
            // we need to check if the current value is not the default one
            return this.state[field.name] !== this.getFormFieldDefaultValue(field);

        default:
            return !!this.state[field.name];
        }
    });

    return isDirty;
};
Enter fullscreen mode Exit fullscreen mode
  • Create a new renderBooleanInput() helper function which will render out the FormBooleanInput component for us. The function it's not very different from the existing renderTextInput(). Probably the main difference is using onValueChange prop instead of onChangeText. 
renderBooleanInput = ({ name, label, inputProps }) => (
    <FormBooleanInput
        {...inputProps}
        value={this.state[name]}
        onValueChange={(value) => {
            this.setState({ [name]: value });
        }}
        labelText={label}
        key={name}
    />
);
Enter fullscreen mode Exit fullscreen mode
  • And lastly, let's update our component's render() function and render out boolean fields (if any were provided). 
{formFieldsRows.map((formFieldsRow, i) => (
    <View style={styles.row} key={`r-${i}`}>
        {formFieldsRow.map((field) => {
            switch (field.type) {
            case 'boolean':
                return this.renderBooleanInput(field);

            default:
                return this.renderTextInput(field);
            }
        })}
    </View>
))}
Enter fullscreen mode Exit fullscreen mode

That's it! Let's take a look at how the form works at this point:

Sign Up Form V2

For a full list of changes, check out this commit on GitHub.

That's it my friends! 🙂🚀🚢 I think we've covered enough content to give you an idea on how to build your own FormBuilder component from scratch. 🏗️ Even though I'm going finish this series here, there are still so many things we can apply to this helper component (e.g. support for optional fields, support for new field types, etc.), but let's consider that as homework for you 👨‍💻👩‍💻.

Bonus links 🎁

Here are some good resources I used to get started with React Native:

Packages:

App Icons + Splash Screens setup (that's always a tricky part so the links below definitely helped me):

Happy coding! 👨‍💻👩‍💻👍

Top comments (0)

Read next

notarena profile image

Create Toggle Button in HTML CSS & JavaScript

Notarena -

sunnyss profile image

Java Programming

sunny -

sonaykara profile image

Why Virtual DOM: Render and Performance

Sonay Kara -

sarthak_niranjan_3bd6cb5f profile image

Understanding dangerouslySetInnerHTML in React: A Complete Guide

Sarthak Niranjan -