DynamicForms is powered by React Native UI Kitten and Formik https://akveo.github.io/react-native-ui-kitten/docs/getting-started/what-is-ui-kitten#what-is-ui-kitten

https://jaredpalmer.com/formik

DOCS STILL UNDER CONSTRUCTION............

todos...

convert all components to styled components...

Follow instructions on their website to set up your application with UI Kitten.

Configure Application Root

Wrap the root component of your App into ApplicationProvider component. In your App.js:

import {
  ApplicationProvider,
  IconRegistry,
} from '@ui-kitten/components';
import {mapping, light} from '@eva-design/eva';
import {EvaIconsPack} from '@ui-kitten/eva-icons';

const App = () => (
    <ApplicationProvider
      mapping={mapping}
      theme={light}
    >
      <IconRegistry icons={EvaIconsPack} />
        {/* YOUR CODE */}
    </ApplicationProvider>
);

export default App;

Usage

import DynamicForm from '..';
import * as yup from 'yup';

const loginForm = {
  email: {
    type: 'textField',
    placeholder: 'email',
    title: 'Email',
    initialValue: '',
    keyboardType: 'email-address',
  },
  password: {
    type: 'textField',
    placeholder: 'password',
    title: 'Password',
    initialValue: '',
    secure: true,
  },

  checkbox: {
    type: 'checkboxField',
    placeholder: 'check',
    title: 'I agree with Terms & Conditions',
    initialValue: false,
    style: {},
    textStyle: {},
  },
};

const schema = yup.object({
  email: yup
    .string()
    .email()
    .required(),
  password: yup.string().required(),
  checkbox: yup
    .bool()
    .oneOf([true], 'You must agree with terms and conditions'),
});

const Login = ({}: LoginProps) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <DynamicForm
        form={loginForm}
        schema={schema}
        onSubmit={(values, fomikProps) => {
          console.log('VALUES', values);
          login(values.email, values.password, values.checkbox).then(() => {

          }).catch(e => {
            fomikProps.setError()
          })
        }}
        submitButtonText="Login"
      />
    </SafeAreaView>
  );
};

export default Login;

TextField

    referral_description: {
      type: "textField",
      multiline: true,
      placeholder: "",
      title: "Referral Description"
    }

Common Props

Prop	Description	Default	Required
type	Type of field to render, valid values: 'textField', 'selectField', 'checkboxField', 'toggleField', 'radioField', 'datePickerField', 'avatarField', 'tagsInputField', 'pickerField', 'multiSelectPickerField', 'autoCompleteAddressField', 'buttonGroupField', 'fieldSection'	None	Yes
placeholder	Placeholder string to display. Only valid in textFields, selectField, pickerField, ...	None	No
title	Title to display above the field.	None	No
initialValue	Initial Value of the field.	None	Yes

Text Field Props

Prop	Description	Default	Required
multiline	Make your textfield multiline.	False	No
secure	If you want your textfield to be of SecureEntry type	False	No
...otherTextInputProps	Any additional Input props will be passed down. refer to this link: https://akveo.github.io/react-native-ui-kitten/docs/components/input/overview#input	None	No

Select Field Props

Prop	Description	Default	Required
options	Options of the select field. ex: [{text: "Option 1"}, {text: "Option 2"}].	None	Yes
...otherSelectProps	Any additional Select props will be passed down. refer to this link: https://akveo.github.io/react-native-ui-kitten/docs/components/select/api#select	None	No

Toggle Field Props

Prop	Description	Default	Required
...otherToggleProps	Any additional Toggle props will be passed down. refer to this link: https://akveo.github.io/react-native-ui-kitten/docs/components/toggle/overview#toggle	None	No

Tags Input Field Props

Prop	Description	Default	Required
tagContainerStyle	Style Object for Container.	None	No
tagIconStyle	Style Object for Icon	None	No
tagTextStyle	Style Object for Text	None	No
renderCloseIcon	function to render Close Icon on tag	None	No