michaelcereda / react-native-form-generator Goto Github PK

style={{color:'white', fontSize: 14}}
on InputField doesn't change the text color that is being inputted into the field

I was looking around the examples and the docs, but I couldn't find anywhere an option for the to be with asterisks, to be a password field. Is there a way to do that?

import Icon from 'react-native-vector-icons/FontAwesome';
class Icon2 extends Component {
  render() {
    return (
      <Icon {...this.props} />
    );
  }
}
<InputField iconLeft={<Icon2 />} />

Seems to break layout in input fields – the actual input field / placeholder will disappear.

I set the label of Form,
but It seems not work at all?

iOS:

Android:

RN 0.30.0 / react-native-form-generator@^0.9.6

The form is pretty much a few simple links:

<Form>
  <Separator ... />
  <LinkField .../>
</Form>

What am I missing?

Hello,
How to use datepickerfield? everytime I get invalidDate when I tried to set value.

example :

    value={new Date()} // invalidDate
    value={moment()} // invliadDate

please help me

When I try to run your formsview.js example I get the red warning screen in the iPhone simulator saying "Unrecognized font family 'Ionicons'

Any idea what I can do to move beyond this point?
Thanks.

As part of the user experience, I want to be able to close picker modals programmatically when the user selects the next field in the form.
It seems that inside the PickerComponent, the _togglePicker function (https://github.com/MichaelCereda/react-native-form-generator/blob/master/src/lib/PickerComponent.ios.js#L53) does exactly this, but it's not accessible from outside the class.

Would it be possible to make this method publicly accessible?

Is there a reason that KeyboardAwareScrollView is commented out in the index.js file?

This means i am unable to use it (easily) in projects.

I saw that each field type has two different versions. One for ios and one for android (for example InputField.ios.js and InputField.android.js).
What is the reason for this? That seems to go completely against the philosophy of react-native (having a unified version of an app between different platforms) and is a potential source of inconsistencies (like 'right Icon' that appear on the same lime as the textfield on ios but on a different one on android due to different default stylesheets between the two classes...)
To me, it would make more sense to have android and ios share as much code as possible (same default stylesheets and templates...)

For my project, I'm styling DatePickerField exactly like an InputField.

Specifically, this means that there's placeholder text that gets replaced by the value, when value exists. This is a more literal interpretation of the word placeholder, as it seems like you're using placeholders like labels.

Presently I thought the only way to do this would be something like the following?:

        placeholder={()=>{ this.refs.datepicker....fieldvalue ? 'Birthday' : null }}

except the placeholder styling remains...

it would be nice if the current behavior was more opt-in, or at the very least could be styled depending on the state. I know this is kinda a pain without css-like classes, but maybe like the following?:

placeholderStyle={[ styles.regular, hasValue && styles.filled, isInvalid && styles.invalid ]}

or maybe even

placeholderComponent={<Placeholder />}

Looks like it's missing a style prop or two:

https://github.com/MichaelCereda/react-native-form-generator/blob/master/src/lib/DatePickerComponent.ios.js#L93

https://github.com/MichaelCereda/react-native-form-generator/blob/master/src/lib/DatePickerComponent.ios.js#L95

so users can't currently style the DatePicker value field exactly as an input field looks.

Tested with Android. Maybe this error is present on iOS too.

<InputField ref="hostname" label="Hostname" value={this.props.settings.hostname} placeholder="Hostname"/>
<InputField ref="path" label="Path" value={this.props.settings.path} placeholder="Path" />

How are we to use the dateTimeFormat prop for TimePickerField and DatePickerField? For example, I only want the time to display as '5:30 PM', not '5:30:22 PM. Essentially, I don't want to seconds to show up, as they're kind of unnecessary for my case.

Any help would be greatly appreciated.

I have tried to override the help text component with mine but it doesn't work
After a few tests it comes from the file Field.js
I added brackets for the second part of the evaluation expression to fix it.

------- before --------
let fieldHelpText =
this.props.helpTextComponent
|| (this.props.helpText)
?
: null;

------- after ----------
let fieldHelpText =
this.props.helpTextComponent
|| ((this.props.helpText)
?
: null);

Maybe it comes from the evaluation order.
Could you reintegrate this fix please?

Thanks

PA

@MichaelCereda Have you consider exposing the Field component so that custom fields can be created and integrated seemlessly with the form component?

In iOS everything work but on Android the "right Icon" is not on the same line.. Do you know why ?

Here's my code :
<InputField ref='login' placeholder={I18n.t('mail')} returnKeyType={"next"} keyboardType={"email-address"} validationFucntion={this.props.validateLogin} iconRight={ <Icon name='ios-arrow-forward' size={30} style={[ {alignSelf:'center',marginRight:10, color: "#61d062"}, ((self) => { if (!!(self.refs.loginForm && self.refs.loginForm.refs.login)) { if (!self.refs.loginForm.refs.login.valid) return {color: '#d52222'} } })(this)]} /> } onEndEditing={() => { this.props.validateLogin(); this.refs.loginForm.refs.pwd.focus() }} />

the markdown doc states that keyboardType can be set to '' or 'email'. Either value causes form to shake and be unusable. The problem can be fixed by not having the attribute present at all, or by setting it to 'email-address'.

On ios, RN 27.2 the datepicker using the example code throws several warnings:

Warning: Failed propType: Invalid prop date of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

Warning: Failed propType: Required prop onDateChange was not specified in RCTDatePicker. Check the render method of DatePickerIOS.

Warning: Failed propType: Invalid prop maximumDate of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

Warning: Failed propType: Invalid prop minimumDate of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

Hey !

How can I use setValue() on Picker row?

The code in "normal" fields works but not with Picker.

this.refs.registrationForm.refs.password.setValue(""); // OK 
this.refs.registrationForm.refs.height.setValue(store.user.user.height); // NOT OK

On iOS you can set value programmatically, but on Android a ReferenceError is raised because the method setValue is absent.

Hey !

I've tried your example and I want to wrap a PickerField in the CustomModal.

It works fine with DatePickerField but not with the PickerField.

Here is my code

    <PickerField ref='height'
      label='Height (cm)'
      placeholder='100'
      prettyPrint={true}
      pickerWrapper={<CustomModal />}
      options={this.heightValues}
    />

    <DatePickerField ref='birthday'
      minimumDate={new Date('1/1/1900')}
      maximumDate={new Date()}
      placeholder='Birthday'
      mode='date'
      pickerWrapper={<CustomModal />}
    />

Hi,

<Form ref='form'>
   <TextInput  ref='hello' />
</Form>

it seems that

this.refs.hello

does not exist. Is Form stealing them? The only ref available when doing

console.log(Object.keys(this.refs))

is 'form'.

Hi!
thanks for the lib! One question: I'm using InputField and find it not ideal that the value of the entered text is stored in the state of the component and it is therefore possible for it to drift away from the value that is in my state object.
More specifically: I have my state object that contains the value that the text field should display. Say I render the textfield with value={this.state.value} (renders ok) then I change the value somewhere else which triggers a re-render. The InputField will ignore this new value. What I can do is use the setValue but I believe that goes against React.

So my question is - is it feasible to remove the value from state altogether (?), or alternatively implement componentWillReceiveProps? It doesn't seem difficult to get rid of it, looking at the code.
This might apply to other components too.

edit: so I tried both (getting rid of it & componentWillReceiveProps) and they seem to work both with no problem.

Using the following example:

<PickerField ref='state'
label='State'
onFocus={() => {console.log("test onFocus")}}
onPress={() => {console.log("onPress of state picker");}}
options={stateOptions}/>

These events do not seem to be firing.

thanks for the awesome form

Hi, it's mostly a heads-up, since you're working on a new version.

I had opened this issue (facebook/react-native#9862) on RN, but after isolating the issue, I found out it is a form-generator issue.

I commented InputComponent.js so that handleLayoutChange and handleLabelLayoutChange are no-ops.

I'm not sure about the implications, but it's working fine in my Android app so far.

  handleLayoutChange(e){
    // let {x, y, width, height} = {... e.nativeEvent.layout};
    //
    // this.setState(e.nativeEvent.layout);
    // //e.nativeEvent.layout: {x, y, width, height}}}.
  }

  handleLabelLayoutChange(e){
    // let {x, y, width, height} = {... e.nativeEvent.layout};
    //
    // this.setState({labelWidth:width});
    // //e.nativeEvent.layout: {x, y, width, height}}}.
  }

Am I right in thinking this doesn't work to set initial value?

Hey Michael

Got some warnings about "x events ahead of JS - try to make your JS faster" when using an InputField (with maxLength, not sure if that matters) and looked a little deeper at your code.

You shouldn't use this.func.bind(this) in render, as it creates a new function on every render. This might be the problem, as there are quite a few function binds in lib/*.js

You can bind in the constructor, or bind to the component instance with:

   boundFunction = () => {

  }

which makes this.boundFunction available in render without bind.

You might want to consider eslint with the react plugins, it's a lifesaver for me:
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

See also
http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.1l6dw4m4k

Unable to style help text would be nice to send style through props?

Hi @MichaelCereda

I'm thinking of contributing to this repo. What I noticed, and what annoys me A LOT is that, when using the TextInput component, you have to tap twice on a TextInput to get to another TextInput. On first touch on another TextInput, the keyboard hides, I think in iOS it's called something like "resigning first responder", not sure though. And then on second touch, one can focus the next TextInput.

Do you have any Idea on what the issue could be here? This is a really strange behaviour, and when you try out true native apps you won't see this.

Thanks

Hello @MichaelCereda.
I use react-native-form-generator,

in your example, an inputfield to another inputfield situation.

first inputfiield touch -> touch somewhere for hide keyboard -> second touch inputfield

how to remove unnecessary hide keyboard action?

It maybe related to Centre text in case where the distance between baselines is larger than the font size (68d483e) which seems to effect text lIne height.

Not sure why, but helpText is not shown for <LinkField>. It only works for <SwitchField>.

 <Form ref='logInForm' label="Information" onChange={this._handleFormChange.bind(this)}>
    <Separator label='Please read'/>
    <LinkField label='Terms and Conditions'
                               onPress={this._openTermsAndConditions.bind(this)}
                               helpText='By signing up, I agree to the terms and conditions.'/>
</Form>

Great work! Thinking about ripping tcomb out and replacing it with yours.

What would be the best way to Modalize some components? For example, a date field that displays

MM/DD/YYYY

and when clicked, a full DatePicker comes up inside a Modal, not inline.

I assume this would necessitate a custom component; is there a clever way to extend without duplicating everything? I'm looking at your source now, but don't see a clear path to this goal.

edit: maybe a prop could replace this line in your new branch: https://github.com/MichaelCereda/react-native-form-generator/blob/0.9-beta/src/lib/DatePickerComponent.ios.js#L71 which would allow for a custom DatePicker view.

What is the problem when I am running this on android?

Using the code below, this.state.formData.gender remains"undefined", unless the picker was set to a different value (and back in case you actually want the default value). I think the desired behavior would be that this.state.formData.gender is set to "M" in this situation, even when the user does not change the picker value.

handleFormChange(formData){
  this.setState({formData:formData})
}

render(){
  return(<ScrollView keyboardShouldPersistTaps={true} style={{marginTop: h.scale(50), paddingLeft:10,paddingRight:10, height:200}}>
  <Form
    ref='paymentForm'
    onChange={this.handleFormChange.bind(this)}>

    <PickerField
      ref='gender'
      label='Gender'
      value='M'
      options={M: "Male", F: "Female"}/>
    </Form>
  </ScrollView>);
}

<InputField ref="thing" />

<TouchableHighlight onPress={this.refs.thing.focus}>Focus</TouchableHighlight>

Not currently possible, correct? Would be useful for quite a few purposes.

I need my input forms to be read-only until I put them in edit mode.

So I need to manage editable and disabled props of the fields.

InputField is easy:

<InputField
      placeholder='Namn'
      ref='contactName'
      editable={this.props.isEditable}
/>

SwitchField is not easy. I'd like to do like this:

 <WrappedSwitchField
  value={this.props.project.isActive}
  disabled={!this.props.isEditable}
  label='Active'
/>

or even

 <WrappedSwitchField
  value={this.props.project.isActive}
  editable={this.props.isEditable}
  label='Active'
/>

But the switch field doesn't propagate the disabled prop to the internal switch. I could make a custom field, of course. But it would be nice if all form-generator fields were disableable (is that a word?). It would also be great if the editable prop where used everywhere (instead of disabled for switches)

How about one new line in SwitchComponent.js?

//src/lib/SwitchComponent.js
render(){
  return(<Field {...this.props}>
    <View style={this.props.containerStyle}
      onLayout={this.handleLayoutChange.bind(this)}>

      <Text style={this.props.labelStyle}>{this.props.label}</Text>
        <Switch
        onValueChange={this.handleValueChange.bind(this)}
        style={this.props.switchStyle}
        value={this.state.value} 

-->     disabled={ (typeof this.props.editable === 'undefined') ? false : !this.props.editable }/>        

    </View>

  </Field>
  )
}

Good evening,

I found some issue in form generator, when I used setValue method system on InputField application is blocked for 10 second(unblocked when value was set)

Can you please indicate wich version can i use on RN 0.24???

Without building on iOS, I'm going by what I'm seeing in the README as how things look there. There is a drastic difference on the Android side. Focusing on the Date/Time fields, the DatePickerField will only being up a date picker but on iOS it looks date and time are nicely inline. So on Android and only Android I need to add an extra time picker? This doesn't seem ideal.

Can a pure js picker be used? Something like this. I think it would need to be modified but I think parity between platforms is worth it. The iOS version is pretty sleek though. It's a challenge to reproduce it but I'm game if someone can help me develop it out a bit.

I think it is because the main file is called index.ios.js?
Could you try to rename it index.js and update the main property of the package.json accordingly ?

More info here - maxs15/react-native-spinkit#9 (comment)

Hi i'm investigating, but at the moment the time picker crashes app. Using the example code, in android, running on samsung S7

I'm trying to set value to a subsequent field based on onValueChange of another field. How would I go about doing that? I don't really see a way where the API expose that functionality? Thanks.

LinkField has reference to react-native-vector-icons but it's not in package.json. Therefore I got
Unable to resolve module react-native-vector-icons/Ionicons... error.

Unable to style the react-native Picker and PickerItem components. I attempted to use the pickerWrapper, but only the backgroundColor can be changed this way and not the font family nor font size. Thanks!