react-native-dynamic-form
v0.0.1
Published
Dynamic form builder for React Native
Downloads
10
Readme
react-native-dynamic-form
Dynamic form builder for React Native
Sneak Peak
Installation
$ npm install react-native-dynamic-form --save
or use yarn
$ yarn add react-native-dynamic-form
Usage
Note: Ensure to add and configure react-native-vector-icons in your project before using this package.
You can clone and try out the sample app.
Sample usage:
import React, { Component } from 'react';
import {
StyleSheet,
View
} from 'react-native';
import DynamicForm from 'react-native-dynamic-form';
const form = [
{
key: 'hdghhdbdfgh',
type: 'header',
subtype: 'h1',
label: 'Dynamic Form',
},
];
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<DynamicForm
form={form}
style={styles.formContainer}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
formContainer: {
marginTop: 10,
},
});
Props
The component takes one compulsory prop - form
. Other props are optional. The table below explains more.
| Prop | Required | Type | Purpose | | ------------|-----------| -------| -------| | form | Yes | Array | array of objects representing form components to render (see Form Components for more info) | | theme | No | Object | Theme to apply to entire dynamic form elements. See below for more info | | style | No | Object, Number | Style to apply to form container. View Style | | onFormDataChange | No | Function | Returns form responses as funtion argument whenever any change occur in form | | submitButton | No | Object | Object for displaying button at the end of form. More info below |
submitButton (prop)
Object for displaying button at the end of form. Holds configuration on button appeareance and beahaviour. See below for sample:
import React, { Component } from 'react';
import { View } from 'react-native';
import DynamicForm, { buildTheme } from 'react-native-dynamic-form';
const theme = buildTheme();
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<DynamicForm
form={form}
theme={theme} // theme prop is optional and default theme is applied if theme is not provided
submitButton={{
action: (responses) => {
console.log('Submit Button Responses: ', responses);
}, // button action, takes form responses as argument, optional
label: 'Submit', // button label, required
buttonStyle: {
backgroundColor: '#CCCCCC',
borderRadius: 3,
height: 40,
}, // View PropTypes, optional
buttonTextStyle: {
fontSiz3: 18,
}, // Text PropTypes, optional
disabled: false, // boolean to disable button, optional
}}
/>
</View>
);
}
}
_getFormResponses
Use component reference to get form responses at any point in time
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import DynamicForm, { buildTheme } from 'react-native-dynamic-form';
export default class App extends Component {
getFormResponses = () => {
const responses = this.formRef._getFormResponses();
// use responses here...
}
render() {
return (
<View style={styles.container}>
<DynamicForm
ref={ref => this.formRef = ref}
form={form}
/>
<Button
onPress={this.getFormResponses}
title="Get Form Responses"
/>
</View>
);
}
}
Theming
A global theme object can be passed to the Dynamic Form
component which gets applied to most of the form elements. Theming is still a work in progress and far from perfect, but it provides a basic way of customizing form elements. Theming instructions are provided below:
import React, { Component } from 'react';
import { View } from 'react-native';
import { buildTheme } from 'react-native-dynamic-form';
const theme = buildTheme();
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<DynamicForm
form={form}
theme={theme} // theme prop is optional and default theme is applied if theme is not provided
/>
</View>
);
}
}
The code sample above builds a theme template and apply defaults configuration. This file conatins the default values. The defaultTheme
export in the styles config can be used as a template to build really customized theme object.
Full customization
To fully customize form elements, the buildTheme
export accepts three parameters in the order they appear below:
userColors - Object of colors to apply to form element. See file for exact format.
userFonts - Object of fonts to apply to form element. See file for exact format.
userTheme - Complete user theme object which is a clone of
defaultTheme
export in styles config file. This can be copied over and modified.
Below is an example of a fully customized theme builder
import { buildTheme } from 'react-native-dynamic-form';
const myColors = {
primary: '#00a5ff',
textPrimary: '#2A3C53',
primaryDark: '#0077cb',
error: '#FF6565',
iconDark: 'rgba(0,0,0,0.4)',
textInputBorderColor: '#cac8c8',
placeholderTextColor: '#A9A9A9',
starFillColor: '#f5a623',
black: '#000000',
white: '#FFFFFF',
success: '#50e3c2',
};
const myFonts = {
defaultFontFamily: 'Roboto', // font should already be added to project
};
const myTheme = {
// labels
label: {
marginTop: 10,
fontSize: 14,
color: myColors.textPrimary,
},
// error
error: {
fontSize: 12,
color: myColors.error,
},
// headers
headers: {
h1: {
fontSize: 24,
color: myColors.textPrimary,
fontFamily: myFonts.defaultFontFamily,
},
h2: {
fontSize: 20,
color: myColors.textPrimary,
fontFamily: myFonts.defaultFontFamily,
},
h3: {
fontSize: 16,
color: myColors.textPrimary,
fontFamily: myFonts.defaultFontFamily,
},
},
// paragraph
p: {
fontSize: 16,
color: myColors.textPrimary,
fontFamily: myFonts.defaultFontFamily,
},
// input
input: {
placeholderTextColor,
iconColor: iconDark,
style: {},
},
// rating
rating: {
starFillColor,
remarkStyle: {
color: myColors.starFillColor,
fontSize: 14,
},
},
// toggle
toggle: {
knobColor: myColors.primaryDark,
tintColor: myColors.primary,
},
// select
select: {
tagRemoveIconColor: myColors.error,
tagBorderColor: myColors.textInputBorderColor,
tagTextColor: myColors.primary,
selectedItemTextColor: myColors.primary,
selectedItemIconColor: myColors.primary,
itemTextColor: myColors.textPrimary,
submitButtonColor: myColors.success,
},
};
const theme = buildTheme(myColors, myFonts, myTheme);
// The most important paramater is the colors parameter which will be applied to all form elements.
// Other sections of the theme object will be set to their default values and provided colors applied where necessary
// Most times you will only have to do as below and leave the remaining configuration in their default state
const theme = buildTheme(myColors);
Form Components
All component fields are required, except stated otherwise.
Header
Represents a header component.
{
key: 'hdghhdbdfgh',
type: 'header',
subtype: 'h2', // one of h1, h2 and h3
label: 'Dynamic Form',
style: {
fontSize: 14,
}, // optional
}
Paragraph
Represents a paragraph component.
{
key: 'addsdfdvdvdd',
type: 'paragraph',
label: 'Instructions on how to fill dynamic form',
style: {
fontSize: 15,
}, // optional
}
TextInput
Represents an input component.
{
key: 'manshgdsuudfg',
type: "text",
required: true, // optional
label: 'What is your last name?',
placeholder: 'Last Name', // optional
subtype: 'text', // one of text, tel, email and password
maxlength: 30, // optional
value: 'Salako', // optional
disabled: false, // optional,
icon: 'lock', // optional
validationFunc: (value) => {
// do validation here and return bool status
}, // optional
}
TextArea
Represents a multi-line input component.
{
key: 'jahaughabdvad',
type: 'textarea',
label: 'Please describe yourself in not more than 400 characters',
placeholder: "My name is John Doe and I am...", // optional
maxlength: 400, // optional
required: true, // optional
value: '', // optional
validationFunc: (value) => {
// do validation here and return bool status
}, // optional
}
Rating
Represents a rating component.
{
key: 'liaksunshdfjnbah',
type: 'starRating',
label: 'Rate your programming skill',
maxStars: 5,
value: 3,
required: false, // optional
config: {
iconSet: 'MaterialIcons', // react-native-vector-icon icon sets
emptyStar: 'star-border', // empty star icon
fullStar: 'star', // full star icon
halfStar: 'star-half', // half star icon, if enableHalfStar is set to true
enableHalfStar: false, // enable half star
ratingRemark: {
1: 'Beginer',
2: 'Enthusiast',
3: 'Junior',
4: 'Intermediate',
5: 'Senior',
},
},
}
Radio Button
Represents a radio button component.
{
key: 'sbasgdsbdgffgf',
type: 'radio-group',
label: 'Favorite Programming Language',
other: true, // displays an other input for custom data entry, optional
values: [
{
label: 'JavaScript',
value: 'javascript',
selected: true, // selected value (can be used to preselect values too) optional
},
{
label: 'Ruby',
value: 'ruby',
}
]
}
CheckBox
Represents a checkbox component.
{
key: 'avfsragsghgdbhfg',
type: 'checkbox-group',
label: 'Top 3 tech companies in the world',
other: true, // optional
values: [
{
label: 'Google',
value: 'google',
},
{
label: 'Apple',
value: 'apple',
},
{
label: 'Facebook',
value: 'facebook',
selected: true,
},
{
label: 'Microsoft',
value: 'microsoft',
},
{
label: 'Amazon',
value: 'amazon',
},
]
}
Toggle
Represents a toggle component.
{
key: 'anhsgabgbfnhhdnbf',
type: 'checkbox-group',
label: 'Sorting Algorithms familiar with',
toggle: true, // renders a toggle instead of checkbox, optional
other: true, // renders an other field for free text entry
values: [
{
label: 'Bubble Sort',
value: 'bubble sort',
selected: true, // selected value (can be used to preselect values too) optional
},
{
label: 'Heapsort',
value: 'heapsort',
},
{
label: 'Insertion Sort',
value: 'insertion sort',
},
{
label: 'Merge Sort',
value: 'merge sort',
},
{
label: 'Quicksort',
value: 'quicksort',
},
]
},
Date
Represents a date component.
{
key: 'aabnstfavahbdaas',
type: 'date',
label: 'Date of Birth',
value: '26-11-2018',
placeholder: '25-05-2018', // optional
dateFormat: 'DD-MM-YYYY', // optional
disabled: false, // optional
}
Number Input
Represents a number input component.
{
key: 'manbsgvagsdbdhh',
type: 'number',
label: 'Number of Data Structure and Algorithm books read',
placeholder: 0, // optional
value: 0,
min: 0, // minimum allowed value, optional
max: 100, // maximum allowed value, optional
step: 2, // value step, optional, defaults to 1
disabled: false, // optional
directTextEdit: false, // enable or disable free form data entry, optional, defaults to false
}
Select
Represents a select component.
{
key: 'nabsgsgdhyshdhf',
type: 'select',
label: 'Languages Spoken',
multiple: false, // enable multiple selection and displays selected items as tags, optional
searchInputPlaceholder: 'Search Languages...',
values: [
{
label: 'Yoruba',
value: 'yoruba',
selected: true, // selected value (can be used to preselect values too) optional
},
{
label: 'Igbo',
value: 'igbo',
},
{
label: 'Hausa',
value: 'hausa',
},
{
label: 'English',
value: 'english',
},
{
label: 'Spanish',
value: 'spanish',
},
{
label: 'French',
value: 'french',
},
]
}
Contributing
Contributions are welcome and will be fully credited.
Contributions are accepted via Pull Requests on Github.
Pull Requests
Document any change in behaviour - Make sure the
README.md
and any other relevant documentation are kept up-to-date.Consider our release cycle - We try to follow SemVer v2.0.0. Randomly breaking public APIs is not an option.
Create feature branches - Don't ask us to pull from your master branch.
One pull request per feature - If you want to do more than one thing, send multiple pull requests.
Send coherent history - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting.
Issues
Check issues for current issues.
Contributors
License
The MIT License (MIT). Please see LICENSE for more information.