Connecting Pickers in React-Native

Question

Is it possible to connect two pickers so that when there is a name in the first and another name in the second it automatically assigns them?

For example: user has first_name and last_name. When the user click on first picker and select first_name automatically change the value in second picker last_name.

Answer 1

Definitely yes, it's possible. But consider that the two names need something that relate each others. I will give you an example where state handle an array of names and a pickedName, which is the value both pickers are going to display. The two pickers are simply mapping different labels with same values.

state={
    pickedName: {
      firstName: '',
      lastName: ''
    },
    names: [
      {
        firstName: 'Pinco',
        lastName: 'Pallino'
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi'
      }
    ]
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

Update: Supposing you're fetching names from a DB during screen mounting. You can do it this way:

  state = {
    pickedName: {
      firstName: '',
      lastName: '',
    },
    names: [],
  };

  componentDidMount() {
    this.getNamesFromDB();
  }

  getNamesFromDB = () => {
    // Here you can call DB to get names list.
    // So the following const wouldn't be hardcoded as I did
    const nameList = [
      {
        firstName: 'Pinco',
        lastName: 'Pallino',
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi',
      },
    ];

    // set the component state with the list you've received
    // (by default pickers show the first element of the list, so you don't need to specify pickedName,
    // but if you want to select another element you can do it this way)
    this.setState({
      names: nameList,
      // pickedName: nameList[1] // <-- to select the second element by default
    });
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

I've also created a snack if you wanna take a look. Hope I've been clear enough, I'm here for every clarifications or suggestions.