React Native Form Management Tutorial - Building a credit card form

This page summarizes the projects mentioned and recommended in the original post on dev.to
React React Native Code Design Testing Form Logic

SurveyJS
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
Our great sponsors

  • credit-card-form

    Discontinued [Moved to: https://github.com/halilb/rn-credit-card]

    You may find the full version of this component on Github. I also ported the React Native code into the web thanks to react-native-web. You may play with it on my blog.

  • card-validator

    Validate credit cards as users type.

    For the tutorial, I'll delegate the validations logic to Braintree's card-validator library to keep us focused on the form part. Now I need to define rules for our FormTextField components. rules object will contain two properties:

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • react-native-testing-library

    🦉 Simple and complete React Native testing utilities that encourage good testing practices.

    I love using react-native-testing-library for my tests. It lets you create tests similar to user behavior.

  • bdd-lazy-var

    Provides UI for testing frameworks such as mocha, jasmine and jest which allows to define lazy variables and subjects.

    I'm also using bdd-lazy-var, the tool I learned about in my last job. I still pick it up on my tests as it helps to describe the test variables in a clean and more readable way.

  • react-hook-form

    📋 React Hooks for form state management and validation (Web + React Native)

    Forms are pretty common in all kinds of apps. That's why developers are often trying to simplify the process of building forms. I've built some custom solutions before, also used all the popular form management libraries so far. I think react-hook-form is the best one in terms of developer experience and customization.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts