Pull request

README.md

@@ -1,13 +1,16 @@
+[![NPM Version](https://img.shields.io/npm/v/react-native-form-builder.svg?style=flat)](https://www.npmjs.com/package/react-native-form-builder)
 # react-native-form-builder
 ![alt text](http://g.recordit.co/7PqX8Ft7VO.gif)
   ![alt text](http://g.recordit.co/RWFvqi5tXG.gif)
+# Note: 
+If you're looking for a better form management library with more advanced features, Please check out [React Reactive Form](https://github.com/bietkul/react-reactive-form).
 ## Features
 - Generate Form Fields UI
 - Manage, track state & values of fields
 - Automatically manages focus to next field on submit (TextInput)
 - Handle all keyboard related problems smartly
 - Supports custom validations & nested forms
-- Uses Nativebase components
+- Uses <a href="https://github.com/GeekyAnts/NativeBase">Nativebase</a> components
 
 ## Getting Started
 
@@ -30,10 +33,26 @@
    + [Add Custom Validations](#add-custom-validations)
    + [Customize Your Form](#customize-your-form)
    + [Add custom components](#add-custom-components)
+   + [Add custome error component](#add-custom-error-component)
 - [Example](#example)
 
 ## Installation
 
+`react-native-form-builder`  requires a peer of [`native-base`](https://github.com/GeekyAnts/NativeBase)
+
+
+To Install the peer dependecy
+```
+$ npm i native-base --save
+
+``` 
+link the peer dependecy using 
+
+```
+react-native link
+```
+and then insteall `react-native-form-builder`
+
 ```bash
 $ npm i react-native-form-builder --save
 ```
@@ -133,6 +152,8 @@ AppRegistry.registerComponent('FormGenerator', () => FormGenerator);
 | customComponents | N/A | `object` | To define your custom type of components.|
 | formData | N/A | `object` | To prefill the form values.|
 | fields | `required` | `array` | Array of form fields. |
+| scrollViewProps | N/A | `object` | Scrollview custom props. |
+| errorComponent | N/A | `React Component` | Custom error display component. |
 
 ### Methods:
 Currently, these methods are available in FormBuilder, you can access them by using ref property.
@@ -264,7 +285,7 @@ If you're using array of objects then please don't forget to define these proper
 ```jsx
 objectType: true,
 labelKey: 'name', // For Below example
-primaryKey: 'id,  // For Below example
+primaryKey: 'id',  // For Below example
 ```
 For e.g.
 ```
@@ -395,12 +416,13 @@ Build your custom type's components & handle them easily with the help of form b
 Use the `customComponents` prop of form builder.
 ### Prototype
 It's an object of key value pair where key will be the `type` of the component & value will be your custom Component.<br/><br/>
-```customComponents = { type1: ComponentName1, type2: ComponentName2 .....}```
+```customComponents = { type1: {component: ComponentName1, props: Props }, type2: {component: ComponentName2} .....}```
 
 ### How To Use
 - Define your custom `type` in field's object.
 - Form builder extends the props of your component by adding some extra props.
-- In you component you can access these props to handle the state of the field.
+- You can also pass some extra props in your custom components.
+- In your component you can access these props to handle the state of the field.
 
 | Props | Type | Description |
 | :------------| :------| :-----|
@@ -409,6 +431,10 @@ It's an object of key value pair where key will be the `type` of the component &
 | onSummitTextInput(fieldName) | `function`| If you're using TextInput then you can use this function to automatically manage the text input focus.For example you can define it in the `onSubmitEditing` prop of TextInput
 | theme | `object` | Use the theme variables to style your component
 
+## Add Custom Error Component
+- Now you can use your custom error component to display error messages.
+- In your custom component you will receive two props `attributes` & `theme` variables.
+- You can access the error & error message as a property of the attributes object.
 
 
 ## Example

package.json

@@ -1,26 +1,26 @@
 {
-   "name":"react-native-form-builder",
-   "version":"1.0.5",
-   "description":"Generate Awesome Forms In an easy way",
-   "main":"src/index.js",
-   "scripts":{
-      "test":"echo \"Error: no test specified\" && exit 1"
+   "name": "react-native-form-builder",
+   "version": "1.0.16",
+   "description": "Generate Awesome Forms In an easy way",
+   "main": "src/index.js",
+   "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1"
    },
-   "repository":{
-      "type":"git",
-      "url":"git+https://github.com/bietkul/react-native-form-builder.git"
+   "repository": {
+      "type": "git",
+      "url": "git+https://github.com/bietkul/react-native-form-builder.git"
    },
-   "_npmUser":{
-      "name":"anjuma",
-      "email":"kuldepsaxena@155@gmail.com"
+   "_npmUser": {
+      "name": "anjuma",
+      "email": "kuldepsaxena@155@gmail.com"
    },
-   "author":"Kuldeep Saxena",
-   "license":"MIT",
-   "bugs":{
-      "url":"https://github.com/bietkul/react-native-form-builder/issues"
+   "author": "Kuldeep Saxena",
+   "license": "MIT",
+   "bugs": {
+      "url": "https://github.com/bietkul/react-native-form-builder/issues"
    },
-   "homepage":"https://github.com/bietkul/react-native-form-builder#readme",
-   "keywords":[
+   "homepage": "https://github.com/bietkul/react-native-form-builder#readme",
+   "keywords": [
       "android",
       "ios",
       "react",
@@ -32,16 +32,22 @@
       "generator",
       "builder"
    ],
-   "dependencies":{
-      "fs-extra":"^3.0.1",
-      "print-message":"^2.1.0",
-      "lodash":"^4.17.4",
-      "react-native-keyboard-aware-scroll-view":"^0.2.7",
-      "react-native-i18n":"^1.0.0"
+   "dependencies": {
+      "fs-extra": "^3.0.1",
+      "lodash": "^4.17.4",
+      "print-message": "^2.1.0",
+      "prop-types": "^15.6.0",
+      "react-native-i18n": "^2.0.0",
+      "react-native-keyboard-aware-scroll-view": "^0.8.0"
    },
-   "devDependencies":{
-      "react":"15.4.2",
-      "react-native":"0.41.1",
-      "native-base":"^2.0.6"
+   "devDependencies": {
+      "native-base": "^2.12.0",
+      "react": "^16.8.0",
+      "react-native": "0.60.0"
+   },
+   "peerDependencies": {
+      "react-native": ">=0.60.0",
+      "react": ">=15.5.0",
+      "native-base": "^2.12.0"
    }
 }

src/components/panel/index.js

@@ -1,11 +1,12 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Animated, Dimensions, View, Easing, Keyboard } from 'react-native';
 import styles from './styles';
 
 class Panel extends Component {
 
   static propTypes = {
-    children: React.PropTypes.object,
+    children: PropTypes.object,
   }
 
   constructor(props) {
@@ -55,4 +56,4 @@ class Panel extends Component {
     );
   }
 }
-export default Panel;
+export default Panel;

src/fields/date/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View, Text } from 'native-base';
 import I18n from 'react-native-i18n';
@@ -9,10 +10,11 @@ export default class DatePickerField extends Component {
     timeZoneOffsetInHours: (-1) * ((new Date()).getTimezoneOffset() / 60),
   };
   static propTypes = {
-    attributes: React.PropTypes.object,
-    updateValue: React.PropTypes.func,
-    timeZoneOffsetInHours: React.PropTypes.number,
-    theme: React.PropTypes.object,
+    attributes: PropTypes.object,
+    updateValue: PropTypes.func,
+    timeZoneOffsetInHours: PropTypes.number,
+    theme: PropTypes.object,
+    ErrorComponent: PropTypes.func,
   }
   constructor(props) {
     super(props);
@@ -69,7 +71,7 @@ export default class DatePickerField extends Component {
     }
   };
   render() {
-    const { theme, attributes } = this.props;
+    const { theme, attributes, ErrorComponent } = this.props;
     const value = (attributes.value && new Date(attributes.value)) || null;
     const mode = attributes.mode || 'datetime';
     return (
@@ -132,6 +134,7 @@ export default class DatePickerField extends Component {
             }
               </View>
             </TouchableOpacity>
+            <ErrorComponent {...{ attributes, theme }} />
             <Panel
               ref={(c) => { this.panel = c; }}
             >
@@ -196,11 +199,10 @@ export default class DatePickerField extends Component {
                 </TouchableOpacity>
             }
             </View>
+            <ErrorComponent {...{ attributes, theme }} />
           </TouchableOpacity>
-
-                }
+          }
       </View>
-
     );
   }
-}
+}

src/fields/form/index.js

@@ -1,14 +1,16 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View, Text } from 'native-base';
 import GenerateForm from '../../formBuilder';
 
 export default class FormField extends Component {
   static propTypes = {
-    attributes: React.PropTypes.object,
-    theme: React.PropTypes.object,
-    updateValue: React.PropTypes.func,
-    autoValidation: React.PropTypes.bool,
-    customValidation: React.PropTypes.func,
+    attributes: PropTypes.object,
+    theme: PropTypes.object,
+    updateValue: PropTypes.func,
+    autoValidation: PropTypes.bool,
+    customValidation: PropTypes.func,
+    customComponents: PropTypes.object,
   }
   constructor(props) {
     super(props);
@@ -31,6 +33,7 @@ export default class FormField extends Component {
       theme,
       autoValidation,
       customValidation,
+      customComponents,
     } = this.props;
     return (
       <View>
@@ -43,6 +46,7 @@ export default class FormField extends Component {
             onValueChange={this.onValueChange}
             autoValidation={autoValidation}
             customValidation={customValidation}
+            customComponents={customComponents}
             showErrors
             fields={attributes.fields}
             theme={theme}
@@ -51,4 +55,4 @@ export default class FormField extends Component {
       </View>
     );
   }
-}
+}

src/fields/picker/index.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View, Text } from 'native-base';
 import { Platform, Picker, TouchableOpacity } from 'react-native';
@@ -7,26 +8,27 @@ import styles from './../../styles';
 const Item = Picker.Item;
 export default class PickerField extends Component {
   static propTypes = {
-    attributes: React.PropTypes.object,
-    theme: React.PropTypes.object,
-    updateValue: React.PropTypes.func,
+    attributes: PropTypes.object,
+    theme: PropTypes.object,
+    updateValue: PropTypes.func,
+    ErrorComponent: PropTypes.func,
   }
   handleChange(value) {
     const attributes = this.props.attributes;
     this.props.updateValue(attributes.name, attributes.options[value]);
   }
   render() {
-    const { theme, attributes } = this.props;
+    const { theme, attributes, ErrorComponent } = this.props;
     const isValueValid = attributes.options.indexOf(attributes.value) > -1;
     const pickerValue = attributes.options.indexOf(attributes.value).toString();
     if (Platform.OS !== 'ios') {
       return (
         <View
-          style={Object.assign(styles.pickerMainAndroid, {
+          style={{...styles.pickerMainAndroid, ...{
             backgroundColor: theme.pickerBgColor,
             borderBottomColor: theme.inputBorderColor,
             borderBottomWidth: theme.borderWidth,
-          })}
+          }}}
         >
           <View style={{ flex: 7 }}>
             <Text style={{ color: theme.inputColorPlaceholder }}>{attributes.label}</Text>
@@ -42,12 +44,12 @@ export default class PickerField extends Component {
             >{
                 attributes.options.map((item, index) => (
                   <Item key={index} label={item} value={`${index}`} />
-                  ))
+                ))
               }
             </Picker>
           </View>
+          <ErrorComponent {...{ attributes, theme }} />
         </View>
-
       );
     }
     return (
@@ -75,6 +77,7 @@ export default class PickerField extends Component {
             {isValueValid ? attributes.value : 'None'}
           </Text>
         </TouchableOpacity>
+        <ErrorComponent {...{ attributes, theme }} />
         <View style={{ flex: 1 }}>
           <Panel
             ref={(c) => { this.panel = c; }}
@@ -97,4 +100,4 @@ export default class PickerField extends Component {
 
     );
   }
-}
+}