search

AbdullahQureshi1080 / superforms-rn

Super forms using formik and yup in react-native with built-in ready to use form components that are customizable
https://www.npmjs.com/package/@superforms/superforms-rn
MIT License
3 stars 0 forks source link
components form forms react react-native

readme

Super forms (React-Native) 🚀

Super forms using formik and yup in react-native with built-in ready to use form components that are customizable.


What We doing & Why 💭

Almost all sorts of mobile applications have forms in them whether we call the forms or not, and boy after a few user actions it becomes redundant to write the same code again. The pain point is that for each form input you have to have a field state whether explicitly defined or implicitly with additional error and validation checks, this makes having to manage a lot of states and effects.

Luckily for us formik, a great resource has given us the ability to minimize that code redundancy and manage our forms with performant state management with built in support of using yups validation schemes for all our validation checks.

We broke down the formik form usage into multiple components each with its unique value and built ourselves custom form and form fields that are formik supercharged, so you don't have to care about the methods from formik and writing them again and again. What you can do is just initialize a Form component with initial Values, a Validation Scheme, and a Submit Handler.


Superforms in action 📲



Installation 🏗️

npm i @superforms/superforms-rn

Note: Make sure to have react version >=16.13.1

Date Picker Usage 📅

npm i react-native-date-picker

Image Picker Usage 🖼️

npm i react-native-image-picker

Note: To use <FormDate/> or <FormImage/> you must have to install either of the dependent libraries, you can skip it if you do not need the image picker or the date picker, but it would be great to install these so that you do not run into issues later.


How it works 💻

import React from 'react';
import {SafeAreaView} from 'react-native';
import {
  Form,
  FormField,
  SubmitButton,
  FormDateSelector,
  DatePickerEnums,
  FormImageSelector,
  ImagePickerEnums,
} from '@superforms/superforms-rn';
import * as Yup from 'yup';

const App = () => {
   const [values, setValues] = useState<FormikValues>({});

   const validationSchema = Yup.object().shape({
      email: Yup.string().required('Email is required').email().label('Email'),
      password: Yup.string()
      .required('Password is required')
      .label('Password')
      .min(5),
      fullName: Yup.string().required('Name is required').label('Full Name'),
      datepicker: Yup.date()
      .required('Date is required')
      .label('Birthdate')
      .nullable(),
      imagepicker: Yup.string().required(),
  });

  const handleSubmit = (values) => {
    console.log('Values', values);
  };

  useEffect(() => {
    const valuesFromAPI = {
      email: 'tonyAlveraz@gmail.com',
      fullName: 'Tony Alveraz',
      password: 'Test12345@',
      datepicker: new Date('2022-03-25'),
      imagepicker:
        'https://images.unsplash.com/photo-1661961110218-35af7210f803?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
    };
    setTimeout(() => {
      setValues(valuesFromAPI);
    }, 2000);
  }, []);

  return (
    <SafeAreaView style={{backgroundColor: '#f8f8f8', flex: 1}}>
     <Form
      initialValues={values}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
      enableReinitialize={true}>
        <FormField name="email" label="Email" />
        <FormField name="password" label="Password" />
        <FormField name="fullName" label="Full Name" />
        <FormDate
          label="Birthdate"
          name="datepicker"
          date={values.datepicker}
          mode={DatePickerEnums.DATE}
        />
        <FormImage
          label="Profile Image"
          name="imagepicker"
          mediaType={ImagePickerEnums.PHOTO}
          onChange={res => console.log('IMAGE YO RES,', res)}
          // imageProps={{resizeMode: 'stretch'}}
          // placeholderImageStyles={{tintColor: 'red'}}
          imageUri={values.imagepicker}
        />
        <SubmitButton name="Login" />
      </Form>
    </SafeAreaView>
  );
};

export default App;


Components Props 📦





Contributers 😎


Abdullah Najam Qureshi
💬 📖 👀 🚧 💻 🎨
Faseeh Abbas Khan
🚧 💻


In Progress 🚧 👷

Worked On ✅


Contributing 💗

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request


Acknowledgments


Consider supporting with a ⭐️ on GitHub

If you find @superforms helpful a star would be awesome, we appreciate the support and motivation.