No labels, initValue doesn't work

For some reason initValue doesn’t work. No label appear even when I’ve selected a value.

Screenshot

Code:

<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.REASONS}
  initValue="Välj en anledning"
  onChange={(option) => {
    GLOBALS.FRANVARO.REASON = option.label;
    GLOBALS.FRANVARO.REASON_SELECTED = true;
  }}
/>
<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.LENGTHS}
  initValue="Välj antal timmar"
  onChange={(option) => {
    GLOBALS.FRANVARO.LENGTH = option.label;
    GLOBALS.FRANVARO.LENGTH_SELECTED = true;
  }}
/>
<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.DAYS}
  initValue="Välj en dag"
  onChange={(option) => {
    GLOBALS.FRANVARO.DAY = option.label;
    GLOBALS.FRANVARO.DAY_SELECTED = true;
  }}
/>

I had this code working before updating to RN 0.40.

The modal and picker itself is working fine. The lists are rendered as intended and the value itself is being stored correctly and is recieved by my API like intended. The only issue is the label.

Any ideas?

[tiaaaa123]

WorkAround!

ModalPicker can take a children which override the default button (which doesn’t show the init value) You can give this as the child:

<View>
    <Text>{this.state.selectedValue === '' ? 'YourInitialValue' : this.state.selectedValue}</Text>
</View>

@Mjuk-Biltvatt So something like that for you

<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.REASONS}
  initValue="Välj en anledning"
  onChange={(option) => {
    GLOBALS.FRANVARO.REASON = option.label;
    GLOBALS.FRANVARO.REASON_SELECTED = true;
  }}
>
    <View>
        <Text>{this.state.selectedValue === '' ? 'YourInitialValue' : this.state.selectedValue}</Text>
    </View>
</ModalPicker>

which will display your inital value if you havent selected yet. Need some styling and you can make it as beautiful as you want 😃

[vicmpen]

Thanks for this!