No labels, initValue doesn't work

[Mjuk-Biltvatt]

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?

[Mjuk-Biltvatt]

@d-a-n Any idea what the problem could be?

[ApolloMuses]

What are you wrapping the label with? maybe its a flex-box issue? I had similar issue with the input box but after a bit of tooling got it to work. So maybe adding a styles tag and a flex: 1

        <ModalPicker
            data={lengthdata}
            style={{ flex: 1 }}
            initValue="Select challenge length!"
            //keyboardShouldPersistTaps="always"
            onChange={(option) => {
              //On change set textinput as the label
              this.setState({ lengthInputValue: option.label });
              // On change at the same time push new value to firebase
              //this.props.newChallenge({ prop: 'challengeLength', value: option.key });
              }}

        >

[tiaaaa123]

Having the same issue here

[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 :)

[Mjuk-Biltvatt]

@tiaaaa123 Good idea, thank you!

[vicmpen]

Thanks for this!