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 |