React Native Picker Cascader

Photo by Marvin Meyer on Unsplash

So if you want to cascade multiple drop downs, it is always little bit difficult to sync them through their relationship, also on mobile UI, the space is limited so we have also limited space for multiple drop-downs.

For both above mentioned problems i designed picker cascader dropdown to solve both the issues.

Cascader also have search option.

You can pass data source as java script nested array, note that children object is always a array even if contain only one child.

<PickerCascader style={{ padding: 10 }} data={[
          {
            key: '1', text: 'Australia', children: [{
              key: '2', text: 'New South Wales',
              children: [{ key: '3', text: 'Sydney' }, { key: '4', text: 'Wollongong' }]
            },
            {
              key: '5', text: 'Victoria',
              children: [{ key: '6', text: 'Melbourne' }, { key: '7', text: 'Geelong' }]
            }
            ]
          },
          {
            key: '10', text: 'Canada',
            children: [
              {
                key: '11', text: 'Alberta', children: [{ key: '12', text: 'Calgary' },
                { key: '13', text: 'Brooks' }]
              },
              {
                key: '14', text: 'British Columbia', children: [{ key: '15', text: 'Vancouver' },
                { key: '16', text: 'Vernon' }]
              }

            ]
          },
          {
            key: '20', text: 'United States',
            children: [
              {
                key: '21', text: 'New York', children: [{ key: '22', text: 'Albany' },
                { key: '23', text: 'Norwich' }]
              },
              {
                key: '24', text: 'Pennsylvania', children: [{ key: '25', text: 'Farrell' },
                { key: '26', text: 'Parker' }]
              }

            ]
          }
        ]}
          onValueChange={(item) => this.valueChanged(item)}>
          >
        </PickerCascader>

npm : https://www.npmjs.com/package/react-native-picker-cascader

github : https://github.com/asifsha/react-native-picker-cascader