Forem: Benjamin Daniel

How to Test Your Node.js & Postgres App Using Drizzle & PGlite

Benjamin Daniel — Sat, 02 Aug 2025 13:38:00 +0000

I was recently tasked with writing tests for a large-scale production codebase serving over 2.1 million users. During my conversation with the lead engineer he mentioned something that stood out: “One of our biggest pain points is our test setup.”

That conversation made me realize, that the approach I’ve been using might actually be more useful than I thought. This post walks through that setup.

The Stack

We mostly use PostgreSQL in production and write functional or integration tests, which means no database mocking. In the past, we relied on Testcontainers, to spin up real Postgres instances, but that approach was, slow and heavy. You can find my other article on Testcontainers here: The death of mocks by Testcontainers

Eventually, we went looking for lighter alternatives.

That’s when we found @electric-sql/pglite, the WASM build of Postgres from the great people at ElectricSQL. It’s really perfect for a huge chunk of tests and it gets the job done with zero Docker overhead.

What We Use

Vitest – test runner
InversifyJS – dependency injection
Drizzle ORM – type-safe, modern ORM
PG LITE – lightweight Postgres test replacement

The Core Idea

At test time, we dynamically swap the production database with a PG LITE instance.

Here’s how.

Swapping the DB Connection in Tests

// test/setup.ts
import { DatabaseConnection } from "@src/app.bind";
import { container } from "../app.container";
import { drizzle } from "drizzle-orm/pglite";

container.unbindSync(DatabaseConnection); // Remove existing binding

const db = drizzle({ schema }); // Use pglite instead of Postgres

container
  .bind(DatabaseConnection)
  .toConstantValue(db as unknown as DatabaseConnection); // Rebind with test DB

Running Migrations in Tests

To make sure your schema is applied to the in-memory DB before tests run, we do this:

beforeAll(async () => {
  const { createRequire } =
    await vi.importActual<typeof import("node:module")>("node:module");
  // @ts-expect-error import isn't allowed in ESM
  const require = createRequire(import.meta.url);
  const { pushSchema } =
    require("drizzle-kit/api") as typeof import("drizzle-kit/api");

  const { apply } = await pushSchema(schema, db as unknown as never);
  await apply();

  container
    .rebindSync(DatabaseConnection)
    .toConstantValue(db as unknown as DatabaseConnection);
});

This pushes your schema to the PG LITE DB before any tests run, you can find more about drizzle push schema here https://orm.drizzle.team/docs/drizzle-kit-push.

Be Careful

Behavior may diverge silently from production in edge cases, I haven't run into these kind of scenarios yet.

If you’re tired of:

Over-engineered mocks
Docker-heavy CI pipelines
Testing strategies that don’t resemble prod

…then this setup might be worth trying.

Want to see how we structure actual tests with this setup? I’ll share more in the next post, kindly follow me for that.

Or drop a comment if you want the full boilerplate repo.

How to Test Your Node.js & Postgres App Using Drizzle & PGlite

Benjamin Daniel — Sat, 02 Aug 2025 12:50:22 +0000

That conversation made me realize, that the approach I’ve been using might actually be more useful than I thought. This post walks through that setup.

The Stack

Eventually, we went looking for lighter alternatives.

What We Use

Vitest – test runner
InversifyJS – dependency injection
Drizzle ORM – type-safe, modern ORM
PG LITE – lightweight Postgres test replacement

The Core Idea

At test time, we dynamically swap the production database with a PG LITE instance.

Here’s how.

Swapping the DB Connection in Tests

// test/setup.ts
import { DatabaseConnection } from "@src/app.bind";
import { container } from "../app.container";
import { drizzle } from "drizzle-orm/pglite";

container.unbindSync(DatabaseConnection); // Remove existing binding

const db = drizzle({ schema }); // Use pglite instead of Postgres

container
  .bind(DatabaseConnection)
  .toConstantValue(db as unknown as DatabaseConnection); // Rebind with test DB

Running Migrations in Tests

To make sure your schema is applied to the in-memory DB before tests run, we do this:

beforeAll(async () => {
  const { createRequire } =
    await vi.importActual<typeof import("node:module")>("node:module");
  // @ts-expect-error import isn't allowed in ESM
  const require = createRequire(import.meta.url);
  const { pushSchema } =
    require("drizzle-kit/api") as typeof import("drizzle-kit/api");

  const { apply } = await pushSchema(schema, db as unknown as never);
  await apply();

  container
    .rebindSync(DatabaseConnection)
    .toConstantValue(db as unknown as DatabaseConnection);
});

This pushes your schema to the PG LITE DB before any tests run, you can find more about drizzle push schema here https://orm.drizzle.team/docs/drizzle-kit-push.

Be Careful

Behavior may diverge silently from production in edge cases, I haven't run into these kind of scenarios yet.

If you’re tired of:

Over-engineered mocks
Docker-heavy CI pipelines
Testing strategies that don’t resemble prod

…then this setup might be worth trying.

Want to see how we structure actual tests with this setup? I’ll share more in the next post, kindly follow me for that.

Or drop a comment if you want the full boilerplate repo.

The death of mocks by Testcontainers

Benjamin Daniel — Tue, 28 Jan 2025 07:20:24 +0000

Introduction

Writing tests can often feel like a daunting task, especially when you find yourself juggling mocks for internal and external services. Flaky tests, unrealistic mocks, and the constant fear of “what if this breaks in production?” can make the process incredibly stressful. I recently had to write integration tests for a service built with NestJs and having to mock the database layer (repository) didn't sit right with me as it felt like I was testing a facade rather than the real thing.
Now, don’t get me wrong—mocks are great and have their place in testing. But in this scenario, I wanted to ensure my code worked seamlessly in a production-like environment. So, I did what any developer would do: I reached out to my manager for advice.
His suggestion? Testcontainers.
It was a game-changer. With Testcontainers, I was able to spin up lightweight, disposable containers for services like PostgreSQL, Redis, and more—giving me a reliable, production-like testing environment right from my local machine.
No more “living a lie” with overly simplistic mocks.

In this article I would explain what Testcontainers are, why you would like to use Testcontainers and how to set it up (in NestJs).

What are Testcontainers?

Testcontainers is an open source testing library that helps create light weight instances of databases, message brokers and any thing that can be run with docker. The only requirement for using Testcontainers is a docker environment. Testcontainers is available in different languages like Golang, NodeJs, Java, etc. which means this article can be helpful even if you write a different language. You can find a comprehensive list on their website https://testcontainers.com/

Why Testcontainers?

Using Testcontainers allows you use real world software like a Postgres database, Redis, even Ollama like you would in production, you don't need to setup complex test configuration, or mock your database repository, you just write your test with minimal setup.

How to setup

Kindly note I would mostly skip the setup required to run the NestJs application, here's a link to the Github Repository.

The lifecycle of our test looks like the image below:

This is simple and summarizes a ton of tests that happens, we mostly follow these steps when writing tests

Setup configuration
Run Tests
Clean up

Setup Test Containers

Let's setup a Postgres container (and build the database configuration for mikro-orm)

import { MikroOrmModuleOptions } from '@mikro-orm/nestjs';
import { MikroORM } from '@mikro-orm/postgresql';
import {
  PostgreSqlContainer,
  StartedPostgreSqlContainer,
} from '@testcontainers/postgresql';
import * as dotenv from 'dotenv';
import mikroOrmTestConfig from '../src/mikro-orm-test.config';

dotenv.config();

export class SingletonTestContainers {
  private initialized = false;
  private static instance: SingletonTestContainers | null = null;
  public postgresContainer: StartedPostgreSqlContainer | null = null;
  public config: MikroOrmModuleOptions | null = null;

  private constructor() {}

  public async init(): Promise<void> {
    if (this.initialized) {
      return;
    }

    this.postgresContainer = await new PostgreSqlContainer().start();
    const url = this.postgresContainer.getConnectionUri();
    this.config = await mikroOrmTestConfig(url);
    const orm = await MikroORM.init(this.config);
    await orm.getMigrator().up();

    this.initialized = true;
  }

  public async shutdown(): Promise<void> {
    this.postgresContainer = null;
    this.config = null;
    this.initialized = false;
  }

  public static getInstance(): SingletonTestContainers {
    if (!SingletonTestContainers.instance) {
      SingletonTestContainers.instance = new SingletonTestContainers();
    }
    return SingletonTestContainers.instance;
  }
}

We are using a singleton pattern to setup the test containers, because we don't want each tests spinning up different containers.
This pattern is helpful as in the future your application might need a caching layer and all you would need to do is add the test container setup in there.

Setup & Clean Up

We then use the SingletonTestContainers class in your test setup as follows:

  let service: TodoService;
  let orm: MikroORM;
  let em: EntityManager;
  const testContainers = SingletonTestContainers.getInstance();

  beforeAll(async () => {
    await testContainers.init();
  });

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      imports: [
        MikroOrmModule.forRoot(testContainers.config),
        MikroOrmModule.forFeature({
          entities: [Todo],
        }),
      ],
      providers: [TodoService, TodoRepository],
    }).compile();

    service = module.get<TodoService>(TodoService);
    orm = module.get<MikroORM>(MikroORM);
    em = module.get<EntityManager>(EntityManager);
  });

  beforeEach(async () => {
    // Clear the database before each test
    await em.nativeDelete(Todo, {});
  });

  afterAll(async () => {
    await orm.close(true);
    await testContainers.shutdown();
  });

Like we stated in the diagram above we want to setup our test containers, run our tests, then shutdown our containers.

Let's actually make this test a bit more complicated, let's add a cache layer to our application, we can edit our docker compose to reflect this, and do some application setup, when we run our tests again they fail because we can't connect to a Redis instance, this is to be expected, one way to resolve this would be to mock the cache service, but with the integration of Testcontainers this won't be necessary, as we can just spin up a Redis instance in less than 10 lines of code.
Firstly we install the Redis library

pnpm install @testcontainers/redis

then we use it in our setup

// ...
  public async init(): Promise<void> {
    if (this.initialized) {
      return;
    }

    this.postgresContainer = await new PostgreSqlContainer().start();
    const url = this.postgresContainer.getConnectionUri();
    this.config = await mikroOrmTestConfig(url);
    const orm = await MikroORM.init(this.config);
    await orm.getMigrator().up();

    this.redisContainer = await new RedisContainer("redis:5.0.3-alpine").start();
    this.redisUrl = this.redisContainer.getConnectionUrl();

    this.initialized = true;
  }

  public async shutdown(): Promise<void> {
    this.postgresContainer = null;
    this.config = null;
    this.redisContainer = null;
    this.redisUrl = null;
    this.initialized = false;
  }
// ...

We can then use the redisUrl in our test like so

// ...
const redisOptions = AppService.RedisOptions;
    redisOptions.useFactory = async () =>
      AppService.buildRedisStore(testContainers.redisUrl);

// ...
        CacheModule.registerAsync(redisOptions),
// ...

We didn't need to write mocks, spy on the mocks all we did was just to start a Redis container, and use the generated Redis url to setup our tests.

Wrap up

Using Testcontainers made me focus on writing tests without the stress of writing mocks that needs to change if any of my repository or service changes shape. I think this would help everyone needs to write tests. Due to it's availability in different languages I think you should be able to use it in your work place and even in CI/CD environment like GitHub actions, Circle CI etc.

Link to Repository: https://github.com/papidb/nest-js-integration-test-with-testcontainers/

Photo by Nandhu Kumar: https://www.pexels.com/photo/black-stackable-stone-decor-at-the-body-of-water-312839/

Why you need to use React-Query in your React/React Native project

Benjamin Daniel — Mon, 28 Jun 2021 18:53:58 +0000

Introduction

Have you had issues with managing server state? or find yourself writing long and funny looking code that just fetches data from the server? I honestly think you need to look at react-query if you fall into any of this category.

Server state is state that's actually stored on the server then is temporarily store in the client for quick-access (like user data, transaction data)

React's lack of standard data-fetching paradigm has led to the creation of several state management libraries. However, these libraries do not fully support handling async data(server state) properly. Async data is typically handled at the component level where each state associated to it is usually tracked i.e loading, error, data, refreshing e.t.c. as the number of server states tracked increases, the difficulty in managing server state increases.

React Query is a library that effectively helps manage and keep track of server state. In this article, I would be highlighting how to use react-query and why you should use it in your next application

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronising and updating server state in your React applications a breeze.

Prerequisites

You need basic knowledge of the technologies listed below

React
React hooks(elementary)
State Management libraries (elementary)

Why use React Query?

In a simple network request/call, the three server states that are of utmost importance are the loading, error and data server states. Using state management libraries to store these is not entirely efficient as the whole application doesn't need to know about these states as it is only relevant in the components that needs it.

A typical app global state looks like this

const globalState = {
    user: {},
    appSettings: {
      appVersion: "",
      theme: "light", // yes I am a thug
    },
    transactions: {
      data: [],
      transactionLoading: true,
            transactionError: null,
    }
  };

One question I ask myself before adding a state to a Global state management library is "Does the app need to know about this data?" and typically, almost all server states don't pass this test. My app doesn't need to know when the transaction is loading or giving an error, because this state is most likely used in one component. As these server states aren't needed globally, the next best decision is to create hooks to help manage basic server states. Although, this doesn't remove the difficulty in handling multiple server states like caching, refreshing, retrying, etc. React Query provides a consistent and straightforward way of managing server state as all of this have been abstracted into the library.

Talk is cheap, Let's get dirty!

Installation

npm i react-query
# or
yarn add react-query

Specimen One

// https://codesandbox.io/s/reverent-sunset-rxwgl?file=/src/App.js
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const [error, setError] = useState(null);
  useEffect(() => {
    async function getRepos() {
      try {
        const repoData = await fetch(
          "https://api.github.com/repos/tannerlinsley/react-query"
        ).then((res) => res.json());
        setData(repoData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }
    getRepos();
  }, []);
  if (loading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;
  return (
    <div className="App">
      <h1>Traditional way of handling server State</h1>
      <div>
        <h1>{data.name}</h1>
        <p>{data.description}</p>
        <strong>👀 {data.subscribers_count}</strong>{" "}
        <strong>✨ {data.stargazers_count}</strong>{" "}
        <strong>🍴 {data.forks_count}</strong>
      </div>
    </div>
  );
}

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

 const queryClient = new QueryClient()

 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

 function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )

   if (isLoading) return 'Loading...'

   if (error) return 'An error has occurred: ' + error.message

   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

Comparing the functions shows how the useQuery hook eliminates setting three different state, using a useEffect, catch errors and finally setting loading to false, handling all of this can be quite cumbersome and the ethos of react-query begins to manifest when multiple state are managed like an infinite list or paginated server state, refetching the query.

Specimen Two

Let's take a look at the Rick and Morty example in the docs, as I think this is a more concise example to highlight how much complexity react-query removes from your application.

In Examples.js

// https://codesandbox.io/s/github/tannerlinsley/react-query/tree/master/examples/rick-morty?file=/src/Episodes.js:0-903
import React from "react";
import { Typography, Link } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";
import { useQuery } from "react-query";
import fetch from "./fetch";

export default function Episodes() {
  const { data, status } = useQuery("episodes", () =>
    fetch("https://rickandmortyapi.com/api/episode")
  );

  if (status === "loading") {
    return <p>Loading...</p>;
  }
  if (status === "error") {
    return <p>Error :(</p>;
  }

  return (
    <div>
      <Typography variant="h2">Episodes</Typography>
      {data.results.map(episode => (
        <article key={episode.id}>
          <Link component={RouterLink} to={`/episodes/${episode.id}`}>
            <Typography variant="h6">
              {episode.episode} - {episode.name} <em>{episode.airDate}</em>
            </Typography>
          </Link>
        </article>
      ))}
    </div>
  );
}

The episodes data is fetched and rendering is conditionally based on status (the loading server state, isn't used here as there are some flaws with using loading as a server state, you can check out Kent Dodds article herehttps://kentcdodds.com/blog/stop-using-isloading-booleans).

const { data, status } = useQuery("episodes", () =>
    fetch("https://rickandmortyapi.com/api/episode")
);

The "episodes" string is called the Query Keys that helps keep track and manage the data's cache. The query key should be unique to the query data. If you leave the page then return, the data will be fetched immediately from the cache (please note that the data doesn't persist when the application closes) and will be re-fetched in the background, these are one of the defaults in react-query and is worth taking a look as it might bite you if as a Beginner.

Most of the other data fetching request in this example will follow this flow, where we try to fetch data from a server, if it is in the cache we get the data then it fetches the data in the background if not it fetch the data in the foreground, all of this pristine server state handling and the methods it exposes are the things that make react-query the right tool to use for server state.

Summary

So here are reasons you need to use react-query in your React/React Native project are

You don't write long exhaustive code that helps manage server state, react-query intuitively helps you write cleaner and shorter code as all of that management is abstracted into react-query.
The application is almost always updated with the most recent server state.
You don't have to deal with useEffects.

Credits

React Query Docs
https://kentcdodds.com/blog/stop-using-isloading-booleans
https://kentcdodds.com/blog/application-state-management-with-react#server-cache-vs-ui-state

Thanks to Dominik, Arafah, and Lulu for reviewing.

Photo by Anni Roenkae from Pexels

React Native forms with Formik

Benjamin Daniel — Mon, 13 Apr 2020 19:28:24 +0000

Original website here
I really don't know how to start this article cause this is my first.
So I had just recently gone through the react native documentation and was going to build my first React Native app. I had gone through a lot of tutorials on working with forms in react native and the suggested tool was redux-form, Redux form was all fun until we built the app and the form section was lagging. Long story cut short I found formik (LOML), but the documentation on React Native was quite short, well I got hacking then fell in love.

Things I assume you know
Assumptions -
Javascript (ES6)
React
A little bit of React Native
*We won't worry too much about styling as this post is about Formik and it's functionalities😌 *

So first things first, let's initialize an empty React Native project.

expo init Formik-tut --template=blank

Expo would ask for the package manager to use (Yarn or Npm) choose your preferred choice.
This would set up a simple react native project. We change directory to the Formik-tut so we can start hacking away.

  cd Formik-tut

Then we install the necessary dependencies for this project.

  npm install yup formik prop-types --save

Run the app by running

  expo start

This would start up an expo local server and would also open the local server webpage. Run the app on your preferred simulator by pressing i for iOS, a for android in the terminal.

The main file is App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Let's create components that we would use

mkdir components && touch Input.js && cd ..

Then edit the content of components/Input.js

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

const Input = ({
  label,
  inputStyle,
  containerStyle,
  touched,
  error,
  ...props
}) => {
  return (
    <View style={containerStyle}>
      <Text>{label}</Text>
      <TextInput style={inputStyle} {...props} />
      <Text style={styles.errorInput}>{touched && error}</Text>
    </View>
  );
};

// This creates an object of styles using React Native StyleSheet
const styles = StyleSheet.create({
  containerStyle: {
    marginVertical: 5,
  },
  input: {
    borderBottomWidth: 1,
    minHeight: 40,
    padding: 10,
  },
  errorInput: { color: "red", fontSize: 12 },
});

// this made me thing about TypeScript
// and what it was created to solve😅
const stylePropsType = PropTypes.oneOfType([
  PropTypes.arrayOf(PropTypes.object),
  PropTypes.object,
]);

Input.propTypes = {
  inputStyle: stylePropsType,
  containerStyle: stylePropsType,
  ...TextInput.propTypes, // this makes the Input component have proptypes of Textinput
};
Input.defaultProps = {
  inputStyle: styles.input,
  containerStyle: styles.containerStyle,
  touched: false,
  error: null,
};

export default Input;

After doing this

In Input.js we create a simple Textinput component, in this, we have a View and Textinput component, and we give the component the ability to change styles by passing inputStyle, containerStyle as props.

Let's go back to App.js to use our newly created Input component, App.js becomes

import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Button } from "react-native";
import Input from "./components/Input";
import { Formik } from "formik";

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.header}>Create Account</Text>
        <Text style={styles.subHeader}>
          Create a new account and let me show you the world
        </Text>
      </View>
      <View>
        <Input label="Username" />
        <Input label="Email" />
        <Input label="Phone" />
        <Input label="Password" />
        <Input label="Confirm Password" />
      </View>
      <View style={styles.formAction}>
        <Text style={styles.conditionText}>
          By continuing you agree with our Terms and Condition
        </Text>
        <Button title="Create Account"></Button>
        <View style={styles.signIn}>
          <Text>Already have an account?</Text>
          <TouchableOpacity>
            <Text style={styles.signInText}> Sign In</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f3f3f3",
    // alignItems: "center",
    // justifyContent: "center",
    padding: 10,
    paddingTop: 64
  },
  header: {
    fontSize: 28,
    textAlign: "center",
    marginVertical: 10
  },
  subHeader: {
    fontSize: 18,
    textAlign: "center",
    marginVertical: 15
  },
  formAction: {},
  conditionText: {
    marginVertical: 10,
    textAlign: "center"
  },
  signIn: {
    flexDirection: "row",
    justifyContent: "center"
  },
  signInText: {
    color: "rgb(51,130,246)"
  }
});

Let's create our Button component

  mkdir components && touch Button.js && cd ..

Edit your Button file

import React from "react";
import {
  Text,
  TouchableOpacity,
  ActivityIndicator,
  StyleSheet
} from "react-native";
import PropTypes from "prop-types";

const Button = ({
  text,
  instructions,
  containerStyle,
  textStyle,
  isSubmitting,
  disabled,
  indicatorColor,
  ...props
}) => {
  return (
    <TouchableOpacity
      onPress={() => {
        if (instructions) instructions();
      }}
      disabled={disabled || isSubmitting}
      style={containerStyle}
    >
      {isSubmitting ? (
        <ActivityIndicator color={indicatorColor} />
      ) : (
        <Text style={textStyle}>{text}</Text>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    marginVertical: 10,
    backgroundColor: "grey",
    paddingVertical: 10,
    borderRadius: 5
  },
  textStyle: {
    textAlign: "center",
    color: "white",
    fontSize: 20
  }
});

Button.defaultProps = {
  text: "",
  isSubmitting: false,
  indicatorColor: "white",
  ...styles // this would spread the styles object
};

const stylePropsType = PropTypes.oneOfType([
  PropTypes.arrayOf(PropTypes.object),
  PropTypes.object
]);

Button.propTypes = {
  containerStyle: stylePropsType,
  textStyle: stylePropsType
};

export default Button;

Now let's get down to Formik.

App.js now becomes


// code can be found in an earlier code snippet

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.header}>Create Account</Text>
        <Text style={styles.subHeader}>
          Create a new account and let me show you the world
        </Text>
      </View>
      <Formik
        initialValues={{
          email: "",
          username: "",
          phone: "",
          password: "",
          confirm_password: ""
        }}
        onSubmit={values => console.log(values)}
      >
        {({ handleChange, handleBlur, handleSubmit, values, touched, errors, isSubmitting  }) => {
          return (
            <>
              <View>
                <Input
                  onChangeText={handleChange("username")}
                  onBlur={handleBlur("username")}
                  value={values.username}
                  label="Username"
                />
                <Input
                  onChangeText={handleChange("email")}
                  onBlur={handleBlur("email")}
                  value={values.email}
                  label="Email"
                />
                <Input
                  onChangeText={handleChange("phone")}
                  onBlur={handleBlur("phone")}
                  value={values.phone}
                  label="Phone"
                />
                <Input
                  onChangeText={handleChange("password")}
                  onBlur={handleBlur("password")}
                  value={values.password}
                  label="Password"
                />
                <Input
                  onChangeText={handleChange("confirm_password")}
                  onBlur={handleBlur("confirm_password")}
                  value={values.confirm_password}
                  label="Confirm Password"
                />
              </View>
              <View style={styles.formAction}>
                <Text style={styles.conditionText}>
                  By continuing you agree with our Terms and Condition
                </Text>
                <Button onPress={handleSubmit} text="Create Account" />
                <View style={styles.signIn}>
                  <Text>Already have an account?</Text>
                  <TouchableOpacity>
                    <Text style={styles.signInText}> Sign In</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </>
          );
        }}
      </Formik>
    </View>
  );
}

So we give formik the initial value of the form, then we get data of the form like values (values of the form), touched (form elements that has been touched), errors (errors caught while validating the form), isSubmitting (Boolean showing the state of submission), and gives us functions like resetForm, handleSubmit, handleChange, e.t.c.
We pass in a prop called onSubmit which takes in a function, onSubmit is a function that handles submission of the values to your server or what ever you want to do with it. I would advise you to make this function an async function if you are going to submit the values to a server, this gives you the ability to await the result and can be used to hold subsequent submission to the server with the isSubmitting value exposed by formik.
An Example:

<View style={styles.container}>
      // ...
      <Formik
        initialValues={{
          email: "",
          username: "",
          phone: "",
          password: "",
          confirm_password: "",
        }}
        onSubmit={async (values) => {
          await FuncWillTake5Secs();
           // as this would take 5 sec this would stop the user from submitting the form again
           // for more clarity look into the Button Component
        }}
      >
        {({ isSubmitting, ...rest }) => {
          return (
            <>
              <View>
                // ...
                {/* look into Button */}
                <Button
                  onPress={handleSubmit}
                  text="Create Account"
                  {...{ isSubmitting }}
                />
                // ...
              </View>
            </>
          );
        }}
      </Formik>
    </View>

You can also run Validation which is a big deal, we handle validation by passing a prop called validate which takes a function with the values of the form as it only argument and returns an object.

// ... rest

const validate = (values) => {
  const errors = {};
  if (!values.username) {
    errors.username = "Required";
  } else if (values.username.length < 4) {
    errors.username = "Minimun length of 4";
  }
  if (!values.phone) {
    errors.phone = "Required";
  } else if (values.phone.match(/\d/g).length === 11) {
    errors.phone = "Minimun length of 11";
  }
  if (!values.password) {
    errors.password = "Required";
  } else if (values.password.length < 8) {
    errors.password = "Minimun length of 8";
  }
  if (!values.confirm_password) {
    errors.confirm_password = "Required";
  } else if (values.confirm_password.length < 8) {
    errors.confirm_password = "Minimun length of 8";
  } else if (
    !!values.password &&
    !!values.confirm_password &&
    values.password != values.confirm_password
  ) {
    errors.confirm_password = "Not equal to Password";
  }
  if (!values.email) {
    errors.email = "Required";
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = "Invalid email address";
  }
  return errors;
};
  // ...
  <Formik 
  validate={validate}
  >
  //...

We can then use the value of the error by doing this

               // by passing touched and error     
               <Input
                  onChangeText={handleChange("username")}
                  onBlur={handleBlur("username")}
                  value={values.username}
                  touched={touched.username}
                  error={errors.username}
                  label="Username"
                />

I'm sure you are happy and ready to go into the world to show react native forms that you are a master, but this isn't even the fun part, the fun part is assigning yup to handle validation. Adding yup to handle validation is like bring Thanos to a fist fight 😌. So let's use yup.

If you haven't heard of Yup checkout https://medium.com/@rossbulat/introduction-to-yup-object-validation-in-react-9863af93dc0e.

// ...
import * as Yup from "yup";

const SignupSchema = Yup.object().shape({
  username: Yup.string().min(4, "Minimun length of 4").required("Required"),
  phone: Yup.string()
    .min(11, "Minimun length of 11")
    .max(11, "Minimun length of 11")
    .required("Required"),
  email: Yup.string().email("Invalid email").required("Required"),
  password: Yup.string().min(8, "Minimun length of 8").required("Required"),
  confirm_password: Yup.string()
    .oneOf([Yup.ref("password"), null], "Passwords must match")
    .min(8, "Minimun length of 8")
    .required("Required"),
});

// ...
      <Formik
        validationSchema={SignupSchema}

//...

Formik and yup makes handling with formik a breeze, but as we all know, the world isn't a simple place and something we would have to work with complex forms like triggering validation when some conditions are met or formatting the text input to add dash in card number text input, all these can easily be handled by formik as it has made a lot of things real easy and incase you are wondering formik does have redux intergration.
You can find the codebase here https://github.com/benjamin-daniel/Formik-tut.
Thank you for reading.