Create a FormBuilder component in React Native (Part 5)
Tags: react, reactnative, ios, javascript
Published: 2019-03-18 01:07:09

---
title: Create a FormBuilder component in React Native (Part 5)
published: true
description: 
tags: react, react-native, ios, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/68ghwpyr8mvgumn2edca.jpeg
series: Create a FormBuilder component in React Native
---

This series contents:
- [Part 1: Create a new React Native app](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-intro--part-1-1m84)
- [Part 2: Create a simple Salary Calculator Form](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-2-2dec)
- [Part 3: Create custom form input and button components](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-3-1aib)
- [Part 4: Work on the `FormBuilder` component](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-4-5gc3)
- Part 5: Enable/disable form buttons on-the-fly (current)
- [Part 6: Create a Sign Up form](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-6-2ohd)
- [Part 7: Add support for Boolean field type](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-7-32c7)

# Part 5: Enable/disable form buttons on-the-fly

Wouldn't be nice to have our form buttons enabled only when we need? For example:
- disable the `Calculate` button by default, and only enable it when all form fields have been filled out;
- disable the `Reset` button by default as well, and only enable it when at least one form field has been filled out.

### Modify our `FormButton` component 

Let's take care of that. First of all, we need to modify our `FormButton` component and allow it to accept a boolean `disabled` prop which will use to enable or disable our button. The modified version looks like this:

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

/**
 * A stateless function component which renders a button.
 *
 * @param {obj} props
 */
const FormButton = (props) => {
    const { children, onPress, disabled } = props;

    return (
        <TouchableOpacity
            style={[styles.button, disabled && styles.buttonDisabled]}
            onPress={onPress}
            disabled={disabled}
        >
            <Text style={styles.buttonText}>{children}</Text>
        </TouchableOpacity>
    );
};

FormButton.propTypes = {
    onPress: PropTypes.func,
    children: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
};

FormButton.defaultProps = {
    onPress: f => f,
    disabled: false,
};

const styles = StyleSheet.create({
    button: {
        backgroundColor: '#FD6592',
        borderRadius: 3,
        height: 40,
        marginHorizontal: 10,
        marginBottom: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonText: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: 16,
    },
    buttonDisabled: {
        opacity: 0.5,
    },
});

export default FormButton;

```

`TouchableOpacity` accepts a boolean `disabled` prop and when it's `true`, it disables all interactions for this component. This is exactly what we need with one small exception: visually the button looks the same in both enabled and disabled states. We can fix that by conditionally adding some styles when the `disabled` prop is `true` like so (please note that I have replaced some existing code with comments just to highlight the changes we've made):

```jsx
<TouchableOpacity
   style={[styles.button, disabled && styles.buttonDisabled]}
   {/* ... */}

const styles = StyleSheet.create({
    // ...
    buttonDisabled: {
        opacity: 0.5,
    },
});
```

### Enable/disable the `Calculate` button

As we mentioned above, we want our `Calculate` button to be enabled only when all form fields have been filled out. Well, we already have our `hasValidFormData` helper function which can tell us exactly that. We can use it like so:

```jsx
<FormButton
    onPress={this.attemptFormSubmission}
    disabled={!this.hasValidFormData()}
>
    {submitBtnTitle}
</FormButton>
```

### Enable/disable the `Reset` button

This button needs to be enabled when at least one form field has been filled out. Let's write a little helper function which can help us detect that:

```javascript
/**
 * Check if at least one field has been filled out.
 */
hasDirtyFormData = () => {
    const formFields = this.getFormFields();
    const isDirty = formFields.some(field => !!this.state[field.name]);
    return isDirty;
};
```

Note how we're making use of the JavaScript Array [some()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) method - very handy for our use-case.

Now we're ready to enable and disable the `Reset` button on-the-fly like so:

```jsx
<FormButton onPress={this.resetForm} disabled={!this.hasDirtyFormData()}>
    Reset
</FormButton>
```

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

![Salary Calculator V3](https://thepracticaldev.s3.amazonaws.com/i/6avr8hw11r6a3l9yxyci.gif "Salary Calculator V3")

For a full list of changes, check out this [commit on GitHub](https://github.com/vasilestefirta/react-native-form-builder/commit/c3fbd83a6d0946d2d880b10f5e7b9fcba3e1036f).

---

Great job if you made it so far!👏 But why stop here? 🤓 Let's try our component in action one more time and use it to create a Sign Up form in [Part 6](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-6-2ohd) of this series 👉.