bietkul / react-native-form-builder

Handle your forms in a smart way

Hi there 👋

Who I am?

• A software engineer based in India, having ~7 years of hands-on experience in building web and mobile apps for startups.
• Building front-end at Zoom.us
• Co-author and maintainer of ReactiveSearch, the most popular UI library to build search interfaces with Elasticsearch.
• Led front-end team at ReactiveSearch.io.

What companies have I worked for?

How to get in touch with me?

react-native-form-builder's Issues

PropTypes has move to its own package starting React 15.5

PropTypes has moved into it's own package starting with React 15.5+ (https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) so this package is throwing of errors when used with newer versions of React (16, for example).

Change should be pretty straightforward: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes

Are you accepting PRs?

Cascading Dropdown

Is it supporting cascading dropdown?

react-native-keyboard-aware-scroll-view does not install last version

The issue is related to this line on the package.json file
"react-native-keyboard-aware-scroll-view": "^0.2.7"

The ^ just checks versions 0.2.x (0.2.9) and next major version 0.3.x but will never update to the actual 0.5.x

Picker iOS errror

I had this issue when tried to use the picker field, I think the error is in:
picker/index.js#L27
on line 57

      <View
        style={Object.assign(styles.pickerMainIOS, {
          backgroundColor: theme.pickerBgColor,
          borderBottomColor: theme.inputBorderColor,
          borderBottomWidth: theme.borderWidth,
        })}
     >

It works fine like this:

      <View
        style={{...styles.pickerMainIOS, ...{
          backgroundColor: theme.pickerBgColor,
          borderBottomColor: theme.inputBorderColor,
          borderBottomWidth: theme.borderWidth,
        }}}
      >

Customizing Height of Fields

I liked the interface you guys have built. Everything seems to work as advertised - barring Picker, but that may be an usage issue and I shall revert after re-checking the code.

I could not see how I could change the height of the fields - they seem too widely spaced. Perhaps your are using space-around? It may not always be possible to set the height of the containing component and it would make the form-builder much more useful if you could allow cusom styles to be passed.

long label pushes switcher off screen

If the label for a switch takes up more than one line it will push the switch off the screen before the text drops to the next line

UnhandledPromiseRejectionWarning: Error: Unable to resolve module `native-base`

(node:10005) UnhandledPromiseRejectionWarning: Error: Unable to resolve module native-base from /home/rahul/Desktop/architecture/mobileApp/firstApp/node_modules/react-native-form-builder/src/fields/textInput/index.js: Module native-base does not exist in the Haste module map

not working for me

Hi, I'm running it as a standalone react-native app and the form displays but the validation is not working. Any thoughts?

[iOS] keyboard appearance makes form scroll up an becomes invisible

This is a strange one.
The form is working fine on Android.

On iOS as soon as the keyboard shows up the form foes up and disappears in the containing scroll view.
I have to drag it back down to interract with the fields.

Any idea?

how to show hidden fields

var fieldsHidden = true
...
...
...

onValueChange(){
const formValues = this.formGenerator.getValues();
formValues.selectname['id'] !== '1' ? fieldsHidden = false : fieldsHidden = true
}

const fields = [

{
type: 'select',
name: 'Organization',
multiple: false,
required: true,
label: 'OrganizationType',
labelKey: 'name',
primaryKey: 'id',
objectType: true,
options: [ // required
{
id: 1,
name: 'Health',

  },
  {
    id: 2,
    name: 'Finance',

  }

],
defaultValue: [{
    id: 1,
    name: 'Health',
  }],

},

{
type: 'text',
name: CompanyName',
label: 'Company Name',
hidden: fieldsHidden,
},
]

its not working

Custom components are not getting rendered in the form - Phone Input

I am trying to integrate phone input via customComponents prop. Here is the code. Any help would be appreciated.
{ type: "custom", name: 'phone', required: true, label: 'Phone', editable: true, props: {}, customComponents : { custom: {component:PhoneInputComponent}} }

version ---> react-native-form-builder : 1.0.15

anyone have any idea about this, please help.

Image picker

Nice, work. Form almost does everything I need. I am keen on adding an image picker field type, allowing my user to attach photos to their form. Would you be open to allowing something like that into this lib? @bietkul

Switch 'onTintColor' is deprecated use 'trackColor' instead

ListView has been removed from React Native.

package.json:->

{
"name": "FormBuilderApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"native-base": "^2.13.7",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-form-builder": "^1.0.16"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.3.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}

Error ScreenShot:->

Form auto expand height when focus

Hi,

I'm struggling when using react-native-form-builder for a simple form: When I focus on the TextInput, form's size immediately expands and it become scrollview. I don't know this is a bug or I need to add any style to fix it?

Please help me. Thank you!

isValid function??

Hello
is it possible to make function to check all fields and return if is Valid or no and if not Valid show error for each field

i see it in "react-native-gifted-form" i tried to copy it but im new on RN
can you please help on it ??

thnx

How to add multiple level nesting

I am trying to do a multiple level nesting meaning i want to add a group element inside another group element. However i get the following error:

The thing i am trying to do is :

const fields = [ { type: 'group', name: 'address', label: 'Address', fields: [ { type: 'group', name: 'Address2', label: 'Address2', fields:[ { type: 'text', name: 'Name', label: 'Name', }, ] }, { type: 'picker', name: 'country', label: 'Country', defaultValue: 'INDIA', options: ['US', 'INDIA', 'UK', 'CHINA', 'FRANCE'], }, ], }, { type: 'text', name: 'user_name', required: true, icon: 'ios-person', label: 'Username', }, ];

Customizing the select page

When you use select as a type, it takes you to a new page with those options you can select from. Is it possible to customize this page? In your example gif, I see blue icons next to your words, but in my app I don't see any icons. Your example code also doesn't mention any icons.

Along with being able to display icons next to each selection, I would like to add a text field at the bottom of the select options to allow a user to type in and use a new option that doesn't exist in the current list.

Form Validation issue

Form validation not working: You attempted to set the key backgroundColor with the value "transparent" on an object that is meant to be immutable and has been frozen.

Picker error. Attempted to set a key on an object that is meant to be immutable.

Error : You attempted to set the key backgroundcolor with the value "transparent"
on an object that is meant to be immutables and has been frozen.

"react": "16.3.1",
"react-native": "0.55.3",
"native-base": "^2.4.2",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"

react-native info

Environment:

OS: Windows 7
Node: 8.9.1
Yarn: Not Found
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)

react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Android Device

Android version: Android 5.1.1

Group Custom Components will not show up on form

Trying to group custom components together. Ends up not showing on form at all. Grouping components built into form builder works fine, and showing custom components outside of grouping works as well.
Here is the code. Any help would be appreciated...

    {
      type: 'group',
      name: 'hardware_issues',
      fields: [
        {
          type: "customSelect",
          multiline: true,
          placeholder: descriptionPlaceholder,
          name: "appliances",
          title: "Appliances",
          formOptions: {
            category: "Hardware & OS",
          },
        },
        {
          type: "customSelect",
          multiline: true,
          placeholder: descriptionPlaceholder,
          name: "peripheral",
          title: "Peripherals",
          formOptions: {
            category: "Hardware & OS",
          },
        },
      ],
    },

Trigger validation on button clcik

I am unable to show validation message on button click. Kindly let me know how can I achieve this.

How do I know if the form has invalid input values?

I'm using autoValidate. On my submit, how can I check to see if any of the fields are invalid? (e.g. empty when required). I was hoping for a method on the form generator called isValid, or something.

Also, the field validation doesn't fire until I go in the field and type something first, which isn't particularly useful when using the required attribute.

Merge Error Background Color

please merge to brach master

link

       <View style={{...styles.pickerMainAndroid, ...{
        backgroundColor: theme.pickerBgColor,
        borderBottomColor: theme.inputBorderColor,
        borderBottomWidth: theme.borderWidth,   
    }}}>

`

thanks in advance

How Set Value from edit

how do I set value if I get the value from the state,
so I want to edit the form and value I get from the state

customValidation example

I am not sure exactly how to use a "customValidation", I defined the function (along with a console.log statement to ensure it was arriving into the function), and then passed in into the form, but I dont seem to be calling the function as expected?

function validate(field) {
   console.log('validating',field);
   let error = false;
   let errorMsg = '';
   if (field.name === 'username' && !(field.value && field.value.trim())) {
     error = true;
     errorMsg = 'Username is required';
   }
   if (field.name === 'password' && !(field.value && field.value.trim())) {
     error = true;
     errorMsg = 'Password is required';
   }
   return { error, errorMsg };
}

<GenerateForm
            ref={(c) => {
              this.formGenerator = c;
            }}
            fields={fields}
            customValidation={validate}
          />

Error Background Color

Error : You attempted to set the key backgroundcolor with the value "transparent"
on an object that is meant to be immutables and has been frozen
this error is located at : in pickerfield ( at index.js:263 )

Form validation not working: You attempted to set the key `backgroundColor` with the value `"transparent"` on an object that is meant to be immutable and has been frozen.

Hi, The form is displaying properly but I get an error when I enter some text:

You attempted to set the key backgroundColor with the value "transparent" on an object that is meant to be immutable and has been frozen.

Any ideas?

Android: No keyboard on release build

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
Memory: 46.17 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.2 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.8.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 14, 22, 23, 24, 25, 26, 27, 28
Build Tools: 22.0.1, 23.0.1, 25.0.0, 25.0.1, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5264788
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0 => 16.6.0
react-native: 0.57.4 => 0.57.4

I'm using the latest version of this package and "native-base": "^2.11.0".

Everything worked fine in debug build, but in release build, I have no keyboard that shows up when I enter an input field?!

That's pretty weird...