Forem: Thomas Coldwell

Dynamic Formik Validation 💡

Thomas Coldwell — Tue, 29 Sep 2020 15:20:24 +0000

Formik is one of the most widely used libraries for handling, validating and submitting user forms for React and React Native.

So far it has worked pretty well for most projects I've gone to use it in but then I got stumped the other day. I had a form which featured a section where the user could select a copyright license type from a drop down menu. Based on the license type they selected there would then be a different set of fields they would have to fill in to satisfy the required information for that license such as author, url - you get the picture.

To use Formik you normally just pass some initial values and a validation schema (created with Yup) to the useFormik hook and away you go. However, both the initial values and validation schema would now need to be dynamic and I needed a good way to handle this. Additionally, while dynamically adding and removing a section of the form I needed to make sure to remove now unused field values so they didn't get passed to the output and ensure the current values of the form weren't removed in the process.

Rather than try figure this out directly on the project I was working on I decided to make a separate project with the following form structure. The main form features a field to enter your name which is then followed by a subform. This subform has a dropdown menu where the user can select to enter either their email or email and phone - upon selecting either of these the relevant fields will then be rendered underneath it. The resulting UI looked like this:

The first thing to do was to create an input that would display any errors appropriately from Formik:



interface IInputProps extends TextInputProps {
  error?: string;
  touched?: boolean;
}

export default function Input(props: IInputProps) {
  const { error, touched, ...inputProps } = props;
  return (
    <View style={{ width: "100%", marginBottom: 10 }}>
      <TextInput {...inputProps} />
      {!!error && !!touched && (
        <Text style={{ color: "#f00" }}>{"* " + error}</Text>
      )}
    </View>
  );
}

This simply shows the input and whatever Formik errors there are if any as red text under the input. It will also only show any of these errors if the field has been touched and lost focus from the user (e.g. touched another field or dismissed keyboard).

The main form can then be created as follows too noting OtherForm as the subform I mentioned with the dropdown options:



export const mainFormInitialValues = {
  name: "",
  subForm: {},
};

export default function App() {
  // The output of the form
  const [result, setResult] = React.useState({});

  const [initialValues, setInitialValues] = React.useState<FormValues>(
    mainFormInitialValues
  );
  const [validation, setValidation] = React.useState(formValidation);

  // Just save the output of the form to be
  const onSubmit = (values: FormValues) => setResult(values);

  // Define the formik hook
  const formik = useFormik({
    initialValues,
    validationSchema: validation,
    onSubmit: (values) => onSubmit(values),
    validateOnBlur: true,
  });

  // Destructure the formik bag
  const {
    values,
    errors,
    touched,
    handleChange,
    handleSubmit,
    validateForm,
    handleBlur,
  } = formik;

  // Any time we dynamically change the validation schema revalidate the
  // form
  React.useEffect(() => {
    validateForm();
  }, [validation]);

  // If a dynamic form changes then handle the update of the initial values
  // and validation schema here
  const handleFormChange = (formDetails: FormDetails) => {
    // Set the intitial values and validation schema based on the form change
    setInitialValues({ ...initialValues, ...formDetails.values });
    const newSchema = validation.shape(formDetails.validation);
    setValidation(newSchema);
  };

  return (
    <ScrollView>
      <View style={styles.container}>
        <Input
          style={styles.input}
          placeholder="name"
          onChangeText={handleChange("name")}
          onBlur={handleBlur("name")}
          value={values.name}
          error={errors.name}
          touched={touched.name}
        />
        <OtherForm
          formik={formik}
          onChangeForm={(formDetails: FormDetails) =>
            handleFormChange(formDetails)
          }
        />
        <View style={{ width: "100%", marginBottom: 20 }}>
          <Button onPress={handleSubmit as any} title="Submit" />
        </View>
        <Text style={styles.output}>
          {"Initial Values: " + JSON.stringify(initialValues, null, 2)}
        </Text>
        <Text style={styles.output}>
          {"Live Values: " + JSON.stringify(values, null, 2)}
        </Text>
        <Text style={styles.output}>
          {"Form Output: " + JSON.stringify(result, null, 2)}
        </Text>
      </View>
    </ScrollView>
  );
}

This features the input for the name field, the OtherForm subform, a submit button and 3 debug text boxes to log the initial values being passed to Formik, the current values and the output of the form when onSubmit is triggered. The magic in the main form happens with the handleFormChange function. This gets called as a prop from the subform which passes the new initial values and validation schema up the main form. The state of the initial values and validation schema can then be updated accordingly so that the useFormik hook now has the right arguments being passed to it to support the subform in its new state. Whenever this validation schema changes Formik won't automatically revalidate so there is another useEffect hook that triggers a revalidation if the schema changes.

Finally, there is the logic on the subform side to handle changing the form type and passing this information back to the main form:



interface IOtherFromProps {
  formik: FormikProps<FormValues>;
  onChangeForm: (formDetails: FormDetails) => void;
}

type Fields = "email" | "phone";

const dropDownItems = [
  { label: "Email only", value: "email-only" },
  { label: "Email and Phone", value: "email-and-phone" },
];

type FormType = "email-only" | "email-and-phone";

type TypeFields = {
  [key: string]: Fields[];
};

const typeFields: TypeFields = {
  "email-only": ["email"],
  "email-and-phone": ["email", "phone"],
};

export default function OtherForm({ formik, onChangeForm }: IOtherFromProps) {
  // Setup the form type state selected from the drop down
  const [formType, setFormType] = React.useState<FormType>("email-only");

  // Unpack the formik bag passed from the parent
  const { values, errors, touched, setValues, handleBlur } = formik;

  const handleFormChange = (type: FormType) => {
    // Set required fields to be displayed
    const fields = typeFields[type];
    setFormType(type);
    // Create the values object from the array of required fields
    // re-using previously entered values if present
    const formValues = fields.reduce(
      (obj, item) => ({
        ...obj,
        [item]: values.subForm[item] ? values.subForm[item] : "",
      }),
      {}
    );
    // Create the validation schema to require each of these values
    const formSchema = fields.reduce(
      (obj, item) => ({ ...obj, [item]: Yup.string().required('Required') }),
      {}
    );
    // Set the initial values and validation schema for the form in its new state
    onChangeForm({
      values: {
        subForm: formValues,
      },
      validation: {
        subForm: Yup.object(formSchema),
      },
    });
    // Set the current live values
    setValues({ ...values, subForm: formValues });
  };

  React.useEffect(() => {
    // Set up the initial values and validation schema on first render
    handleFormChange(formType);
  }, []);

  return (
    <View style={styles.subForm}>
      <Picker
        selectedValue={formType}
        style={{
          height: 40,
          width: "100%",
        }}
        onValueChange={(value: any) => handleFormChange(value)}
      >
        {dropDownItems.map((item) => (
          <Picker.Item value={item.value} key={item.value} label={item.label} />
        ))}
      </Picker>
      {!!formType &&
        typeFields[formType].map((field) => (
          <Input
            key={field}
            style={styles.input}
            placeholder={field}
            onChangeText={(text) =>
              setValues({
                ...values,
                subForm: { ...values.subForm, [field]: text },
              })
            }
            value={values.subForm[field]}
            error={errors.subForm && errors.subForm[field]}
            touched={touched.subForm && touched.subForm[field]}
            onBlur={handleBlur("subForm." + field)}
          />
        ))}
    </View>
  );
}

The main thing to dissect here is the handleFormChange function. Whenever the dropdown selection (subform type) is changed this will perform a number of actions. Firstly, it looks up what fields are required (specified in an object called typeFields) and sets the type to some local state so it knows what fields to display. Secondly it creates an object of the values required and their initialised state (normally an empty string but uses a previously store value for that field if there is one) and a Yup validation object with each required field being assigned a Yup required string value. Both the values and validation schema are then passed to callback onChangeForm which is handled in the main form as previously described. Finally, the live values of the form are updated to include the new subform values too.

There is also a useEffect hook that is only triggered on first render that runs the handleFormChange function once with the default form type selection - this ensures the values and validation state are initialised.

Here's it in action:

And that's all there is too it! I hope this helps other people who have maybe been stuck with a similar problem and if anyone has any tips on how this solution could be improved I'd love to hear it!

The full code for this can be accessed below:

https://github.com/thomas-coldwell/Formik-Dynamic-Sub-Form

Happy hacking!

Testing App Layout with Expo

Thomas Coldwell — Thu, 20 Feb 2020 13:41:20 +0000

Ever needed to make sure your Expo App’s UI doesn’t break across all of your target devices? Can’t be bothered having to deal with simulators/emulators for different devices?

Then these two methods might help save you some time.

Method 1: Expo Web

The first and possibly simplest method is to use Expo Web. By bundling your app for web you have a window that you can dynamically resize to the most extreme heights/widths and aspect ratios to test it all out (see below). This is built into any Expo project you create and your app can be launched from the CLI by pressing ‘w’ which will start a webpack server and open it in a new tab for you!

But there is a big caveat - if you use modules that aren’t react-native-web supported then you’ll just get a fatal error on start up... which is where method 2 might be a little better.

Method 2: Use a top-level View

It seems simple but only occurred to me the other day - why not just make your top level component a <View /> that you can set the height and width of to mimic the layout on any device. The obvious issue with this is you need a larger device with large screen dimensions than whatever layout you want to try out - I mainly develop for iPad at the minute and so this works quite well for me (see screenshot below).



// In App.tsx (or App.js if your still using vanilla JS)
// Define a test height and width to mimic any device
const testHeight = 400;
const testWidth = 250;
// ...
render() {
  return(
    <View style={{height: testHeight, width: testWidth}}>
     {/* The rest of your app here */}
    </View>
  );
}
// ...

Method 3: Just use a simulator...

If neither of these solutions fit your needs then you might be best sticking to using a standard simulator or emulator (or stealing all of your roommates’ phones to try your copy of flappy bird on). At the end of the day they give you a true representation of what the app will look and feel like on any device and more importantly let you ensure the functionality of your app works cross platform.

Thanks for reading! If you have any tricks for this let me know below!

🌗 Expo + ThreeJS Shaders

Thomas Coldwell — Tue, 28 Jan 2020 10:57:06 +0000

Recently, I started having a good play around with Expo and ThreeJS which allows for some impressive 3D experiences across iOS, Android and Web - all from the same codebase! As I dug down I discovered that ThreeJS supports shaders and started looking at how I could build this into my Expo app. Almost every example I came across was purely HTML / JS based so I decided to write a post to help get shaders into your Expo app!

For those of you who don't know what a shaders do, they can be broken down into two basic types - fragment (pixel) shaders and vertex shaders. Fragment shaders enable a colour transform of all of the pixels on the screen according to some function with various input parameters such as time or a colour we want to mix in. Vertex shaders enable geometric transformation of the vertices that build up our mesh - think stretching or squishing.

Shaders are required to be written in some fairly low level syntax as their code gets directly executed on the GPU (which also makes them blazing fast). For example OpenGL and WebGL (which powers ThreeJS) uses GLSL which is syntactically similar to C.

Shaders can be implemented in ThreeJS at a high level using THREE.ShaderMaterial() and then passed as the material to our mesh. Let's create a basic ThreeJS shader below:

this.shader = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      type: 'f',   // Indicates float32
      value: 0.0   // Give the time uniform a starting value
    }
  },
  fragmentShader: fragmentShader,  // Pass in the fragment shader we defined
  side: THREE.DoubleSide   // Make the shader work on both the inner and outer faces of the geom.
});

There's a few things going on here. Firstly, we are passing what is known as a uniform in GLSL - these can be thought of as variables we can pass into the shader from the outside code (in this case JavaScript). To define a uniform it needs to be given a type in our case here we have said that it will be a float (important that it is 32 bit for GLSL) and a value that defines some initial value (or constant if we don't want it to change). Secondly, we pass in the fragment shader which we haven't defined yet but is just a string of some GLSL code that will define the behaviour of this shader. Similarly, the same can be done for vertex shaders (see the snack below to see how), but we'll just focus on the one fragment shader for now. Finally, we tell the material class to apply this shader on both sides of each face of our geometry by setting side to THREE.DoubleSide - this will help things look less weird when we try to make things transparent.

Okay, so now we get to the fun bit - writing some GLSL code! Don't worry if you've never seen it or it looks too low-level for you - there is plenty of pre-written shaders available out there to do anything you could think of! Here is some code that will simply turn all of the pixels mid grey and fade their opacity in and out:

uniform float time;

void main() {
  vec3 color = vec3(0.5, 0.5, 0.5);
  float opacity = abs(sin(time));
  gl_FragColor = vec4(color, opacity);
}

P.s. If you want to just play around with GLSL checkout - https://thebookofshaders.com/edit.php

Let's breakdown what's going on here. First, the uniform that we defined in the shader material is declared - this will let us access it as a variable in our shader. Then we define the main function which is the entry point to the shader. We then define a vec3 which is a three channel vector that will hold our RGB colour float values - here we've set it to middle grey. The next line defines a float for the opacity of each pixel subject to the shader. This opacity is calculated using the time variable and a sine function normalised to wiggle between 0.0 and 1.0. Finally, gl_FragColor is a GLSL keyword which allows us to return the RGBA vector for that fragment (pixel) - which we set to the colour concatenated with the opacity we just worked out. And that's the shader fully defined - this can be put in some quotation marks and passed as a string to the fragment shader in the shader material. Let's get back to the JavaScript!

Currently, the shader will just read the time variable as 0.0 as that's what its value was set to. To change this value we can access it as follows anywhere in our component:

this.shader.uniforms.time.value += 1.0;

If you apply this as the material to your mesh you'll see it turn grey and fade in and out! The best way to learn shaders is to play around with them so have a go with the snack of this example included below!

Happy shader-ing!

https://snack.expo.io/@thomascoldwell/expo-threejs-shader-example