react-native-dynamic-forms
v1.0.39
Published
#### Wrap the root component of your App into ApplicationProvider component. In your App.js:
Downloads
40
Readme
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 |