React Native - Connecting Two RNCPickerSelect's from 'react-native-picker-select'

Question

How do I change the 'items' from a 'RNCPickerSelect' when I've selected a value from another 'RNCPickerSelect'?

For example, when I select a value called 'brand' from a RNCPickerSelect, the other RNCPickerSelect displays the 'models' associated with that specific 'brandName'. Basically, I want the 'items' from the other RNCPickerSelect to be influenced by the first RNCPickerSelect.

Here's the code:

================================Brands===================================
<RNPickerSelect
            pickerProps={{ style: {overflow: 'hidden' } }}
            onValueChange={(value) => console.log(value)}
            placeholder={brandplaceholder}
  //           style={styles.dropbox}
            items={[
            { label: 'brand1', value: 'brand1' },
            { label: 'brand2', value: 'brand2' },
            { label: 'brand3', value: 'brand3' },
            ]}
            onValueChange={(val) => setBrand(val)}
          />
==========================================================================

=================================Models===================================
<RNPickerSelect
            pickerProps={{ style: {overflow: 'hidden' } }}
            onValueChange={(value) => console.log(value)}
            placeholder={brandplaceholder}
  //           style={styles.dropbox}
            items={[
            { label: 'model1', value: 'model1' },
            { label: 'model2', value: 'model2' },
            { label: 'model3', value: 'model3' },
            ]}
            onValueChange={(val) => setModel(val)}
          />
==========================================================================

===============================Model Ideas================================
            items={[
            { label: 'model4', value: 'model4' },
            { label: 'model5', value: 'model5' },
            { label: 'model6', value: 'model6' },
            ]}
                            **and**
            items={[
            { label: 'model7', value: 'model7' },
            { label: 'model8', value: 'model8' },
            { label: 'model9', value: 'model9' },
            ]}
==========================================================================

Thanks!

Answer 1

you can do that with a simple state logic. When the first picker selects, it will update the other picker's predefined items array.

import React from "react";
import RNPickerSelect from 'react-native-picker-select';

const firstPick = [
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]

const secondPick = [[
                { label: 'Football2', value: 'football2' },
                { label: 'Baseball2', value: 'baseball2' },
                { label: 'Hockey2', value: 'hockey2' },
            ]

export const Dropdown = () => {
    
   const [dynamicPickerArr, setDynamicPickerArr] = useState(firstPick)

    return (
        <RNPickerSelect
            onValueChange={(value) => {
                 // Magic here
                 // Your changed value logic should be here
                 setDynamicPickerArr(secondPick)}
             }
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
         <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={}
        />
    );
};