Picker - fix not responding to external value change when renderPicker is used

[M-i-k-e-l]

Description

Picker - fix not responding to external value change when renderPicker is used.
This does not solve this issue when using useNativePicker, that requires a bigger change.

Can be tested with the following PlaygroundScreen:

import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {View, Text, Card, TextField, Button, Picker, PickerItemValue} from 'react-native-ui-lib'; //eslint-disable-line

export default class PlaygroundScreen extends Component {
  render() {
    return (
      <View bg-dark80 flex padding-20 center>
        <View marginT-20>
          <TextField placeholder="Placeholder" />
        </View>
        <Card height={100} center padding-20>
          <Text text50>Playground Screen</Text>
        </Card>
        <View flex center>
          <Button marginV-20 label="Button"/>
        </View>
        <PickerBug/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {},
});

class PickerBug extends React.Component {
  state = {
    val: 1
  };

  getNumberPickerRenderer = (label: string | undefined) => (value?: PickerItemValue) => (
    <View padding-20 row>
      <View marginR-s5 flex>
        <Text body>{label}</Text>
      </View>
      <View>
        <Text useCustomTheme bodyBold>
          {value ?? null}
        </Text>
      </View>
    </View>
  );

  numberOptions = [
    {label: '1', value: 1},
    {label: '2', value: 2},
    {label: '3', value: 3}
  ];

  render() {
    return (
      <>
        <Text>Real value: {this.state.val}</Text>
        <Button link onPress={() => this.setState({val: this.state.val + 1})} label="+"/>
        <Button link onPress={() => this.setState({val: this.state.val - 1})} label="-"/>
        <Picker
          migrate
          value={this.state.val}
          onChange={(val: number) => this.setState({val})}
          renderPicker={this.getNumberPickerRenderer('label')}
        >
          {this.numberOptions.map(item => (
            <Picker.Item key={item.value} value={item.value} label={item.label}/>
          ))}
        </Picker>
      </>
    );
  }
}

Changelog

Picker - fix not responding to external value change when renderPicker is used (without useNativePicker)

[Inbal-Tish]

Don't you need to update prevValue as well?

[M-i-k-e-l]

I don't think so, not sure what prevValue is used for, it seems to reside only in the previous if statement.

[Inbal-Tish]

We store prevValue on state for the getDerivedStateFromProps comparison. I think it has to be updated every time we update value otherwise the condition won't be up-to-date...

[M-i-k-e-l]

ok, updated