DEV Community: Vasile Stefirta 🇲🇩 ✈️ 🇺🇸

Dev Notes #1 - Upgrade to Composer version 2

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Sat, 02 Jan 2021 23:54:09 +0000

Recently I have upgraded to Composer version 2, as well as upgraded all globally installed packages. Here's a list of commands I have used:

composer self-update --2 - Update composer to version 2. To read more about Composer 2 benefits, read the Composer 2.0 announcement. Read more about self-update command here.

composer -V - check version

$ composer -V
Composer version 2.0.8 2020-12-03 17:20:38

composer global show - Shows information about globally installed packages. Read more about the show command here.

$ composer global show
friendsofphp/php-cs-fixer          v2.17.3 A tool to automatically fix PHP code style
laravel/installer                  v4.1.1  Laravel application installer.
php-cs-fixer/diff                  v1.3.1  sebastian/diff v2 backport support for PHP5.6
squizlabs/php_codesniffer          3.5.8   PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards.

composer global outdated - Shows a list of globally installed packages that have updates available, including their latest version. Read more about the outdated command here.
```
$ composer global outdated
php-cs-fixer/diff v1.3.1 v2.0.2 sebastian/diff v2 backport support for PHP5.6
```
composer global update - Upgrades your global dependencies to the latest version according to composer.json, and updates the composer.lock file. Read more about the update command here.
composer global update laravel/installer - Upgrades a given globally installed package to the latest version according to composer.json, and updates the composer.lock file.

Create a FormBuilder component in React Native (Part 7)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:07:29 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type (current)

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;

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,
    },
]

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 '';
    }
};

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;
}, {});

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;
};

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;
};

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}
    />
);

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>
))}

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

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:

https://reactjs.org/docs/getting-started.html (you'll have to understand how React works before diving into React Native)
https://redux.js.org/basics (optional if you're just getting started with React Native, but when you'll be building more complex apps, you may need to reach out for Redux)
https://facebook.github.io/react-native/
http://www.reactnativeexpress.com/

Packages:

https://reactnavigation.org (use this package when you want to navigate between screens or create some sort of tabbed application. It's very well documented and I had no issues using it.)
https://github.com/react-native-community (an awesome organization which created a lot of great packages for the community)
https://github.com/zo0r/react-native-push-notification
https://github.com/invertase/react-native-firebase

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

Happy coding! 👨‍💻👩‍💻👍

Create a FormBuilder component in React Native (Part 6)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:07:20 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form (current)
Part 7: Add support for Boolean field type

Part 6: Create a Sign Up form

Now that we have our FormBuilder helper component ready, we can try it in action once more and create another form. As an example, let's assume we need a basic Sign Up form for our mobile app. Let's create a new SignUp.js file within the root of our project with the following content:

import React, { Component } from 'react';
import {
    StyleSheet, KeyboardAvoidingView, SafeAreaView, Text, Alert,
} from 'react-native';

import FormBuilder from './js/components/FormBuilder';

export default class SignUp extends Component {
    getFormFields = () => {
        const formFields = [
            [
                {
                    name: 'firstName',
                    label: 'First Name',
                    type: 'text',
                    inputProps: {
                        autoCorrect: false,
                    },
                },
                {
                    name: 'lastName',
                    label: 'Last Name',
                    type: 'text',
                    inputProps: {
                        autoCorrect: false,
                    },
                },
            ],
            [
                {
                    name: 'email',
                    label: 'Email',
                    type: 'text',
                    inputProps: {
                        autoCorrect: false,
                        autoCapitalize: 'none',
                        keyboardType: 'email-address',
                    },
                },
            ],
            [
                {
                    name: 'skills',
                    label: 'Skills',
                    type: 'text',
                    inputProps: {
                        autoCorrect: false,
                        multiline: true,
                        numberOfLines: 4,
                        blurOnSubmit: false,
                    },
                },
            ],
            [
                {
                    name: 'password',
                    label: 'Password',
                    type: 'text',
                    inputProps: {
                        secureTextEntry: true,
                    },
                },
            ],
        ];

        return formFields;
    };

    /**
     * Grab user's input data.
     */
    handleSubmit = (state) => {
        const {
            firstName, lastName, email, skills, password,
        } = state;

        Alert.alert(
            'Your info',
            `First Name: ${firstName}\n Last Name: ${lastName}\n Email: ${email}\n Skills: ${skills} \n Password: ${password}`,
        );
    };

    render() {
        return (
            <SafeAreaView style={styles.safeArea}>
                <KeyboardAvoidingView behavior="padding" style={styles.container}>
                    <Text style={styles.screenTitle}>Sign Up</Text>
                    <FormBuilder
                        formFieldsRows={this.getFormFields()}
                        handleSubmit={this.handleSubmit}
                        submitBtnTitle="Sign Up"
                    />
                </KeyboardAvoidingView>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: '#3F4EA5',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10,
        backgroundColor: '#3F4EA5',
    },
    screenTitle: {
        fontSize: 35,
        textAlign: 'center',
        margin: 10,
        color: '#FFF',
    },
});

As you can see we're defining our form fields within getFormFields() which are the following:

First Name
Last Name
Email
Skills
Password

Because we have introduced the idea of having form rows, we are able to control the form layout and place First Name and Last Name in the same row next to each other.

Also, the fact that we can provide default React Native props to our form inputs/controls via the inputProps object property, we are able to:

mask the Password field's value using the secureTextEntry prop;
have the Skills field be a multiline text input (same as an HTML textarea) by using the multiline and numberOfLines props.

The multiline prop should work out-of-the-box but from a UI perspective, our Skills field will look the same as a one-line regular text input. We can fix that by conditionally adding some styles to our custom FormTextInput component when the multiline prop is true like so (please note that I have replaced some existing code with comments just to highlight the changes we've made):

// ...
class FormTextInput extends React.Component {
    render() {
        const { labelText, multiline, ...inputProps } = this.props;

        return (
            <View style={styles.inputWrapper}>
                {/* ... */}
                <TextInput
                    style={[styles.textInput, multiline && styles.textarea]}
                    blurOnSubmit
                    {...inputProps}
                    multiline={multiline}
                />
            </View>
        );
    }
}

FormTextInput.propTypes = {
    // ...
    multiline: PropTypes.bool,
};

FormTextInput.defaultProps = {
    // ...
    multiline: false,
};

const styles = StyleSheet.create({
    // ...
    textarea: {
        height: 80,
    },
});

export default FormTextInput;

Now it's time to show our new form when the app loads. For that, we need to modify our index.js file and instruct the app to use our SignUp component as the first screen instead of App. We'll also add a flag here called showCalculatorForm which we can set to true if we want the Calculator form to show up, or to false - if we want to see the Sign Up form. Here's the modified version of index.js:

import { AppRegistry } from 'react-native';
import App from './App';
import SignUp from './SignUp';
import { name as appName } from './app.json';

// NOTE: set this flag to `true` if you want to see the Salary Calculator form
const showCalculatorForm = false;

AppRegistry.registerComponent(appName, () => (showCalculatorForm ? App : SignUp));

That's it! Run the app again and you should see the following:

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

Awesome, that looks great! 👏 🔥 BUT, what about supporting some other field types beside regular text inputs? 🤔 🤓 Well, check out Part 7 where we'll add support for a new Boolean field type 👉.

Create a FormBuilder component in React Native (Part 5)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:07:09 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly (current)
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type

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:

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):

<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:

<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:

/**
 * 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() method - very handy for our use-case.

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

<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:

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

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 of this series 👉.

Create a FormBuilder component in React Native (Part 4)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:07:03 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component (current)
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type

Part 4: Work on the `FormBuilder` component

We have reached the point where we have a fully functional form. Now let's try to build out a separate component which can render that form for us. We'll just need to instruct it what fields to render out and how should it handle the form submission.

Define the form's configuration

Let's start by generating a JavaScript array which will be our FormBuilder's component configuration. In our App.js file we'll define a class property as an arrow function which returns our desired configuration like so:

getFormFields = () => {
    const inputProps = {
        placeholder: '0',
        autoCapitalize: 'none',
        autoCorrect: false,
        keyboardType: 'numeric',
        returnKeyType: 'done',
    };

    const formFields = [
        [
            {
                name: 'hourlyRate',
                label: 'Hourly Rate',
                type: 'text',
                inputProps,
            },
            {
                name: 'hoursPerWeek',
                label: 'Hours / Week',
                type: 'text',
                inputProps,
            },
        ],
        [
            {
                name: 'daysPerWeek',
                label: 'Days / Week',
                type: 'text',
                inputProps,
            },
        ],
    ];

    return formFields;
};

Basically, our configuration is a list of rows with objects that describe each form field to be rendered. Why do we need those rows? Simply to allow us to control the form's layout. Each form field within a row will be rendered inline, and then a new row will start from a new line. In our example, hourlyRate and hoursPerWeek will be rendered inline, but daysPerWeek will be rendered in a new line and will take the full width of the row.

Modify our `handleSubmit` class property

We'll make a couple of changes to our function that handles the form submission like so:

don't use the App.js component's state anymore. Because our FormBuilder component will take care of collecting data from our form fields, we don't need a local state anymore in our App.js component. Instead, we'll have a local state within our FormBuilder component, and that state will be passed to our handleSubmit function;
remove validation for required fields. We'll delegate that job to our FormBuilder component as well;
add support for our new daysPerWeek form field (which wasn't used in our previous blog posts);
include weeklyIncome as part of the result.

The modified version should look like this:

handleSubmit = (state) => {
    // using Javascript object destructuring to
    // get user's input data from the state.
    const { hourlyRate, hoursPerWeek, daysPerWeek } = state;

    const weeksPerYear = 52;
    const hoursPerDay = Math.ceil(parseFloat(hoursPerWeek) / parseFloat(daysPerWeek));
    const weeklyIncome = Math.abs(
        parseFloat(hourlyRate) * hoursPerDay * parseFloat(daysPerWeek),
    );
    const annualIncome = Math.abs(
        parseFloat(hourlyRate) * parseFloat(hoursPerWeek) * weeksPerYear,
    );

    // show results
    Alert.alert(
        'Results',
        `Weekly Income: $${weeklyIncome}, \n Annual Income: $${annualIncome}`,
    );
};

Modify our `render()` function

Let's modify our render() function by removing all of the form inputs and buttons, and then use the FormBuilder component instead (which we'll create in just a just a moment).

render() {
    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <Text style={styles.screenTitle}>Salary Calculator</Text>
            <FormBuilder
                formFieldsRows={this.getFormFields()}
                handleSubmit={this.handleSubmit}
                submitBtnTitle="Calculate"
            />
        </KeyboardAvoidingView>
    );
}

As you can see our FormBuilder component accepts 3 props:

formFieldsRows - our desired list of form fields;
handleSubmit - the function to be run when the user submits the form;
submitBtnTitle - the submit button's title. We'll make this optional and have a default value within the form component itself.

Create the `FormBuilder` component

The time has come! 😜🎉 Let's create our helper component 🏁. For now, we'll take a look at how the final code looks like, and then we'll walk through it and talk about functionality. Ladies and gentlemen, may I present you the 1st version of our FormBuilder 🎆🚀(I'm sorry, I just got too excited here for a second 😊):

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

import FormTextInput from './FormTextInput';
import FormButton from './FormButton';

/**
 * A component which renders a form based on a given list of fields.
 */
class FormBuilder extends React.Component {
    /* eslint-disable no-param-reassign */
    constructor(props) {
        super(props);

        const formFields = this.getFormFields();

        // dynamically construct our initial state by using
        // each form field's name as an object property.
        const formFieldNames = formFields.reduce((obj, field) => {
            obj[field.name] = '';
            return obj;
        }, {});

        // define the initial state, so we can use it later on
        // when we'll need to reset the form
        this.initialState = {
            ...formFieldNames,
        };

        this.state = this.initialState;
    }
    /* eslint-enable no-param-reassign */

    /**
     * Extract our form fields from each row
     * and compose one big list of field objects.
     */
    getFormFields = () => {
        const { formFieldsRows } = this.props;
        const formFields = [];

        formFieldsRows.forEach((formFieldsRow) => {
            formFields.push(...formFieldsRow);
        });

        return formFields;
    };

    /**
     * Check if all fields have been filled out.
     */
    /* eslint-disable react/destructuring-assignment */
    hasValidFormData = () => {
        const formFields = this.getFormFields();
        const isFilled = formFields.every(field => !!this.state[field.name]);
        return isFilled;
    };
    /* eslint-enable react/destructuring-assignment */

    /**
     * Attempt to submit the form if all fields have been
     * properly filled out.
     */
    attemptFormSubmission = () => {
        const { handleSubmit } = this.props;

        if (!this.hasValidFormData()) {
            return Alert.alert('Input error', 'Please input all required fields.');
        }

        return handleSubmit(this.state);
    };

    /**
     * Reset the form and hide the keyboard.
     */
    resetForm = () => {
        Keyboard.dismiss();
        this.setState(this.initialState);
    };

    /* eslint-disable react/destructuring-assignment */
    renderTextInput = ({ name, label, inputProps }) => (
        <FormTextInput
            {...inputProps}
            value={this.state[name].toString()}
            onChangeText={(value) => {
                this.setState({ [name]: value });
            }}
            labelText={label}
            key={name}
        />
    );
    /* eslint-enable react/destructuring-assignment */

    render() {
        const { submitBtnTitle, formFieldsRows } = this.props;

        return (
            <View>
                {/* eslint-disable react/no-array-index-key */}
                {formFieldsRows.map((formFieldsRow, i) => (
                    <View style={styles.row} key={`r-${i}`}>
                        {formFieldsRow.map(field => this.renderTextInput(field))}
                    </View>
                ))}
                {/* eslint-enable react/no-array-index-key */}

                <FormButton onPress={this.attemptFormSubmission}>{submitBtnTitle}</FormButton>
                <FormButton onPress={this.resetForm}>Reset</FormButton>
            </View>
        );
    }
}

FormBuilder.propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    submitBtnTitle: PropTypes.string,
    formFieldsRows: PropTypes.arrayOf(
        PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                label: PropTypes.string,
                type: PropTypes.string,
                inputProps: PropTypes.object,
            }),
        ),
    ).isRequired,
};

FormBuilder.defaultProps = {
    submitBtnTitle: 'Submit',
};

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
    },
});

export default FormBuilder;

As for any other components we've created before, we'll define the propTypes our component accepts. Two of those are required - handleSubmit and formFieldsRows (pay attention on how we require a very specific format for our configuration array), and one is optional - submitBtnTitle - with a default value of Submit.

Within our component, we'll be using some helper functions. Let's list them out and briefly described their purpose:

getFormFields - because our component receives a list for form field rows and not just a simple list of form fields, we'll define this helper function which will make that conversion for us. You can see how this gets handy when we use it in our class constructor when we're trying to dynamically define our initial state, as well as when we need to validate our form data within our hasValidFormData helper function.
hasValidFormData - this is a very simple implementation of form validation. We're basically checking if the user filled out all our form fields. JavaScript array method every() is a perfect fit for our use-case.
attemptFormSubmission - a helper function which describes the action that needs to happen when the user submits the form. Here we make use of our validation function we described above, and if the validation passes, then we'll call our handleSubmit function passed down as a prop from App.js.
resetForm - a helper function which describes the action that needs to happen when the user taps the Reset button. Basically, this will reset our state (which leads to resetting all form fields) and hide the keyboard.
renderTextInput - this helper function simply renders out a FormTextInput component by accepting a form field object as a parameter. Note how we unpack/destructure our form field object right away within the function's parameters list - ({ name, label, inputProps }) => (. This is just a very handy ES6 feature. The main reason we moved this logic into a separate function is to keep things nice and tidy within our component's render() function, especially if we'll add support for other field types down the road (e.g., textarea, checkboxes etc.)

Just like that, we have defined a good list of helper functions which are being used within our component.

I think it's worth mentioning the usage of JavaScript Array reduce() method within our constructor which basically loops through every single form field and produces a final object with the field name as property and an empty string as a value. That's basically our component's initial state.

const formFieldNames = formFields.reduce((obj, field) => {
    obj[field.name] = '';
    return obj;
}, {});

The last piece we need to look at is the implementation of the render() function. The JSX content here looks pretty nice and tidy. We simply loop through our formFieldsRows list and render out all form inputs, as well as including the submit and reset buttons.

After all these changes, the final version of our form should look like this:

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

Great job if you've made it this far 👏. Let's have some more fun by playing around and add some more functionality to our component. 👨‍💻😜 Do you like this idea? Then check out Part 5 of this series.

Create a FormBuilder component in React Native (Part 3)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:06:48 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components (current)
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type

Part 3: Create custom form input and button components

When creating React Native apps you'll always run into situations where you want to use the same UI element in multiple places. Often that element will look and behave in a specific way. It's not really a good practice to customize a component over and over again in different places, so in order to avoid any code duplication, it's recommended to split your app screen into multiple little components, which can be re-used anywhere across your app later on if needed.

Create a custom FormButton component

Let's take our form buttons as an example. We have two of them and they both:

accept a title
accept a callback function which is triggered when the button is tapped
have the same styles.

We can easily define a custom FormButton component which will satisfy all these needs and will look like this:

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 } = props;

    return (
        <TouchableOpacity style={styles.button} onPress={onPress}>
            <Text style={styles.buttonText}>{children}</Text>
        </TouchableOpacity>
    );
};

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

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

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

export default FormButton;

Here are some pinpoints I want to mention in regards to creating this new component:

we've moved the button styles from our App.js file into this new component;
we're using the prop-types library to document the intended types of properties passed to our component. For more information about how to use PropTypes, check out the React's Typechecking With PropTypes documentation. Please note that you're not required to use PropTypes while building your app. I just personally think it's a really good way to document your components and it can definitely be handy for both you or any other developer that'll have to work with your code sometime down the road. As you can see our component accepts two props: onPress and children. Because onPress is not a required prop, we need to define a default value for it, which in our case is a function that does "nothing" (or to be more specific, it's an arrow function with an implicit return);
because our component doesn't do anything other than rendering something to the user, I've defined it as a stateless function instead of being class that extends React.Component. Again, this is just a preference. In fact, the other custom component we'll talk about in a second (FormTextInput) was defined as a class, just to demonstrate that both approaches can be used.

Now we can re-use this custom button anywhere in our app like so:

// ...
import FormButton from 'path/to/FormButton';
// ...
render() {
    // ...
    return (
        <FormButton onPress={() => { console.log('Button pressed!'); }}>
            Press Me!
        </FormButton>
    );
}

Create a custom FormTextInput component

The same way we created a custom component for our form buttons, we can create one for our form text inputs. That way if we'll have multiple screens with some forms that require text inputs, we can easily re-use our custom text inputs components. Let's create a new component and call it FormTextInput, which will look like this:

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

/**
 * A component which renders a TextInput with a label above it.
 * Note: This component can easily be written as a stateless function
 *      since it only includes the `render()` function and nothing else
 *      (see FormButton component as an example).
 */
class FormTextInput extends React.Component {
    render() {
        const { labelText, ...inputProps } = this.props;

        return (
            <View style={styles.inputWrapper}>
                {labelText && <Text style={styles.label}>{labelText}</Text>}
                <TextInput style={styles.textInput} blurOnSubmit {...inputProps} />
            </View>
        );
    }
}

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

FormTextInput.defaultProps = {
    labelText: null,
};

const styles = StyleSheet.create({
    inputWrapper: {
        marginBottom: 15,
        flexDirection: 'column',
    },
    textInput: {
        height: 40,
        borderColor: '#FFF',
        borderWidth: 1,
        borderRadius: 3,
        backgroundColor: '#FFF',
        paddingHorizontal: 10,
        fontSize: 18,
        color: '#3F4EA5',
    },
    label: {
        color: '#FFF',
        marginBottom: 5,
    },
});

export default FormTextInput;

Here are some pinpoints I want to mention in regards to creating this new component:

we've moved the text inputs styles from our App.js file into this new component;
we're making use of JavaScript rest and spread operators to collect all default TextInput's props (e.g. placeholder, keyboardType, etc.) we're passing down to the FormTextInput component, and spread them into the React Native's TextInput component. Pay attention to these 2 lines of code:

// Using the "rest" operator.
// You can read the following line like this:
// Hey, give me the "labelText" property's value from "this.props" object 
// and store it into a "labelText" variable. Then, take all of the remaining
// properties from "this.props" and store them into a "inputProps" variable 
// (which ends up being an object).
const { labelText, ...inputProps } = this.props;

// Using the "spread" operator
// Now we can simply take our "inputProps" object which contains
// all of the props we wanted to pass down to the "TextInput" component,
// and spread them out into it.
// (same as writing: "<TextInput placeholder={inputProps.placeholder}" />
<TextInput style={styles.textInput} blurOnSubmit {...inputProps} />

we're also using the prop-types library to document the intended types of properties passed to our component. Please note that we're not documenting any of the default TextInput component's props. That's because we don't really have control over them and React Native itself is taking care of that. The only prop we're documenting here is the labelText, which is an optional custom prop we're using to display a label above the text input. Check out the way we're checking in JSX if labelText has a value or not:

{labelText && <Text style={styles.label}>{labelText}</Text>}

You can read this line like this: if the labelText happens to be a "truthy" value then render out the Text component.

Update our `App.js` file

Now it's the time to update our main App.js file to use these newly created components. The updated version should look like this:

import React, { Component } from 'react';
import {
    StyleSheet, KeyboardAvoidingView, Text, Keyboard, Alert,
} from 'react-native';

import FormTextInput from './js/components/FormTextInput';
import FormButton from './js/components/FormButton';

export default class App extends Component {
    // ...
    render() {
        // ...
        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <Text style={styles.screenTitle}>Salary Calculator</Text>
                <FormTextInput
                    placeholder="$0"
                    keyboardType="numeric"
                    returnKeyType="done"
                    onChangeText={text => this.setState({ hourlyRate: text })}
                    value={hourlyRate}
                    labelText="Hourly Rate"
                />
                <FormTextInput
                    placeholder="0"
                    keyboardType="numeric"
                    returnKeyType="done"
                    onChangeText={text => this.setState({ hoursPerWeek: text })}
                    value={hoursPerWeek}
                />
                <FormButton onPress={this.handleSubmit}>Calculate</FormButton>
                <FormButton onPress={this.resetForm}>Reset</FormButton>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 20,
        backgroundColor: '#3F4EA5',
    },
    screenTitle: {
        fontSize: 35,
        textAlign: 'center',
        margin: 10,
        color: '#FFF',
    },
});

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

Great job if you've made it this far 👏. Now it's the time to move to Part 4, where we'll start working on a custom FormBuilder component which would render out a fully functional form. 👉

Create a FormBuilder component in React Native (Part 2)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:06:14 +0000

This series contents:

Part 1: Create a new React Native app
Part 2: Create a simple Salary Calculator Form (current)
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type

Part 2: Create a simple Salary Calculator Form

We'll start by creating a very basic form with two text inputs and two buttons. The updated App.js file should look something like this:

import React, { Component } from 'react';
import {
    StyleSheet,
    KeyboardAvoidingView,
    Text,
    Keyboard,
    TextInput,
    TouchableOpacity,
    Alert,
} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);

        // define the initial state, so we can use it later
        // when we'll need to reset the form
        this.initialState = { hourlyRate: '', hoursPerWeek: '' };

        this.state = this.initialState;
    }

    /**
     * Grab user's input data and do the math.
     */
    handleSubmit = () => {
        // using Javascript object destructuring to
        // get user's input data from the state.
        const { hourlyRate, hoursPerWeek } = this.state;

        // hide the keyboard
        // NOTE: the keyboard seems to show up after being dismissed
        //       when using the Alert react native component.
        //       Not a big deal at the moment (this is fine 😜).
        Keyboard.dismiss();

        // make sure we have some numeric values to work with
        if (!parseFloat(hourlyRate) || !parseFloat(hoursPerWeek)) {
            Alert.alert('Input error', 'Please input some positive numeric values.');
            return;
        }

        // do the Math
        const annualIncome = Math.abs(parseFloat(hourlyRate) * parseFloat(hoursPerWeek) * 52);

        // show results
        Alert.alert(
            'Your input and result',
            `$/hour: ${hourlyRate},\n Hours/week: ${hoursPerWeek}, \n Annual Income: $${annualIncome}`,
        );
    };

    /**
     * Reset the form and hide the keyboard.
     */
    resetForm = () => {
        Keyboard.dismiss();
        this.setState(this.initialState);
    };

    render() {
        const { hourlyRate, hoursPerWeek } = this.state;

        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <Text style={styles.screenTitle}>Salary Calculator</Text>
                <TextInput
                    style={styles.textInput}
                    placeholder="$/hour"
                    keyboardType="numeric"
                    returnKeyType="done"
                    blurOnSubmit
                    onChangeText={text => this.setState({ hourlyRate: text })}
                    value={hourlyRate}
                />
                <TextInput
                    style={styles.textInput}
                    placeholder="Hours/week"
                    keyboardType="numeric"
                    returnKeyType="done"
                    blurOnSubmit
                    onChangeText={text => this.setState({ hoursPerWeek: text })}
                    value={hoursPerWeek}
                />

                <TouchableOpacity style={styles.button} onPress={this.handleSubmit}>
                    <Text style={styles.buttonText}>Calculate</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.button} onPress={this.resetForm}>
                    <Text style={styles.buttonText}>Reset</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 20,
        backgroundColor: '#3F4EA5',
    },
    screenTitle: {
        fontSize: 35,
        textAlign: 'center',
        margin: 10,
        color: '#FFF',
    },
    textInput: {
        height: 40,
        borderColor: '#FFF',
        borderWidth: 1,
        borderRadius: 3,
        backgroundColor: '#FFF',
        paddingHorizontal: 10,
        marginBottom: 10,
        fontSize: 18,
        color: '#3F4EA5',
    },
    button: {
        backgroundColor: '#FD6592',
        borderRadius: 3,
        height: 40,
        marginBottom: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonText: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: 16,
    },
});

And as a result we'll end up having a calculator screen which looks and works like this:

So what do we have here?

a main container created using the KeyboardAvoidingView component. You can normally use simple View components to create containers, but when you're dealing with showing/hiding the virtual keyboard, then it's recommended to use KeyboardAvoidingView to improve user's experience.
a form title created via a Text component
two text inputs to ask the user what's its hourlyRate and how many hoursPerWeek are billable. We use the TextInput for that. This component has an onChangeText prop that takes a function to be called every time the text changed. We use that prop to store the user's input into the state. That way we can easily access and manipulate that value anywhere in our component.
a submit button created using the TouchableOpacity. We could also use the default Button component to create a button, but this one doesn't allow much customization when it comes to UI changes. Both the TouchableOpacity and Button components accept an onPress prop which takes a function to be called when the user taps the button.
a reset button which resets both text inputs and hides the virtual keyboard when tapped.

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

Now that we have this simple form ready, let's move on to Part 3 of this series where we'll create some wrapper components for our text inputs and buttons.

Create a FormBuilder component in React Native (Intro & Part 1)

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Mon, 18 Mar 2019 01:05:45 +0000

Hi everyone! 👋
Recently I've been working on a React Native app where one of the tasks was to create 10+ different forms. All of them were doing pretty much the same thing, with the only difference being in how many fields each form has, and what type of fields each form uses. That lead me to define the following goals:

reuse as much code as possible (well, that's the beauty of React components, right? 🙂);
be able to create a new form by simply creating some sort or form's configuration object or array, and passing it as a prop to a FormBuilder component, which should render the form for me;
be able to extend an existing form by simply updating its configuration.

I'm going to put together a list of posts where I'll describe step-by-step how we can achieve those goals by building a sample app in React Native. Let's get started! 🏁

This series contents:

Part 1: Create a new React Native app (current)
Part 2: Create a simple Salary Calculator Form
Part 3: Create custom form input and button components
Part 4: Work on the FormBuilder component
Part 5: Enable/disable form buttons on-the-fly
Part 6: Create a Sign Up form
Part 7: Add support for Boolean field type

Final GitHub repo:
https://github.com/vasilestefirta/react-native-form-builder

Part 1: Create a new React Native app

Before we can create a new React Native app, we need to make sure we have all the necessary tools installed on our machine. Let's check out the instructions from React Native's Getting Started documentation, and see what tools we need to install. Because I'll be running the app on an iOS simulator and not use the Expo app, we'll need to follow instructions from the Building Projects with Native Code section. Basically, we need do the following (please note that these instructions are for Mac users and, if you're a Windows user, then switch the Development OS option to Windows and Target OS to Android and go from there):

Install Node and Watchman using Homebrew. If you don't have Homebrew, you can follow instructions from their website about how to install it;
Install React Native CLI
Install Xcode and Xcode Command Line Tools.

At this point we can create a new app using React Native CLI, by simply running the following command in your terminal:

react-native init ReactNativeFormBuilder

Then run react-native run-ios inside our React Native project folder:

cd ReactNativeFormBuilder
react-native run-ios

You should see your new app running in the iOS Simulator shortly.

Now it's the time to move forward an build a simple form using default React Native components. Go to Part 2 where we'll create a simple Salary Calculator Form.

Catch and parse JSON Post data in PHP

Vasile Stefirta 🇲🇩 ✈️ 🇺🇸 — Sun, 04 Feb 2018 07:50:27 +0000

A few days ago I've been working a project which, as many other projects out there today, communicates with some external APIs. At some point, in order to perform some tests, I had to write an API endpoint within my project itself to fake the actual external API. I need to mention that the external API was expecting application/json content type, so basically the curl setup looked like this:

<?php

//...

$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, $url );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch, CURLOPT_VERBOSE, true );
curl_setopt( $ch, CURLOPT_HEADER, true );
curl_setopt( $ch, CURLOPT_TIMEOUT, $this->timeout_limit );
curl_setopt( $ch, CURLOPT_ENCODING, '' );
curl_setopt( $ch, CURLOPT_MAXREDIRS, 10 ); 
curl_setopt( $ch, CURLOPT_CUSTOMREQUEST, 'POST' );
curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode( $data ) );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array(
   'Content-Type: application/json'
) );

// ...

The issue was that when I've been trying to catch the POST data and use it, I was getting null as a value for both $_POST or $_REQUEST, and I couldn't understand why 🤔. Apparently (and maybe many of you already knew that), if the data is sent as multipart/form-data or application/x-www-form-urlencoded then yes, you can use PHP globals $_POST or $_REQUEST to catch and use that data. But, if the data is sent as application/json, then prior to PHP 5.6 you could've use $HTTP_RAW_POST_DATA to grab the raw POST data, or (and based on PHP docs this is the preferable way to do it) use the php://input - a read-only stream that allows you to read raw data from the request body.

So, as a result I ended up grabbing the POST data like this:

<?php
// receive the JSON Post data
$data = json_decode( file_get_contents( 'php://input' ), true );

Big credits to these stackoverflow discussions:
https://stackoverflow.com/questions/2731297/file-get-contentsphp-input-or-http-raw-post-data-which-one-is-better-to
https://stackoverflow.com/questions/813487/how-to-post-json-to-php-with-curl/813512

Happy coding everyone! 💻 🤓 👍

DEV Community: Vasile Stefirta 🇲🇩 ✈️ 🇺🇸

Dev Notes #1 - Upgrade to Composer version 2

Create a FormBuilder component in React Native (Part 7)

Part 7: Add support for Boolean field type

Create a new FormBooleanInput component

Add a new field to the Sign Up form

Add support for the boolean field within the FormBuilder component

Bonus links 🎁

Create a FormBuilder component in React Native (Part 6)

Part 6: Create a Sign Up form

Create a FormBuilder component in React Native (Part 5)

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

Modify our FormButton component

Enable/disable the Calculate button

Enable/disable the Reset button

Create a FormBuilder component in React Native (Part 4)

Part 4: Work on the FormBuilder component

Define the form's configuration

Modify our handleSubmit class property

Modify our render() function

Create the FormBuilder component

Create a FormBuilder component in React Native (Part 3)

Part 3: Create custom form input and button components

Create a custom FormButton component

Create a custom FormTextInput component

Update our App.js file

Create a FormBuilder component in React Native (Part 2)

Part 2: Create a simple Salary Calculator Form

Create a FormBuilder component in React Native (Intro & Part 1)

Part 1: Create a new React Native app

Catch and parse JSON Post data in PHP

Create a new `FormBooleanInput` component

Add a new field to the `Sign Up` form

Add support for the `boolean` field within the `FormBuilder` component

Modify our `FormButton` component

Enable/disable the `Calculate` button

Enable/disable the `Reset` button

Part 4: Work on the `FormBuilder` component

Modify our `handleSubmit` class property

Modify our `render()` function

Create the `FormBuilder` component

Update our `App.js` file