More elaborate example of using Custom Form components?

[peterlazar1993]

What properties are required in the customFields object? I was hoping to use this component to get the value of a custom picker. The picker has a state property called selected which is the value of this picker. How should I go about implementing this functionality?

[peterlazar1993]

This is the custom picker let's say, I want to be able to access the selected property from the state, how would I go about this?
https://gist.github.com/peterlazar1993/c9b092bb2fe641fafcaf2f0a150161a9

[julianocomg]

The selected value always come from top, so use props instead of state, like this:

export default class EmojiStrip extends Component {
  constructor(props) {
    super(props);
    this.emojis = ['smiley', 'neutral_face', 'disappointed', 'x'];
  }

  static defaultProps = {
    selected: 'hello',
    onSelectEmoji: () => {}
  };

  isEmojiSelected = (emoji) => {
    if (this.props.selected === emoji) {
      return true;
    }
    return false;
  }

  renderEmojis = () => this.emojis.map((emoji, index) =>
    <Emoji
      key={index}
      emoji={emoji}
      enabled={this.isEmojiSelected(emoji)}
      onSelectEmoji={this.props.onSelectEmoji}
    />
  );

  render() {
    return (
      <View style={styles.container}>
        {
          this.renderEmojis()
        }
      </View>
    );
  }
}

Define the emoji custom field:

var customFields = {
  'EmojiStrip': {
    controlled: true,
    valueProp: 'selected',
    callbackProp: 'onSelectEmoji',
  }
}

<Form ref="form" customFields={customFields}>
  <EmojiStrip type="EmojiStrip" name="emoji" selected="smiley" />
</Form>

Get the value:

this.refs.form.getValues().emoji

[peterlazar1993]

I got it now :), So I shouldn't control the selected value myself instead let the Form component manage it. Thanks, this library will save me a ton of time. I'll take a good look at how it is working.

[peterlazar1993]

There's another problem now, unless EmojiStrip is a direct child of Form, I am not able to extract value from it. Custom fields cannot be nested?

[julianocomg]

Can you paste your code here?

[peterlazar1993]

PracticeDetails is the parent which will hold multiple custom form fields.
https://gist.github.com/peterlazar1993/2ad88471be5afbcfc50a4903d6ebff83

[julianocomg]

Yeah.. We only have support for deep elements if they are form's direct children, but you can do something like this: https://gist.github.com/julianocomg/125c25b985fe8e3e2b773316171fad9d

Or maybe you can put a <Form> inside every child of PraticeDetails and expose a function with .getValues() etc

[peterlazar1993]

The first approach works. Thank you 👍