Hi,
Please update react-native-gifted-form's dependency react-native-gifted-spinner to v0.0.5,make it suitable to RN28.0

There is a bug in the SelectWidget.
While rendering the options using OptionWidget inside the Select Widget, if the property multiple is set to true you have to double tap in every Option to for selecting them.

Does someone know how to solve this?

Is there a way to disable user input for text fields?

Great form library. I was wondering how you go about populating the form with initial values? Say that I want to use the form as an "edit" form. I don't see a clear way to populate the form with initial values. Thanks for the help!

When I try to set the styles via formStyles in my GiftedForm component the styles don't change. I did some debugging and when the getStyles function is called from the ValidationErrorWidget this line in the WidgetMixin returns undefined for typeof this.props.formStyles[this.props.type][styleNames[i]].

Also tried changing styles in the example app and there is no change there either.

It is throwing warnings for both Invalid prop date of type Number supplied
and Failed propType for onDateChange

do you plan to release the docs?

i flow the example, and i realize the example use GiftedForm.DatePickerIOSWidget, i didn't know what can i use in android env. or, the great project now is no intent to support android. Thanks!!!

Hi!

Is this component compatible with the default RN Navigator component?

Thanks!

Is there anyway to style the tint of the icons in the navbar for the modal?

Don't see any docs and lots of unanswered issues.

TextInput's tag should be defaultValue={this.state.value} ,but not be value={this.state.value}

i first wanna say I love gifted form. I'm half way through a project where I've used it for everything. I have lots of custom widgets, etc. BUT, losing the original APIs was a mistake. period. we need to fix it; we need to rewrite it so all these methods still work, i.e. the same names from the original APIs. there's no reason that shouldn't be the case. That's how you allow for all the automated goodness that gifted form brings, while _also_ allowing you complete customization if you're willing to drop down to the lowest JS API react native provides.

i'd just do it, but I figured there is probably some opinion about this and it's best I hear it first. ???

Hi,
Just tested your example on android.

1. missing moment in app.js
   fix import moment from 'moment';
2. missing theme
   fix replace theme with color
   <GiftedForm.SubmitWidget
   title='Sign up'
   widgetStyles={{
   submitButton: {
   backgroundColor:'cadetblue ',
   // or 'transparent' or see //https://facebook.github.io/react-native/docs/colors.html
   // themes.mainColor,
   }
   }}
3. Search on country
   It works but raises a warning: each child in an array or iterator should have a unique :key" prop. Check the render method of 'ListView'. sell https://fb.me/react-warning-keys
   Thanks,
   John

When you have an input behind the keyboard that triggers the container view's contentInset properties to raise it above the keyboard onFocus it doesn't return onBlur, but rather only once you touch the screen and slightly drag.

Also, this becomes particularly a problem if you have a long form and you are moving from one field to the next (via a handler such as onSubmitEditing). The whole form ends up hidden above the visible view area. This is likely related to #42
where I describe how programatic usage of the widget.focus() method doesn't seem to work as well as actually tapping fields.

I'm wondering if anyone knows of something we can call that can trigger it go back immediately on blur??

I see that you can set the default value of a SelectWidget by using:

defaults={{
  'frequency{4}': true
}}

But I'm passing an object in to edit it using the form so the value is dynamic based on that object. So how would I go about setting the selected value in the SelectWidget and not through the defaults.

Something like this:

<GiftedForm.SelectWidget name='frequency' title='Frequency' multiple={false} value='4'>
  <GiftedForm.OptionWidget title='Weekly'      value='1'/>
  <GiftedForm.OptionWidget title='Monthly'     value='4'/>
  <GiftedForm.OptionWidget title='Quarterly'   value='12'/>
</GiftedForm.SelectWidget>

Thanks!

Is there anyway to customize the required and not valid messages on the submit button widget? We are trying to internationalize our application and I can't see anywhere in the code of the submit widget how to customize it since they're hard coded.

Thanks in advanced for helping and for making this amazing component!

First of all if you assign a value to displayValue of GiftedForm.ModalWidget as follows:

a. moment(date).format('DD/MM/YYYY').
a. moment(date).format('DD/MM/YYYY H:mm'). Datetime formats

In short, if you're passing in the value prop it will continue to be returned from getValues and getValue for the given input after you delete all text in the input. The expected result is that it returns '';

A temporary a solution is to use onChangeText, but still then that means you need to unnecessarily add it to all your forms. It's inconsistent with the expected results. For example, if I have 2 characters: 'ab' and I delete one and then call getValue I'll get back a, but then if I delete a, you should get back '', but instead you will get back the string you passed in as the value prop.

I've searched the code and I can't for the life of me find where this mechanism to choose the value for this.props.value when what's entered is an empty string. It should be a quick fix for someone that knows.

I assume I have to set a bounded height somewhere. I'm pretty sure I've set that. If anyone has experienced this issue, I'd love to know how you solved it.

Sometime form could be large and text input could be invisible when keyboard is shown. How to fix it? I saw fixes like here: http://stackoverflow.com/questions/29313244/how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus

It would be nice to have it as built-in functionality...

Hey @FaridSafi!

As a part of last night's programming spree, I created https://github.com/danielweinmann/validate-model, which is a pretty close implementation (a.k.a copy :D) of your validation logic for GiftedFormManager, but in a separate npm package.

We could probably collaborate on that so you can clean GiftedFormManager up by using validate-model.

What do you think of that?

PS: thanks for both inspirations, BTW! It's a great work what you created!

First off this library is really great.

I ran into an issue where Modals with custom content dependent on container state aren't re-rendered due to the ModalWidget cloning the elements once at mount time. I was hoping to have a more dynamic modal which would show / hide a TextAreaWidget dependent on the value of a SwitchWidget ala below:

         <GiftedForm.ModalWidget
            ref="customMessageModal"
            title='Custom Message'
            displayValue='hasCustomMessage'
            underlayColor='royalblue'
            transformValue={(value) => (value ? 'on' : 'off') }
          >
            <GiftedForm.SeparatorWidget />

            <GiftedForm.SwitchWidget
              name='hasCustomMessage'
              title='Custom Message? (+ $1.00)'
              value={this.state.hasCustomMessage}
              onValueChange={(value) => {
                this.setState({ hasCustomMessage: value })
              }}
            />

            {this.state.hasCustomMessage ? <GiftedForm.TextAreaWidget
              name='customMessage'
              value={this.state.customMessage}
              placeholder='Custom Message'
              maxLength={120}
              multiline={true}
              style={styles.customMessage}
              onChangeText={(value) => {
                this.setState({ customMessage: value })
              }}
            /> : <View />}

            <GiftedForm.NoticeWidget title='Optionally add a custom welcome message that will be sent before any other messages. (Max 120 characters)' />
          </GiftedForm.ModalWidget>

Any idea how to make the modal contents more dynamic?

Thanks!

Here is my code. Basically I want to have the SubmitWidget and some other component in the same line. But the values passed to onSubmit function is {}. It works if I move the SubmitWidget outside the view.

<GiftedForm
  clearOnClose={false}
  openModal={(route) => {
    this.props.navigator.push(route)
  }}
  formName={COMMENT_FORM}>

  <GiftedForm.TextAreaWidget
    name='comment'
    title='Comment'
    placeholder='Enter your comments'
     autoFocus={true} />

    <View style={{flex: 1, flexDirection: 'row'}}>
      <View style={{flex: 0.8}}>
        <GiftedForm.SubmitWidget
          title='Submit'
          onSubmit={(isValid, values, validationResults, postSubmit=null, modalNavigator=null) => {
            if (isValid) {
              this.submitComment(values).
                then(() => {
                  GiftedFormManager.reset(COMMENT_FORM);                 
                });
              }
            }}
          />
        </View>
        <View style={{flex: 0.2}}> 
          SOME OTHER COMPONENT
        </View>
    </View>
</GiftedForm>

On WidgetMixin.js line 215 wrong require
should write like
const imageSrc = hasValidationErrors ?require('../icons/delete_sign.png'):require('../icons/checkmark.png');

return ( <Image style={this.getStyle('rowImage')} resizeMode={Image.resizeMode.contain} source={imageSrc} /> );

Hey @FaridSafi! Last night I couldn't bare struggling with scroll/focus problems and having to deal with state/validation logic while fixing things. So I created https://github.com/danielweinmann/react-native-stateless-form ;)

It is supposed to be a different implementation of your work, and since you said that in a next big version you wanted to have the GiftedForm stateless, I think we could collaborate to integrate the two projects. StatelessForm already has 3 major differences from GiftedForm, apart of being stateless:

1. It implements scroll based on widget position, so it works much better IMO.
2. It implements auto-focus on next inputs and returnKeyType accordingly.
3. It is aware of keyboard state, so it is easy to implement new things with this in mind.

All 3 things work on iOS only, for now. But my next move will be to try and make it work on Android.

For now, I only implemented InlineTextInput widget, which is a simplified copy of TextInputWidget. But I'd really like to have all your great widgets ported as well ;) every time I need one of them I'll do it ;)

What do you say?

hi! i was wondering if there is a way to change the color of 'clearButtonMode' image that appears on the right side of the text view.

This is likely a problem with my understanding rather than program, but at a loss, so I'll make an issue.
Sorry if overlooking the obvious.

Ultimate Goal: have the SubmitWidget isDisabled tied to !isValid. I don't want to have the submit button enabled unless values of TextInputWidget(s) are valid.

Disclosure: new to react, could be totally mistaken. Believe I need something like "isDisabled={this.state.foobar}" in SubmitWidget to have it change appearance when input changes.

So either use state (of ancestor), or have passed in something as dependent upon state in through prop of SubmitWidget.

Realize I can do something onSubmit checking isValid, but from the UX point of view, would prefer not to have a button that can be hit only to say don't hit button yet.

Don't see obvious, not hiding in validator way, calling callback (or whatever) to set state in TextInputWidget

Is there a way to display options widgets in a selectwidget horizontally? I am not sure which style I must change in selectwidget to get this to work.

Something like below

<GiftedForm.SelectWidget name='direction' title="Direction" multiple={false} widgetStyle= {{flexDirection: 'row'}}>
          <GiftedForm.OptionWidget title="A"   style= {{width: width / 2}}/>
          <GiftedForm.OptionWidget title="B"  style= {{width: width / 2}} />
        </GiftedForm.SelectWidget> 

Thanks!

my code is same as the example with some fields removed and renamed.
on submit empty form with default value works fine. if it does not have default value it throws the following error:

My Code:

<View style = {styles.container}><GiftedForm
        formName='signupForm' // GiftedForm instances that use the same name will also share the same states
        openModal={(route) => {
          Actions.SignUpModalScene({ ...route, title: route.getTitle()});
        }}

        clearOnClose={true} // delete the values of the form when unmounted

        defaults={{
          /*firstName: 'fff',
          lastName: 'fff',
          userName:'fff',
          password:'fff',
          emailAddress:'fff',
          zipCode:'fff',*/
        }}

        validators={{
          firstName: {
            title: 'First Name',
            validate: [{
              validator: 'isLength',
              arguments: [3, 75],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          lastName: {
            title: 'Last Name',
            validate: [{
              validator: 'isLength',
              arguments: [3, 75],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          userName: {
            title: 'Username',
            validate: [{
              validator: 'isLength',
              arguments: [3, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            },{
              validator: 'matches',
              arguments: /^[a-zA-Z0-9]*$/,
              message: '{TITLE} can contains only alphanumeric characters'
            }]
          },
          password: {
            title: 'Password',
            validate: [{
              validator: 'isLength',
              arguments: [6, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          emailAddress: {
            title: 'Email address',
            validate: [{
              validator: 'isLength',
              arguments: [6, 255],
            },{
              validator: 'isEmail',
            }]
          },
          zipCode: {
            title: 'Zipcode',
            validate: [{
              validator: 'isLength',
              arguments: [2],
              message: '{TITLE} is required'
            }]
          },
        }}
      >

        <GiftedForm.SeparatorWidget />
        <GiftedForm.TextInputWidget
          name='firstName' // mandatory
          title='First name'
          image={require('../../res/icons/color/user.png')}
          placeholder='Marco'
          clearButtonMode='while-editing'
        />

        <GiftedForm.TextInputWidget
          name='lastName' // mandatory
          title='Last name'

          image={require('../../res/icons/color/user.png')}

          placeholder='Polo'
          clearButtonMode='while-editing'
        />


        <GiftedForm.TextInputWidget
          name='userName'
          title='Username'
          image={require('../../res/icons/color/contact_card.png')}

          placeholder='MarcoPolo'
          clearButtonMode='while-editing'

          onTextInputFocus={(currentText = '') => {
            if (!currentText) {
              let userName = GiftedFormManager.getValue('signupForm', 'userName');
              if (userName) {
                return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
              }
            }
            return currentText;
          }}
        />

        <GiftedForm.TextInputWidget
          name='password' // mandatory
          title='Password'

          placeholder='******'


          clearButtonMode='while-editing'
          secureTextEntry={true}
          image={require('../../res/icons/color/lock.png')}
        />

        <GiftedForm.TextInputWidget
          name='emailAddress' // mandatory
          title='Email address'
          placeholder='[email protected]'

          keyboardType='email-address'

          clearButtonMode='while-editing'

          image={require('../../res/icons/color/email.png')}
        />
        <GiftedForm.TextInputWidget
          name='zipCode'
          title='Zipcode'
          image={require('../../res/icons/color/contact_card.png')}

          placeholder='02201'
          clearButtonMode='while-editing'

          onTextInputFocus={(currentText = '') => {
            if (!currentText) {
              let zipCode = GiftedFormManager.getValue('signupForm', 'zipCode');
              if (zipCode) {
                return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
              }
            }
            return currentText;
          }}
        />
          <GiftedForm.SeparatorWidget />

        <GiftedForm.SubmitWidget
          title='Sign up'
          widgetStyles={{
            submitButton: {
              backgroundColor: theme.signUpBtnColor,
            }
          }}
          onSubmit={
                      (isValid,
                       values,
                       validationResults,
                       postSubmit = null,
                       modalNavigator = null) =>
                       {
                          if (isValid === true) {
                            // prepare object
                            //values.gender = values.gender[0];
                            //values.birthday = moment(values.birthday).format('YYYY-MM-DD');

                            /* Implement the request to your server using values variable
                            ** then you can do:
                            ** postSubmit(); // disable the loader
                            ** postSubmit(['An error occurred, please try again']); // disable the loader and display an error message
                            ** postSubmit(['Username already taken', 'Email already taken']); // disable the loader and display an error message
                            ** GiftedFormManager.reset('signupForm'); // clear the states of the form manually. 'signupForm' is the formName used
                            */
                          }
                          else {
                            postSubmit(['No Values Entered']);
                          }
                        }
                    }

        />

        <GiftedForm.NoticeWidget
          title='By signing up, you agree to the Terms of Service and Privacy Policity.'
        />

        <GiftedForm.HiddenWidget name='tos' value={true} />

      </GiftedForm>
    </View>);

Is anyone else experiencing the same issue?

Can you share the images that used on sample source code?

hi! i was wondering if it's possible to style the 'placeholder' text. would like to change it's color.

When I fill the form and then tap on a pre-filled out field. The field will clear and place a random character in the field. I tried the example app and was experiencing the same issue.

Right button in Navigator has a very low visibility so I was thinking of adding a custom button in Modal view to close the modal and select the value. So far I'm able to close the modal but not able to update the display value of the field. Any suggestion?

        <GiftedForm.ModalWidget
          title='Recorded At'
          displayValue='recorded_at'
          scrollEnabled={false}>

          <GiftedForm.SeparatorWidget/>
          <GiftedForm.DatePickerIOSWidget
            name='recorded_at'
            mode='datetime'
            timeZoneOffsetInMinutes={this._getTimezoneOffset()}
            getDefaultDate={() => new Date() }
          />
          <Button
            onPress={() => this.props.navigator.pop()}
            style={{
              backgroundColor: '#3F5C7A',
              margin: 10,
            }}
            textStyle={{color: '#fff'}}>
            Done
          </Button>
        </GiftedForm.ModalWidget>

Great library!

1. I want to have x, v images on right corner (without replacing left image). So it could work even for missed left image. Is it possible?
2. How to customize placement of error message, it is too low for my form by default...
3. Is it possible to implement optional email validation - empty OR valid email (or other validation)? As I see now email is required to pass email validation.

reset and resetValue in GiftedFormManager both call handleReset. But there is a handleResetValues which looks like it would be more logical to call from resetValue. Not familiar enough with code to actually call this an error, but it seems odd.

I have a date modal just like the docs, like this:

<GiftedForm.ModalWidget
  title='Last Activity'
  displayValue='lastActivity'
  scrollEnabled={false} 
>

  <GiftedForm.SeparatorWidget/>
  <GiftedForm.DatePickerIOSWidget
    name='lastActivity'
    mode='date'

    getDefaultDate={() => {
      return moment().toDate();
    }}
  />
</GiftedForm.ModalWidget>

This modal shows up with just a check box, like this:

But is there any way to go back from this and cancel any input, like a back or cancel button in the top left of the navbar?

Thanks!

Cannot set initial values, onValueChange is not called also (for text widget)

hi! i was wondering if it's possible to custom style the text input fields. if so, how?

how do we get values for input field on the submit button clicked?

hi! i was wondering if there is a way to change the color of the error message for the validation. at the moment they are: red

Looking through the code an examples, seems the only way to hide the title is to not provide it. I would like to provide titles but not have them displayed, as my form style uses placeholders for the titles yet the validation messages rely on the title for the name of the field.

After looking through the code, seems like an easy addition and when I get home I'll see about submitting a pull request.

Is this component Compatible with react-native-router-flux?

Two minor things/questions.

1. Is this var meant to be global or is this a typo?
2. For the example code:

clearOnClose: false, // delete the values of the form when unmounted

there should not be a comma here correct? This causes an Unidentified character exception.

Also, the example code doesn't seem to work for me at all. I just get an error "Namespace attributes are not supported. ReactJSX is not XML". It may be good to add an example dir with an xcode project that you could run similar to what they did with the react native UI explorer

Tried a few things. Not sure what to replace it with, but it's very needed. I'm not sure how anyone else hasn't noticed this, but I assume because most people are using ScrollView. But ScrollView has its own problems with automatically shifting elements above the keyboard (which I mentioned about a month ago in another issue)--it doesn't do it correctly.

Hi Guys.

I've got a "Save" button in the top right of my navbar that I would like to use to submit my Gifted Form (basically the onSubmit stuff in GiftedForm.SubmitWidget).

I looked through the GiftedFormManager to see if there was an external method to call but don't see any.

Any ideas?

Many Thanks!

Josh

The new .focus() method doesn't seem to trigger the same functionality as when you tap a field. The page doesn't scroll the field above the keyboard.

I am trying to run the example but I keep getting Command /bin/she failed with exit code 1.

Node 4.3
React Native 0.20
Xcode 7.2

Has anyone rani to this problem?

var key = '\'gender{' + profile.gender + '}\''; var genderDefault = {}; genderDefault[key] = true; console.log(genderDefault); key = '\'zhuanye{' + profile.zyId.name + '}\''; var zhuanyeDefault = {}; zhuanyeDefault[key] = true; console.log(zhuanyeDefault); key = '\'title{' + profile.titleId.name + '}\''; var titleDefault = {}; titleDefault[key] = true; console.log(titleDefault); key = '\'zgzh{' + profile.zgzId.name + '}\''; var zgzhDefault = {}; zgzhDefault[key] = true; console.log(zgzhDefault); key = '\'specialty{' + profile.zkId.name + '}\''; var specialtyDefault = {}; specialtyDefault[key] = true; console.log(specialtyDefault);
defaults={{genderDefault,zhuanyeDefault,titleDefault,zgzhDefault,specialtyDefault}}

why?

I am using gifted form in my project and we just updated our imports to match the new standard coming in RN 26. In doing so we found that this package has not been released with the new standard yet. I fixed this by pointing my package.json to the github repo.

I then found that one of this package's dependencies (react-native-google-places-autocomplete) has the same issue. To fix it I had to fork this repo and point the dependency to the react-native-google-places-autocomplete github repo.

Please push new releases of both this package and the react-native-google-places-autocomplete package that include the new import standards so gifted form can be pulled from npm and be up to date with RN 26 standards.