1

I'm using React Native with NativeBase and would like to make the labels of my Picker more complicated than just one plain string of text.

But is it even possible to pass elements as the label, say multiple child elements wrapped in a single top-level element?

Or do Pickers only support plain text as labels?

As requested by bennygenel, here's a version of what I've tried:

export default class ThingPicker extends React.Component {

  render() {
    const {
      initialThing,
      things,
      onThingChanged,
    } = this.props;

    const orderedThings = things.sort();

    return (
      <Picker
        selectedValue={initialThing}
        onValueChange={onThingChanged}>
        {buildThingItems(orderedThings)}
      </Picker>
    );
  }
}

function buildThingItems(orderedThings) {
  let items = orderedThings.map(th => {
    const it = th === "BMD" ? (<Text key={th} label={"foo"} value={"bar"}}>Hello</Text>)
    : (<Picker.Item key={th} label={th} value={th} />);

    return it;
  });
}
hippietrail
  • 15,848
  • 18
  • 99
  • 158
  • You can give any component as child I think. Why don't you try and see? – bennygenel Sep 15 '17 at 12:27
  • @bennygenel: I wasn't sure what the syntax would be. Just start with the open tag? Inside quote marks? Inside parentheses, curly braces, double curly braces? (-: I guess I will go try a bunch of combinations ... – hippietrail Sep 15 '17 at 12:29
  • If you check the [docs for Picker](http://docs.nativebase.io/Components.html#picker-def-headref) you can see that it has multiple child components. you can create your own Item component and add that instead of the default one comes with Nativebase – bennygenel Sep 15 '17 at 12:31
  • @bennygenel: Oh I'm too much of a newbie to React and co to spot that as a possibility - thanks! – hippietrail Sep 16 '17 at 00:33
  • So I tried ouputting one Text component instead of an Item and it came up blank until I gave it a label property, which was again just plain text )-: – hippietrail Sep 16 '17 at 07:06
  • 1
    Can you add the code you tried please so maybe I or someone might be able to help better. – bennygenel Sep 16 '17 at 07:18
  • @bennygenel: Done. I added a modified version based on your previous feedback. – hippietrail Sep 16 '17 at 07:54
  • 1
    Try returning `Text` component as a child of `Picker.Item` this might work – bennygenel Sep 16 '17 at 07:57
  • 1
    @bennygenel: Making it a child of Picker.Item did not work, but assigning it to the label field did work! I'll post that as an answer. – hippietrail Sep 16 '17 at 10:45
  • 1
    Thats Great! I was gonna create a dummy project to test it out but I guess I don't have to now. – bennygenel Sep 16 '17 at 10:47

1 Answers1

0

Yes! It is possible, it just might not look very "right" for React/JSX code. Just create the elements you need and assign them to the label field:

function buildThingItems(orderedThings) {
  let items = orderedThings.map(th => {
    const it = (<Picker.Item
      key={th}
      label={currency === "BMD" ? (<Text>Hello</Text>) : th}
      value={th} />);

    return it;
  });
}
hippietrail
  • 15,848
  • 18
  • 99
  • 158