Skip to content

Instantly share code, notes, and snippets.

@RaguRam1991

RaguRam1991/Cascade Basic.js

Last active December 6, 2024 09:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RaguRam1991/be42912bb35259c538eb9a97a5348840 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RaguRam1991/be42912bb35259c538eb9a97a5348840 to your computer and use it in GitHub Desktop.
Download ZIP
cascading form react native
Raw
Cascade Basic.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { Snackbar } from 'react-native-paper';
const listCountry = [
{ countryId: '1', name: 'india' },
{ countryId: '2', name: 'uk' },
{ countryId: '3', name: 'canada' },
{ countryId: '4', name: 'us' },
];
const listSate = [
{ stateId: '1', countryId: '1', name: 'state1_india' },
{ stateId: '2', countryId: '1', name: 'state2_india' },
{ stateId: '3', countryId: '1', name: 'state3_india' },
{ stateId: '4', countryId: '2', name: 'state1_uk' },
{ stateId: '5', countryId: '2', name: 'state2_uk' },
{ stateId: '6', countryId: '2', name: 'state3_uk' },
{ stateId: '7', countryId: '3', name: 'state1_canada' },
{ stateId: '8', countryId: '3', name: 'state2_canada' },
{ stateId: '9', countryId: '3', name: 'state3_canada' },
{ stateId: '10', countryId: '4', name: 'state1_us' },
{ stateId: '11', countryId: '4', name: 'state2_us' },
{ stateId: '12', countryId: '4', name: 'state3_us' },
];
const listCity = [
{
cityId: '1',
stateId: '1',
countryId: '1',
name: 'city1_state1_country1',
},
{
cityId: '2',
stateId: '1',
countryId: '1',
name: 'city2_state1_country1',
},
{
cityId: '3',
stateId: '1',
countryId: '1',
name: 'city3_state1_country1',
},
{
cityId: '4',
stateId: '2',
countryId: '1',
name: 'city4_state2_country1',
},
{
cityId: '5',
stateId: '2',
countryId: '1',
name: 'city5_state2_country1',
},
{
cityId: '6',
stateId: '2',
countryId: '1',
name: 'city6_state2_country1',
},
{
cityId: '7',
stateId: '3',
countryId: '1',
name: 'city7_state3_country1',
},
{
cityId: '8',
stateId: '3',
countryId: '1',
name: 'city8_state3_country1',
},
{
cityId: '9',
stateId: '3',
countryId: '1',
name: 'city9_state3_country1',
},
{
cityId: '10',
stateId: '4',
countryId: '2',
name: 'city10_state4_country2',
},
{
cityId: '11',
stateId: '4',
countryId: '2',
name: 'city11_state4_country2',
},
{
cityId: '12',
stateId: '4',
countryId: '2',
name: 'city12_state4_country2',
},
{
cityId: '13',
stateId: '5',
countryId: '2',
name: 'city13_state5_country2',
},
{
cityId: '14',
stateId: '5',
countryId: '2',
name: 'city14_state5_country2',
},
{
cityId: '15',
stateId: '5',
countryId: '2',
name: 'city15_state5_country2',
},
{
cityId: '16',
stateId: '6',
countryId: '2',
name: 'city16_state6_country2',
},
{
cityId: '17',
stateId: '6',
countryId: '2',
name: 'city17_state6_country2',
},
{
cityId: '18',
stateId: '6',
countryId: '2',
name: 'city18_state6_country2',
},
{
cityId: '19',
stateId: '7',
countryId: '3',
name: 'city19_state7_country3',
},
{
cityId: '20',
stateId: '7',
countryId: '3',
name: 'city20_state7_country3',
},
{
cityId: '21',
stateId: '7',
countryId: '3',
name: 'city21_state7_country3',
},
{
cityId: '22',
stateId: '8',
countryId: '3',
name: 'city22_state8_country3',
},
{
cityId: '23',
stateId: '8',
countryId: '3',
name: 'city23_state8_country3',
},
{
cityId: '24',
stateId: '8',
countryId: '3',
name: 'city24_state8_country3',
},
{
cityId: '25',
stateId: '9',
countryId: '3',
name: 'city25_state9_country3',
},
{
cityId: '26',
stateId: '9',
countryId: '3',
name: 'city26_state9_country3',
},
{
cityId: '27',
stateId: '9',
countryId: '3',
name: 'city27_state9_country3',
},
{
cityId: '28',
stateId: '10',
countryId: '4',
name: 'city28_state10_country4',
},
{
cityId: '29',
stateId: '10',
countryId: '4',
name: 'city29_state10_country4',
},
{
cityId: '30',
stateId: '10',
countryId: '4',
name: 'city30_state10_country4',
},
{
cityId: '31',
stateId: '11',
countryId: '4',
name: 'city31_state11_country4',
},
{
cityId: '32',
stateId: '11',
countryId: '4',
name: 'city32_state11_country4',
},
{
cityId: '33',
stateId: '11',
countryId: '4',
name: 'city33_state11_country4',
},
{
cityId: '34',
stateId: '12',
countryId: '4',
name: 'city34_state12_country4',
},
{
cityId: '35',
stateId: '12',
countryId: '4',
name: 'city35_state12_country4',
},
{
cityId: '36',
stateId: '12',
countryId: '4',
name: 'city36_state12_country4',
},
];
export default function App() {
const [country, setCountry] = useState({
data: [],
selectedCountry: {},
value: null,
});
const [state, setState] = useState({
data: [],
selectedState: {},
value: null,
});
const [city, setCity] = useState({ data: [], selectedCity: {}, value: null });
const [ddfocus, setDdfocus] = useState({
country: false,
state: false,
city: false,
});
const [visible, setVisible] = useState(false);
const [snackMsg, setSnackMsg] = useState('');
const onToggleSnackBar = () => setVisible(!visible);
const onDismissSnackBar = () => setVisible(false);
const resetForm = () => {
focusField('');
setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
setState({ data: [], selectedState: {}, value: null });
setCity({ data: [], selectedCity: {}, value: null });
};
const focusField = (fld = '') => {
const obj = { country: false, state: false, city: false };
if (fld) obj[fld] = true;
setDdfocus(obj);
};
const loadCity = async (stId) => {
// load data from api call
setCity({ data: [], selectedCity: {}, value: null });
const arr = listCity.filter((ele) => ele.stateId === stId);
setCity({ ...city, data: [...arr] });
};
const loadState = async (cntId) => {
// load data from api call
setState({ data: [], selectedState: {}, value: null });
setCity({ data: [], selectedCity: {}, value: null });
const arr = listSate.filter((ele) => ele.countryId === cntId);
setState({ ...state, data: [...arr] });
console.log('arr ', arr);
};
const loadCountry = () => {
// load data from api call
setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
};
useEffect(() => {
loadCountry();
}, []);
return (
<View style={styles.container}>
<View>
<Text>Country</Text>
<ZDropDown
data={country.data}
labelField="name"
valueField="countryId"
value={country.value}
isFocus={ddfocus.country}
onFocus={() => focusField('country')}
onBlur={() => focusField('')}
onChange={(item) => {
setCountry({
...country,
selectedCountry: item,
value: item.countryId,
});
loadState(item.countryId);
focusField('');
}}
/>
<Text>State</Text>
<ZDropDown
data={state.data}
labelField="name"
valueField="stateId"
value={state.value}
isFocus={ddfocus.state}
onFocus={() => {
focusField('state');
if (!country.value) {
setSnackMsg('Select country');
onToggleSnackBar();
focusField('country');
}
}}
onBlur={() => focusField('')}
onChange={(item) => {
setState({ ...state, selectedState: item, value: item.stateId });
loadCity(item.stateId);
focusField('');
}}
/>
<Text>City</Text>
<ZDropDown
data={city.data}
labelField="name"
valueField="cityId"
value={city.value}
isFocus={ddfocus.city}
onFocus={() => {
focusField('city');
if (!country.value) {
setSnackMsg('Select country');
onToggleSnackBar();
focusField('country');
} else if (!state.value) {
setSnackMsg('Select state');
onToggleSnackBar();
focusField('state');
}
}}
onBlur={() => focusField('')}
onChange={(item) => {
setCity({
...city,
selectedCity: item,
value: item.cityId,
});
focusField('');
}}
/>
</View>
<View>
<Text>Selected Country</Text>
<Text style={styles.selectedValue}>{country.selectedCountry.name}</Text>
<Text>Selected State</Text>
<Text style={styles.selectedValue}>{state.selectedState.name}</Text>
<Text>Selected City</Text>
<Text style={styles.selectedValue}>{city.selectedCity.name}</Text>
</View>
<TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
<Text style={styles.clrBtnTxt}>Reset</Text>
</TouchableOpacity>
<Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
{snackMsg}
</Snackbar>
</View>
);
}
const ZDropDown = ({
data,
labelField,
valueField,
value,
onFocus,
onBlur,
onChange,
isFocus,
}) => {
return (
<Dropdown
mode={'auto'}
style={[styles.dropdown, isFocus ? { borderColor: 'dodgerblue' } : {}]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
search={data.length > 5}
maxHeight={300}
searchPlaceholder="Search..."
data={data}
labelField={labelField}
valueField={valueField}
placeholder={!isFocus ? 'Select item' : '...'}
value={value}
onFocus={onFocus}
onBlur={onBlur}
onChange={onChange}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
clrBtn: {
padding: 10,
alignItems: 'center',
alignSelf: 'center',
},
clrBtnTxt: {
color: 'grey',
},
selectedValue: {
color: 'steelblue',
marginLeft: 5,
marginTop: 5,
marginBottom: 10,
},
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
marginTop: 5,
marginBottom: 20,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
Raw
Cascade Form Advanced.js
import React, { useState, useEffect } from 'react';
import {
ScrollView,
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { Snackbar } from 'react-native-paper';
import {
listCountry,
listSate,
listCity,
listVillage,
listStreet,
} from './cascadeform/cascadeData';
const formFields = {
country: {
fieldId: 'country',
label: 'Country',
labelField: 'name',
valueField: 'countryId',
parents: [],
list: [],
selectedItem: {},
selectedValue: null,
onValueSelected: () => null,
},
state: {
fieldId: 'state',
label: 'State',
labelField: 'name',
valueField: 'stateId',
parents: ['country'],
list: [],
selectedItem: {},
selectedValue: null,
onValueSelected: () => null,
},
city: {
fieldId: 'city',
label: 'City',
labelField: 'name',
valueField: 'cityId',
parents: ['country', 'state'],
list: [],
selectedItem: {},
selectedValue: null,
onValueSelected: () => null,
},
village: {
fieldId: 'village',
label: 'Village',
labelField: 'name',
valueField: 'villageId',
parents: ['country', 'state', 'city'],
list: [],
selectedItem: {},
selectedValue: null,
onValueSelected: () => null,
},
street: {
fieldId: 'street',
label: 'Street',
labelField: 'name',
valueField: 'streetId',
parents: ['country', 'state', 'city', 'village'],
list: [],
selectedItem: {},
selectedValue: null,
onValueSelected: () => null,
},
};
var focusField = '';
var snackMsg = '';
export default function App() {
const [refreshPage, setRefreshPage] = useState(false);
const [visible, setVisible] = useState(false);
const onToggleSnackBar = () => setVisible(!visible);
const onDismissSnackBar = () => setVisible(false);
const resetForm = () => {
resetFields('country');
focusField = '';
loadCountry();
};
const changeFocusField = (fld = '') => {
focusField = fld;
setRefreshPage(!refreshPage);
};
const resetFields = (fld = '') => {
var b = false;
for (let kee in formFields) {
if (b) {
formFields[kee].list = [];
formFields[kee].selectedItem = {};
formFields[kee].selectedValue = null;
} else {
if (kee === fld) {
b = true;
formFields[kee] = {
...formFields[kee],
list: [],
selectedItem: {},
selectedValue: null,
};
}
}
}
};
const allValuesSelected = () => {
console.log('All fields selected');
};
const loadStreet = async () => {
resetFields('street');
const arr = listStreet.filter(
(ele) => ele.villageId === formFields.village.selectedValue
);
if (arr.length) formFields.street.list = arr;
setRefreshPage(!refreshPage);
};
const loadVillage = async () => {
resetFields('village');
const arr = listVillage.filter(
(ele) => ele.cityId === formFields.city.selectedValue
);
if (arr.length) formFields.village.list = arr;
setRefreshPage(!refreshPage);
};
const loadCity = async () => {
resetFields('city');
const arr = listCity.filter(
(ele) => ele.stateId === formFields.state.selectedValue
);
if (arr.length) formFields.city.list = arr;
setRefreshPage(!refreshPage);
};
const loadState = async () => {
resetFields('state');
const arr = listSate.filter(
(ele) => ele.countryId === formFields.country.selectedValue
);
if (arr.length) {
formFields.state.list = arr;
}
setRefreshPage(!refreshPage);
};
const loadCountry = async () => {
formFields.country.list = [...listCountry];
setRefreshPage(!refreshPage);
};
const loadPageData = () => {
formFields.country.onValueSelected = loadState;
formFields.state.onValueSelected = loadCity;
formFields.city.onValueSelected = loadVillage;
formFields.village.onValueSelected = loadStreet;
formFields.street.onValueSelected = allValuesSelected;
loadCountry();
};
useEffect(() => {
loadPageData();
}, []);
return (
<ScrollView style={styles.container}>
<View>
{Object.keys(formFields).map((ele, index) => {
const fld = formFields[ele];
return (
<View key={'_formField_' + index}>
<Text>{fld.label}</Text>
<ZDropDown
labelField={fld.labelField}
valueField={fld.valueField}
data={fld.list}
value={fld.selectedValue}
isFocus={focusField === ele}
onFocus={() => {
changeFocusField(ele);
const parents = fld.parents;
for (let pr of parents) {
if (!formFields[pr].selectedValue) {
snackMsg = 'Select ' + formFields[pr].label;
focusField = pr;
onToggleSnackBar();
break;
}
}
}}
onBlur={() => changeFocusField('')}
onChange={(item) => {
fld.selectedItem = item;
fld.selectedValue = item[fld.valueField];
focusField = '';
fld.onValueSelected();
}}
/>
</View>
);
})}
</View>
<View>
<Text>Selected Country</Text>
<Text style={styles.selectedValue}>
{formFields.country.selectedItem.name}
</Text>
<Text>Selected State</Text>
<Text style={styles.selectedValue}>
{formFields.state.selectedItem.name}
</Text>
<Text>Selected City</Text>
<Text style={styles.selectedValue}>
{formFields.city.selectedItem.name}
</Text>
<Text>Selected Village</Text>
<Text style={styles.selectedValue}>
{formFields.village.selectedItem.name}
</Text>
<Text>Selected Street</Text>
<Text style={styles.selectedValue}>
{formFields.street.selectedItem.name}
</Text>
</View>
<TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
<Text style={styles.clrBtnTxt}>Reset</Text>
</TouchableOpacity>
<Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
{snackMsg}
</Snackbar>
</ScrollView>
);
}
const ZDropDown = ({
data,
labelField,
valueField,
value,
onFocus,
onBlur,
onChange,
isFocus,
}) => {
return (
<Dropdown
mode={'auto'}
style={[styles.dropdown, isFocus ? { borderColor: 'dodgerblue' } : {}]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
search={data.length > 5}
maxHeight={300}
searchPlaceholder="Search..."
data={data}
labelField={labelField}
valueField={valueField}
placeholder={!isFocus ? 'Select item' : '...'}
value={value}
onFocus={onFocus}
onBlur={onBlur}
onChange={onChange}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
clrBtn: {
padding: 10,
alignItems: 'center',
alignSelf: 'center',
},
clrBtnTxt: {
color: 'grey',
},
selectedValue: {
color: 'steelblue',
marginLeft: 5,
marginTop: 5,
marginBottom: 10,
},
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
marginTop: 5,
marginBottom: 20,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
Raw
cascadeData.js
export const listVillage = [
{
cityId: '1',
villageId: '1',
name: 'village 1 city 1',
},
{
cityId: '1',
villageId: '2',
name: 'village 2 city 1',
},
{
cityId: '1',
villageId: '3',
name: 'village 3 city 1',
},
{
cityId: '2',
villageId: '4',
name: 'village 4 city 2',
},
{
cityId: '2',
villageId: '5',
name: 'village 5 city 2',
},
{
cityId: '2',
villageId: '6',
name: 'village 6 city 2',
},
{
cityId: '3',
villageId: '7',
name: 'village 7 city 3',
},
{
cityId: '3',
villageId: '8',
name: 'village 8 city 3',
},
{
cityId: '3',
villageId: '9',
name: 'village 9 city 3',
},
{
cityId: '4',
villageId: '10',
name: 'village 10 city 4',
},
{
cityId: '4',
villageId: '11',
name: 'village 11 city 4',
},
{
cityId: '4',
villageId: '12',
name: 'village 12 city 4',
},
{
cityId: '5',
villageId: '13',
name: 'village 13 city 5',
},
{
cityId: '5',
villageId: '14',
name: 'village 14 city 5',
},
{
cityId: '5',
villageId: '15',
name: 'village 15 city 5',
},
{
cityId: '6',
villageId: '16',
name: 'village 16 city 6',
},
{
cityId: '6',
villageId: '17',
name: 'village 17 city 6',
},
{
cityId: '6',
villageId: '18',
name: 'village 18 city 6',
},
{
cityId: '7',
villageId: '19',
name: 'village 19 city 7',
},
{
cityId: '7',
villageId: '20',
name: 'village 20 city 7',
},
{
cityId: '7',
villageId: '21',
name: 'village 21 city 7',
},
{
cityId: '8',
villageId: '22',
name: 'village 22 city 8',
},
{
cityId: '8',
villageId: '23',
name: 'village 23 city 8',
},
{
cityId: '8',
villageId: '24',
name: 'village 24 city 8',
},
{
cityId: '9',
villageId: '25',
name: 'village 25 city 9',
},
{
cityId: '9',
villageId: '26',
name: 'village 26 city 9',
},
{
cityId: '9',
villageId: '27',
name: 'village 27 city 9',
},
{
cityId: '10',
villageId: '28',
name: 'village 28 city 10',
},
{
cityId: '10',
villageId: '29',
name: 'village 29 city 10',
},
{
cityId: '10',
villageId: '30',
name: 'village 30 city 10',
},
{
cityId: '11',
villageId: '31',
name: 'village 31 city 11',
},
{
cityId: '11',
villageId: '32',
name: 'village 32 city 11',
},
{
cityId: '11',
villageId: '33',
name: 'village 33 city 11',
},
{
cityId: '12',
villageId: '34',
name: 'village 34 city 12',
},
{
cityId: '12',
villageId: '35',
name: 'village 35 city 12',
},
{
cityId: '12',
villageId: '36',
name: 'village 36 city 12',
},
{
cityId: '13',
villageId: '37',
name: 'village 37 city 13',
},
{
cityId: '13',
villageId: '38',
name: 'village 38 city 13',
},
{
cityId: '13',
villageId: '39',
name: 'village 39 city 13',
},
{
cityId: '14',
villageId: '40',
name: 'village 40 city 14',
},
{
cityId: '14',
villageId: '41',
name: 'village 41 city 14',
},
{
cityId: '14',
villageId: '42',
name: 'village 42 city 14',
},
{
cityId: '15',
villageId: '43',
name: 'village 43 city 15',
},
{
cityId: '15',
villageId: '44',
name: 'village 44 city 15',
},
{
cityId: '15',
villageId: '45',
name: 'village 45 city 15',
},
{
cityId: '16',
villageId: '46',
name: 'village 46 city 16',
},
{
cityId: '16',
villageId: '47',
name: 'village 47 city 16',
},
{
cityId: '16',
villageId: '48',
name: 'village 48 city 16',
},
{
cityId: '17',
villageId: '49',
name: 'village 49 city 17',
},
{
cityId: '17',
villageId: '50',
name: 'village 50 city 17',
},
{
cityId: '17',
villageId: '51',
name: 'village 51 city 17',
},
{
cityId: '18',
villageId: '52',
name: 'village 52 city 18',
},
{
cityId: '18',
villageId: '53',
name: 'village 53 city 18',
},
{
cityId: '18',
villageId: '54',
name: 'village 54 city 18',
},
{
cityId: '19',
villageId: '55',
name: 'village 55 city 19',
},
{
cityId: '19',
villageId: '56',
name: 'village 56 city 19',
},
{
cityId: '19',
villageId: '57',
name: 'village 57 city 19',
},
{
cityId: '20',
villageId: '58',
name: 'village 58 city 20',
},
{
cityId: '20',
villageId: '59',
name: 'village 59 city 20',
},
{
cityId: '20',
villageId: '60',
name: 'village 60 city 20',
},
{
cityId: '21',
villageId: '61',
name: 'village 61 city 21',
},
{
cityId: '21',
villageId: '62',
name: 'village 62 city 21',
},
{
cityId: '21',
villageId: '63',
name: 'village 63 city 21',
},
{
cityId: '22',
villageId: '64',
name: 'village 64 city 22',
},
{
cityId: '22',
villageId: '65',
name: 'village 65 city 22',
},
{
cityId: '22',
villageId: '66',
name: 'village 66 city 22',
},
{
cityId: '23',
villageId: '67',
name: 'village 67 city 23',
},
{
cityId: '23',
villageId: '68',
name: 'village 68 city 23',
},
{
cityId: '23',
villageId: '69',
name: 'village 69 city 23',
},
{
cityId: '24',
villageId: '70',
name: 'village 70 city 24',
},
{
cityId: '24',
villageId: '71',
name: 'village 71 city 24',
},
{
cityId: '24',
villageId: '72',
name: 'village 72 city 24',
},
{
cityId: '25',
villageId: '73',
name: 'village 73 city 25',
},
{
cityId: '25',
villageId: '74',
name: 'village 74 city 25',
},
{
cityId: '25',
villageId: '75',
name: 'village 75 city 25',
},
{
cityId: '26',
villageId: '76',
name: 'village 76 city 26',
},
{
cityId: '26',
villageId: '77',
name: 'village 77 city 26',
},
{
cityId: '26',
villageId: '78',
name: 'village 78 city 26',
},
{
cityId: '27',
villageId: '79',
name: 'village 79 city 27',
},
{
cityId: '27',
villageId: '80',
name: 'village 80 city 27',
},
{
cityId: '27',
villageId: '81',
name: 'village 81 city 27',
},
{
cityId: '28',
villageId: '82',
name: 'village 82 city 28',
},
{
cityId: '28',
villageId: '83',
name: 'village 83 city 28',
},
{
cityId: '28',
villageId: '84',
name: 'village 84 city 28',
},
{
cityId: '29',
villageId: '85',
name: 'village 85 city 29',
},
{
cityId: '29',
villageId: '86',
name: 'village 86 city 29',
},
{
cityId: '29',
villageId: '87',
name: 'village 87 city 29',
},
{
cityId: '30',
villageId: '88',
name: 'village 88 city 30',
},
{
cityId: '30',
villageId: '89',
name: 'village 89 city 30',
},
{
cityId: '30',
villageId: '90',
name: 'village 90 city 30',
},
{
cityId: '31',
villageId: '91',
name: 'village 91 city 31',
},
{
cityId: '31',
villageId: '92',
name: 'village 92 city 31',
},
{
cityId: '31',
villageId: '93',
name: 'village 93 city 31',
},
{
cityId: '32',
villageId: '94',
name: 'village 94 city 32',
},
{
cityId: '32',
villageId: '95',
name: 'village 95 city 32',
},
{
cityId: '32',
villageId: '96',
name: 'village 96 city 32',
},
{
cityId: '33',
villageId: '97',
name: 'village 97 city 33',
},
{
cityId: '33',
villageId: '98',
name: 'village 98 city 33',
},
{
cityId: '33',
villageId: '99',
name: 'village 99 city 33',
},
{
cityId: '34',
villageId: '100',
name: 'village 100 city 34',
},
{
cityId: '34',
villageId: '101',
name: 'village 101 city 34',
},
{
cityId: '34',
villageId: '102',
name: 'village 102 city 34',
},
{
cityId: '35',
villageId: '103',
name: 'village 103 city 35',
},
{
cityId: '35',
villageId: '104',
name: 'village 104 city 35',
},
{
cityId: '35',
villageId: '105',
name: 'village 105 city 35',
},
{
cityId: '36',
villageId: '106',
name: 'village 106 city 36',
},
{
cityId: '36',
villageId: '107',
name: 'village 107 city 36',
},
{
cityId: '36',
villageId: '108',
name: 'village 108 city 36',
},
];
export const listStreet = [
{
villageId: '1',
streetId: '1',
name: 'village 1 street 1',
},
{
villageId: '1',
streetId: '109',
name: 'village 1 street 109',
},
{
villageId: '2',
streetId: '2',
name: 'village 2 street 2',
},
{
villageId: '2',
streetId: '110',
name: 'village 2 street 110',
},
{
villageId: '3',
streetId: '3',
name: 'village 3 street 3',
},
{
villageId: '3',
streetId: '111',
name: 'village 3 street 111',
},
{
villageId: '4',
streetId: '4',
name: 'village 4 street 4',
},
{
villageId: '4',
streetId: '112',
name: 'village 4 street 112',
},
{
villageId: '5',
streetId: '5',
name: 'village 5 street 5',
},
{
villageId: '5',
streetId: '113',
name: 'village 5 street 113',
},
{
villageId: '6',
streetId: '6',
name: 'village 6 street 6',
},
{
villageId: '6',
streetId: '114',
name: 'village 6 street 114',
},
{
villageId: '7',
streetId: '7',
name: 'village 7 street 7',
},
{
villageId: '7',
streetId: '115',
name: 'village 7 street 115',
},
{
villageId: '8',
streetId: '8',
name: 'village 8 street 8',
},
{
villageId: '8',
streetId: '116',
name: 'village 8 street 116',
},
{
villageId: '9',
streetId: '9',
name: 'village 9 street 9',
},
{
villageId: '9',
streetId: '117',
name: 'village 9 street 117',
},
{
villageId: '10',
streetId: '10',
name: 'village 10 street 10',
},
{
villageId: '10',
streetId: '118',
name: 'village 10 street 118',
},
{
villageId: '11',
streetId: '11',
name: 'village 11 street 11',
},
{
villageId: '11',
streetId: '119',
name: 'village 11 street 119',
},
{
villageId: '12',
streetId: '12',
name: 'village 12 street 12',
},
{
villageId: '12',
streetId: '120',
name: 'village 12 street 120',
},
{
villageId: '13',
streetId: '13',
name: 'village 13 street 13',
},
{
villageId: '13',
streetId: '121',
name: 'village 13 street 121',
},
{
villageId: '14',
streetId: '14',
name: 'village 14 street 14',
},
{
villageId: '14',
streetId: '122',
name: 'village 14 street 122',
},
{
villageId: '15',
streetId: '15',
name: 'village 15 street 15',
},
{
villageId: '15',
streetId: '123',
name: 'village 15 street 123',
},
{
villageId: '16',
streetId: '16',
name: 'village 16 street 16',
},
{
villageId: '16',
streetId: '124',
name: 'village 16 street 124',
},
{
villageId: '17',
streetId: '17',
name: 'village 17 street 17',
},
{
villageId: '17',
streetId: '125',
name: 'village 17 street 125',
},
{
villageId: '18',
streetId: '18',
name: 'village 18 street 18',
},
{
villageId: '18',
streetId: '126',
name: 'village 18 street 126',
},
{
villageId: '19',
streetId: '19',
name: 'village 19 street 19',
},
{
villageId: '19',
streetId: '127',
name: 'village 19 street 127',
},
{
villageId: '20',
streetId: '20',
name: 'village 20 street 20',
},
{
villageId: '20',
streetId: '128',
name: 'village 20 street 128',
},
{
villageId: '21',
streetId: '21',
name: 'village 21 street 21',
},
{
villageId: '21',
streetId: '129',
name: 'village 21 street 129',
},
{
villageId: '22',
streetId: '22',
name: 'village 22 street 22',
},
{
villageId: '22',
streetId: '130',
name: 'village 22 street 130',
},
{
villageId: '23',
streetId: '23',
name: 'village 23 street 23',
},
{
villageId: '23',
streetId: '131',
name: 'village 23 street 131',
},
{
villageId: '24',
streetId: '24',
name: 'village 24 street 24',
},
{
villageId: '24',
streetId: '132',
name: 'village 24 street 132',
},
{
villageId: '25',
streetId: '25',
name: 'village 25 street 25',
},
{
villageId: '25',
streetId: '133',
name: 'village 25 street 133',
},
{
villageId: '26',
streetId: '26',
name: 'village 26 street 26',
},
{
villageId: '26',
streetId: '134',
name: 'village 26 street 134',
},
{
villageId: '27',
streetId: '27',
name: 'village 27 street 27',
},
{
villageId: '27',
streetId: '135',
name: 'village 27 street 135',
},
{
villageId: '28',
streetId: '28',
name: 'village 28 street 28',
},
{
villageId: '28',
streetId: '136',
name: 'village 28 street 136',
},
{
villageId: '29',
streetId: '29',
name: 'village 29 street 29',
},
{
villageId: '29',
streetId: '137',
name: 'village 29 street 137',
},
{
villageId: '30',
streetId: '30',
name: 'village 30 street 30',
},
{
villageId: '30',
streetId: '138',
name: 'village 30 street 138',
},
{
villageId: '31',
streetId: '31',
name: 'village 31 street 31',
},
{
villageId: '31',
streetId: '139',
name: 'village 31 street 139',
},
{
villageId: '32',
streetId: '32',
name: 'village 32 street 32',
},
{
villageId: '32',
streetId: '140',
name: 'village 32 street 140',
},
{
villageId: '33',
streetId: '33',
name: 'village 33 street 33',
},
{
villageId: '33',
streetId: '141',
name: 'village 33 street 141',
},
{
villageId: '34',
streetId: '34',
name: 'village 34 street 34',
},
{
villageId: '34',
streetId: '142',
name: 'village 34 street 142',
},
{
villageId: '35',
streetId: '35',
name: 'village 35 street 35',
},
{
villageId: '35',
streetId: '143',
name: 'village 35 street 143',
},
{
villageId: '36',
streetId: '36',
name: 'village 36 street 36',
},
{
villageId: '36',
streetId: '144',
name: 'village 36 street 144',
},
{
villageId: '37',
streetId: '37',
name: 'village 37 street 37',
},
{
villageId: '37',
streetId: '145',
name: 'village 37 street 145',
},
{
villageId: '38',
streetId: '38',
name: 'village 38 street 38',
},
{
villageId: '38',
streetId: '146',
name: 'village 38 street 146',
},
{
villageId: '39',
streetId: '39',
name: 'village 39 street 39',
},
{
villageId: '39',
streetId: '147',
name: 'village 39 street 147',
},
{
villageId: '40',
streetId: '40',
name: 'village 40 street 40',
},
{
villageId: '40',
streetId: '148',
name: 'village 40 street 148',
},
{
villageId: '41',
streetId: '41',
name: 'village 41 street 41',
},
{
villageId: '41',
streetId: '149',
name: 'village 41 street 149',
},
{
villageId: '42',
streetId: '42',
name: 'village 42 street 42',
},
{
villageId: '42',
streetId: '150',
name: 'village 42 street 150',
},
{
villageId: '43',
streetId: '43',
name: 'village 43 street 43',
},
{
villageId: '43',
streetId: '151',
name: 'village 43 street 151',
},
{
villageId: '44',
streetId: '44',
name: 'village 44 street 44',
},
{
villageId: '44',
streetId: '152',
name: 'village 44 street 152',
},
{
villageId: '45',
streetId: '45',
name: 'village 45 street 45',
},
{
villageId: '45',
streetId: '153',
name: 'village 45 street 153',
},
{
villageId: '46',
streetId: '46',
name: 'village 46 street 46',
},
{
villageId: '46',
streetId: '154',
name: 'village 46 street 154',
},
{
villageId: '47',
streetId: '47',
name: 'village 47 street 47',
},
{
villageId: '47',
streetId: '155',
name: 'village 47 street 155',
},
{
villageId: '48',
streetId: '48',
name: 'village 48 street 48',
},
{
villageId: '48',
streetId: '156',
name: 'village 48 street 156',
},
{
villageId: '49',
streetId: '49',
name: 'village 49 street 49',
},
{
villageId: '49',
streetId: '157',
name: 'village 49 street 157',
},
{
villageId: '50',
streetId: '50',
name: 'village 50 street 50',
},
{
villageId: '50',
streetId: '158',
name: 'village 50 street 158',
},
{
villageId: '51',
streetId: '51',
name: 'village 51 street 51',
},
{
villageId: '51',
streetId: '159',
name: 'village 51 street 159',
},
{
villageId: '52',
streetId: '52',
name: 'village 52 street 52',
},
{
villageId: '52',
streetId: '160',
name: 'village 52 street 160',
},
{
villageId: '53',
streetId: '53',
name: 'village 53 street 53',
},
{
villageId: '53',
streetId: '161',
name: 'village 53 street 161',
},
{
villageId: '54',
streetId: '54',
name: 'village 54 street 54',
},
{
villageId: '54',
streetId: '162',
name: 'village 54 street 162',
},
{
villageId: '55',
streetId: '55',
name: 'village 55 street 55',
},
{
villageId: '55',
streetId: '163',
name: 'village 55 street 163',
},
{
villageId: '56',
streetId: '56',
name: 'village 56 street 56',
},
{
villageId: '56',
streetId: '164',
name: 'village 56 street 164',
},
{
villageId: '57',
streetId: '57',
name: 'village 57 street 57',
},
{
villageId: '57',
streetId: '165',
name: 'village 57 street 165',
},
{
villageId: '58',
streetId: '58',
name: 'village 58 street 58',
},
{
villageId: '58',
streetId: '166',
name: 'village 58 street 166',
},
{
villageId: '59',
streetId: '59',
name: 'village 59 street 59',
},
{
villageId: '59',
streetId: '167',
name: 'village 59 street 167',
},
{
villageId: '60',
streetId: '60',
name: 'village 60 street 60',
},
{
villageId: '60',
streetId: '168',
name: 'village 60 street 168',
},
{
villageId: '61',
streetId: '61',
name: 'village 61 street 61',
},
{
villageId: '61',
streetId: '169',
name: 'village 61 street 169',
},
{
villageId: '62',
streetId: '62',
name: 'village 62 street 62',
},
{
villageId: '62',
streetId: '170',
name: 'village 62 street 170',
},
{
villageId: '63',
streetId: '63',
name: 'village 63 street 63',
},
{
villageId: '63',
streetId: '171',
name: 'village 63 street 171',
},
{
villageId: '64',
streetId: '64',
name: 'village 64 street 64',
},
{
villageId: '64',
streetId: '172',
name: 'village 64 street 172',
},
{
villageId: '65',
streetId: '65',
name: 'village 65 street 65',
},
{
villageId: '65',
streetId: '173',
name: 'village 65 street 173',
},
{
villageId: '66',
streetId: '66',
name: 'village 66 street 66',
},
{
villageId: '66',
streetId: '174',
name: 'village 66 street 174',
},
{
villageId: '67',
streetId: '67',
name: 'village 67 street 67',
},
{
villageId: '67',
streetId: '175',
name: 'village 67 street 175',
},
{
villageId: '68',
streetId: '68',
name: 'village 68 street 68',
},
{
villageId: '68',
streetId: '176',
name: 'village 68 street 176',
},
{
villageId: '69',
streetId: '69',
name: 'village 69 street 69',
},
{
villageId: '69',
streetId: '177',
name: 'village 69 street 177',
},
{
villageId: '70',
streetId: '70',
name: 'village 70 street 70',
},
{
villageId: '70',
streetId: '178',
name: 'village 70 street 178',
},
{
villageId: '71',
streetId: '71',
name: 'village 71 street 71',
},
{
villageId: '71',
streetId: '179',
name: 'village 71 street 179',
},
{
villageId: '72',
streetId: '72',
name: 'village 72 street 72',
},
{
villageId: '72',
streetId: '180',
name: 'village 72 street 180',
},
{
villageId: '73',
streetId: '73',
name: 'village 73 street 73',
},
{
villageId: '73',
streetId: '181',
name: 'village 73 street 181',
},
{
villageId: '74',
streetId: '74',
name: 'village 74 street 74',
},
{
villageId: '74',
streetId: '182',
name: 'village 74 street 182',
},
{
villageId: '75',
streetId: '75',
name: 'village 75 street 75',
},
{
villageId: '75',
streetId: '183',
name: 'village 75 street 183',
},
{
villageId: '76',
streetId: '76',
name: 'village 76 street 76',
},
{
villageId: '76',
streetId: '184',
name: 'village 76 street 184',
},
{
villageId: '77',
streetId: '77',
name: 'village 77 street 77',
},
{
villageId: '77',
streetId: '185',
name: 'village 77 street 185',
},
{
villageId: '78',
streetId: '78',
name: 'village 78 street 78',
},
{
villageId: '78',
streetId: '186',
name: 'village 78 street 186',
},
{
villageId: '79',
streetId: '79',
name: 'village 79 street 79',
},
{
villageId: '79',
streetId: '187',
name: 'village 79 street 187',
},
{
villageId: '80',
streetId: '80',
name: 'village 80 street 80',
},
{
villageId: '80',
streetId: '188',
name: 'village 80 street 188',
},
{
villageId: '81',
streetId: '81',
name: 'village 81 street 81',
},
{
villageId: '81',
streetId: '189',
name: 'village 81 street 189',
},
{
villageId: '82',
streetId: '82',
name: 'village 82 street 82',
},
{
villageId: '82',
streetId: '190',
name: 'village 82 street 190',
},
{
villageId: '83',
streetId: '83',
name: 'village 83 street 83',
},
{
villageId: '83',
streetId: '191',
name: 'village 83 street 191',
},
{
villageId: '84',
streetId: '84',
name: 'village 84 street 84',
},
{
villageId: '84',
streetId: '192',
name: 'village 84 street 192',
},
{
villageId: '85',
streetId: '85',
name: 'village 85 street 85',
},
{
villageId: '85',
streetId: '193',
name: 'village 85 street 193',
},
{
villageId: '86',
streetId: '86',
name: 'village 86 street 86',
},
{
villageId: '86',
streetId: '194',
name: 'village 86 street 194',
},
{
villageId: '87',
streetId: '87',
name: 'village 87 street 87',
},
{
villageId: '87',
streetId: '195',
name: 'village 87 street 195',
},
{
villageId: '88',
streetId: '88',
name: 'village 88 street 88',
},
{
villageId: '88',
streetId: '196',
name: 'village 88 street 196',
},
{
villageId: '89',
streetId: '89',
name: 'village 89 street 89',
},
{
villageId: '89',
streetId: '197',
name: 'village 89 street 197',
},
{
villageId: '90',
streetId: '90',
name: 'village 90 street 90',
},
{
villageId: '90',
streetId: '198',
name: 'village 90 street 198',
},
{
villageId: '91',
streetId: '91',
name: 'village 91 street 91',
},
{
villageId: '91',
streetId: '199',
name: 'village 91 street 199',
},
{
villageId: '92',
streetId: '92',
name: 'village 92 street 92',
},
{
villageId: '92',
streetId: '200',
name: 'village 92 street 200',
},
{
villageId: '93',
streetId: '93',
name: 'village 93 street 93',
},
{
villageId: '93',
streetId: '201',
name: 'village 93 street 201',
},
{
villageId: '94',
streetId: '94',
name: 'village 94 street 94',
},
{
villageId: '94',
streetId: '202',
name: 'village 94 street 202',
},
{
villageId: '95',
streetId: '95',
name: 'village 95 street 95',
},
{
villageId: '95',
streetId: '203',
name: 'village 95 street 203',
},
{
villageId: '96',
streetId: '96',
name: 'village 96 street 96',
},
{
villageId: '96',
streetId: '204',
name: 'village 96 street 204',
},
{
villageId: '97',
streetId: '97',
name: 'village 97 street 97',
},
{
villageId: '97',
streetId: '205',
name: 'village 97 street 205',
},
{
villageId: '98',
streetId: '98',
name: 'village 98 street 98',
},
{
villageId: '98',
streetId: '206',
name: 'village 98 street 206',
},
{
villageId: '99',
streetId: '99',
name: 'village 99 street 99',
},
{
villageId: '99',
streetId: '207',
name: 'village 99 street 207',
},
{
villageId: '100',
streetId: '100',
name: 'village 100 street 100',
},
{
villageId: '100',
streetId: '208',
name: 'village 100 street 208',
},
{
villageId: '101',
streetId: '101',
name: 'village 101 street 101',
},
{
villageId: '101',
streetId: '209',
name: 'village 101 street 209',
},
{
villageId: '102',
streetId: '102',
name: 'village 102 street 102',
},
{
villageId: '102',
streetId: '210',
name: 'village 102 street 210',
},
{
villageId: '103',
streetId: '103',
name: 'village 103 street 103',
},
{
villageId: '103',
streetId: '211',
name: 'village 103 street 211',
},
{
villageId: '104',
streetId: '104',
name: 'village 104 street 104',
},
{
villageId: '104',
streetId: '212',
name: 'village 104 street 212',
},
{
villageId: '105',
streetId: '105',
name: 'village 105 street 105',
},
{
villageId: '105',
streetId: '213',
name: 'village 105 street 213',
},
{
villageId: '106',
streetId: '106',
name: 'village 106 street 106',
},
{
villageId: '106',
streetId: '214',
name: 'village 106 street 214',
},
{
villageId: '107',
streetId: '107',
name: 'village 107 street 107',
},
{
villageId: '107',
streetId: '215',
name: 'village 107 street 215',
},
{
villageId: '108',
streetId: '108',
name: 'village 108 street 108',
},
{
villageId: '108',
streetId: '216',
name: 'village 108 street 216',
},
];
export const listCountry = [
{ countryId: '1', name: 'india' },
{ countryId: '2', name: 'uk' },
{ countryId: '3', name: 'canada' },
{ countryId: '4', name: 'us' },
];
export const listSate = [
{ stateId: '1', countryId: '1', name: 'state1_india' },
{ stateId: '2', countryId: '1', name: 'state2_india' },
{ stateId: '3', countryId: '1', name: 'state3_india' },
{ stateId: '4', countryId: '2', name: 'state1_uk' },
{ stateId: '5', countryId: '2', name: 'state2_uk' },
{ stateId: '6', countryId: '2', name: 'state3_uk' },
{ stateId: '7', countryId: '3', name: 'state1_canada' },
{ stateId: '8', countryId: '3', name: 'state2_canada' },
{ stateId: '9', countryId: '3', name: 'state3_canada' },
{ stateId: '10', countryId: '4', name: 'state1_us' },
{ stateId: '11', countryId: '4', name: 'state2_us' },
{ stateId: '12', countryId: '4', name: 'state3_us' },
];
export const listCity = [
{
cityId: '1',
stateId: '1',
countryId: '1',
name: 'city1_state1_country1',
},
{
cityId: '2',
stateId: '1',
countryId: '1',
name: 'city2_state1_country1',
},
{
cityId: '3',
stateId: '1',
countryId: '1',
name: 'city3_state1_country1',
},
{
cityId: '4',
stateId: '2',
countryId: '1',
name: 'city4_state2_country1',
},
{
cityId: '5',
stateId: '2',
countryId: '1',
name: 'city5_state2_country1',
},
{
cityId: '6',
stateId: '2',
countryId: '1',
name: 'city6_state2_country1',
},
{
cityId: '7',
stateId: '3',
countryId: '1',
name: 'city7_state3_country1',
},
{
cityId: '8',
stateId: '3',
countryId: '1',
name: 'city8_state3_country1',
},
{
cityId: '9',
stateId: '3',
countryId: '1',
name: 'city9_state3_country1',
},
{
cityId: '10',
stateId: '4',
countryId: '2',
name: 'city10_state4_country2',
},
{
cityId: '11',
stateId: '4',
countryId: '2',
name: 'city11_state4_country2',
},
{
cityId: '12',
stateId: '4',
countryId: '2',
name: 'city12_state4_country2',
},
{
cityId: '13',
stateId: '5',
countryId: '2',
name: 'city13_state5_country2',
},
{
cityId: '14',
stateId: '5',
countryId: '2',
name: 'city14_state5_country2',
},
{
cityId: '15',
stateId: '5',
countryId: '2',
name: 'city15_state5_country2',
},
{
cityId: '16',
stateId: '6',
countryId: '2',
name: 'city16_state6_country2',
},
{
cityId: '17',
stateId: '6',
countryId: '2',
name: 'city17_state6_country2',
},
{
cityId: '18',
stateId: '6',
countryId: '2',
name: 'city18_state6_country2',
},
{
cityId: '19',
stateId: '7',
countryId: '3',
name: 'city19_state7_country3',
},
{
cityId: '20',
stateId: '7',
countryId: '3',
name: 'city20_state7_country3',
},
{
cityId: '21',
stateId: '7',
countryId: '3',
name: 'city21_state7_country3',
},
{
cityId: '22',
stateId: '8',
countryId: '3',
name: 'city22_state8_country3',
},
{
cityId: '23',
stateId: '8',
countryId: '3',
name: 'city23_state8_country3',
},
{
cityId: '24',
stateId: '8',
countryId: '3',
name: 'city24_state8_country3',
},
{
cityId: '25',
stateId: '9',
countryId: '3',
name: 'city25_state9_country3',
},
{
cityId: '26',
stateId: '9',
countryId: '3',
name: 'city26_state9_country3',
},
{
cityId: '27',
stateId: '9',
countryId: '3',
name: 'city27_state9_country3',
},
{
cityId: '28',
stateId: '10',
countryId: '4',
name: 'city28_state10_country4',
},
{
cityId: '29',
stateId: '10',
countryId: '4',
name: 'city29_state10_country4',
},
{
cityId: '30',
stateId: '10',
countryId: '4',
name: 'city30_state10_country4',
},
{
cityId: '31',
stateId: '11',
countryId: '4',
name: 'city31_state11_country4',
},
{
cityId: '32',
stateId: '11',
countryId: '4',
name: 'city32_state11_country4',
},
{
cityId: '33',
stateId: '11',
countryId: '4',
name: 'city33_state11_country4',
},
{
cityId: '34',
stateId: '12',
countryId: '4',
name: 'city34_state12_country4',
},
{
cityId: '35',
stateId: '12',
countryId: '4',
name: 'city35_state12_country4',
},
{
cityId: '36',
stateId: '12',
countryId: '4',
name: 'city36_state12_country4',
},
];
Raw
CascadeForm Improved OrdinaryVariable.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import { Snackbar } from 'react-native-paper';
const listCountry = [
{ countryId: '1', name: 'india' },
{ countryId: '2', name: 'uk' },
{ countryId: '3', name: 'canada' },
{ countryId: '4', name: 'us' },
];
const listSate = [
{ stateId: '1', countryId: '1', name: 'state1_india' },
{ stateId: '2', countryId: '1', name: 'state2_india' },
{ stateId: '3', countryId: '1', name: 'state3_india' },
{ stateId: '4', countryId: '2', name: 'state1_uk' },
{ stateId: '5', countryId: '2', name: 'state2_uk' },
{ stateId: '6', countryId: '2', name: 'state3_uk' },
{ stateId: '7', countryId: '3', name: 'state1_canada' },
{ stateId: '8', countryId: '3', name: 'state2_canada' },
{ stateId: '9', countryId: '3', name: 'state3_canada' },
{ stateId: '10', countryId: '4', name: 'state1_us' },
{ stateId: '11', countryId: '4', name: 'state2_us' },
{ stateId: '12', countryId: '4', name: 'state3_us' },
];
const listCity = [
{
cityId: '1',
stateId: '1',
countryId: '1',
name: 'city1_state1_country1',
},
{
cityId: '2',
stateId: '1',
countryId: '1',
name: 'city2_state1_country1',
},
{
cityId: '3',
stateId: '1',
countryId: '1',
name: 'city3_state1_country1',
},
{
cityId: '4',
stateId: '2',
countryId: '1',
name: 'city4_state2_country1',
},
{
cityId: '5',
stateId: '2',
countryId: '1',
name: 'city5_state2_country1',
},
{
cityId: '6',
stateId: '2',
countryId: '1',
name: 'city6_state2_country1',
},
{
cityId: '7',
stateId: '3',
countryId: '1',
name: 'city7_state3_country1',
},
{
cityId: '8',
stateId: '3',
countryId: '1',
name: 'city8_state3_country1',
},
{
cityId: '9',
stateId: '3',
countryId: '1',
name: 'city9_state3_country1',
},
{
cityId: '10',
stateId: '4',
countryId: '2',
name: 'city10_state4_country2',
},
{
cityId: '11',
stateId: '4',
countryId: '2',
name: 'city11_state4_country2',
},
{
cityId: '12',
stateId: '4',
countryId: '2',
name: 'city12_state4_country2',
},
{
cityId: '13',
stateId: '5',
countryId: '2',
name: 'city13_state5_country2',
},
{
cityId: '14',
stateId: '5',
countryId: '2',
name: 'city14_state5_country2',
},
{
cityId: '15',
stateId: '5',
countryId: '2',
name: 'city15_state5_country2',
},
{
cityId: '16',
stateId: '6',
countryId: '2',
name: 'city16_state6_country2',
},
{
cityId: '17',
stateId: '6',
countryId: '2',
name: 'city17_state6_country2',
},
{
cityId: '18',
stateId: '6',
countryId: '2',
name: 'city18_state6_country2',
},
{
cityId: '19',
stateId: '7',
countryId: '3',
name: 'city19_state7_country3',
},
{
cityId: '20',
stateId: '7',
countryId: '3',
name: 'city20_state7_country3',
},
{
cityId: '21',
stateId: '7',
countryId: '3',
name: 'city21_state7_country3',
},
{
cityId: '22',
stateId: '8',
countryId: '3',
name: 'city22_state8_country3',
},
{
cityId: '23',
stateId: '8',
countryId: '3',
name: 'city23_state8_country3',
},
{
cityId: '24',
stateId: '8',
countryId: '3',
name: 'city24_state8_country3',
},
{
cityId: '25',
stateId: '9',
countryId: '3',
name: 'city25_state9_country3',
},
{
cityId: '26',
stateId: '9',
countryId: '3',
name: 'city26_state9_country3',
},
{
cityId: '27',
stateId: '9',
countryId: '3',
name: 'city27_state9_country3',
},
{
cityId: '28',
stateId: '10',
countryId: '4',
name: 'city28_state10_country4',
},
{
cityId: '29',
stateId: '10',
countryId: '4',
name: 'city29_state10_country4',
},
{
cityId: '30',
stateId: '10',
countryId: '4',
name: 'city30_state10_country4',
},
{
cityId: '31',
stateId: '11',
countryId: '4',
name: 'city31_state11_country4',
},
{
cityId: '32',
stateId: '11',
countryId: '4',
name: 'city32_state11_country4',
},
{
cityId: '33',
stateId: '11',
countryId: '4',
name: 'city33_state11_country4',
},
{
cityId: '34',
stateId: '12',
countryId: '4',
name: 'city34_state12_country4',
},
{
cityId: '35',
stateId: '12',
countryId: '4',
name: 'city35_state12_country4',
},
{
cityId: '36',
stateId: '12',
countryId: '4',
name: 'city36_state12_country4',
},
];
var country = {
list: [],
selectedCountry: {},
selectedValue: null,
};
var state = {
list: [],
selectedState: {},
selectedValue: null,
};
var city = {
list: [],
selectedCity: {},
selectedValue: null,
};
var focusField = '';
var snackMsg = '';
export default function App() {
const [refreshPage, setRefreshPage] = useState(false);
const [visible, setVisible] = useState(false);
const onToggleSnackBar = () => setVisible(!visible);
const onDismissSnackBar = () => setVisible(false);
const resetForm = () => {
country = {
list: [...listCountry],
selectedCountry: {},
selectedValue: null,
};
state = { list: [], selectedState: {}, selectedValue: null };
city = { list: [], selectedCity: {}, selectedValue: null };
focusField = '';
setRefreshPage(!refreshPage);
};
const changeFocusField = (fld = '') => {
focusField = fld;
setRefreshPage(!refreshPage);
};
const loadCity = async () => {
city = { list: [], selectedCity: {}, selectedValue: null };
const arr = listCity.filter((ele) => ele.stateId === state.selectedValue);
if (arr.length) city.list = arr;
setRefreshPage(!refreshPage);
};
const loadState = async () => {
state = { list: [], selectedState: {}, selectedValue: null };
city = { list: [], selectedCity: {}, selectedValue: null };
const arr = listSate.filter(
(ele) => ele.countryId === country.selectedValue
);
if (arr.length) {
state.list = arr;
}
refreshPage(!refreshPage);
};
const loadCountry = async () => {
country.list = [...listCountry];
setRefreshPage(!refreshPage);
};
useEffect(() => {
loadCountry();
}, []);
return (
<View style={styles.container}>
<View>
<Text>Country</Text>
<ZDropDown
data={country.list}
labelField="name"
valueField="countryId"
value={country.selectedValue}
isFocus={focusField === 'country'}
onFocus={() => changeFocusField('country')}
onBlur={() => changeFocusField('')}
onChange={(item) => {
country.selectedCountry = item;
country.selectedValue = item.countryId;
focusField = '';
loadState();
}}
/>
<Text>State</Text>
<ZDropDown
data={state.list}
labelField="name"
valueField="stateId"
value={state.selectedValue}
isFocus={focusField === 'state'}
onFocus={() => {
changeFocusField('state');
if (!country.selectedValue) {
snackMsg = 'Select country';
onToggleSnackBar();
changeFocusField('country');
}
}}
onBlur={() => changeFocusField('')}
onChange={(item) => {
state.selectedValue = item.stateId;
state.selectedState = item;
changeFocusField('');
loadCity();
}}
/>
<Text>City</Text>
<ZDropDown
data={city.list}
labelField="name"
valueField="cityId"
value={city.selectedValue}
isFocus={focusField === 'city'}
onFocus={() => {
changeFocusField('city');
if (!country.selectedValue) {
snackMsg = 'Select country';
onToggleSnackBar();
changeFocusField('country');
} else if (!state.selectedValue) {
snackMsg = 'Select state';
onToggleSnackBar();
changeFocusField('state');
}
}}
onBlur={() => changeFocusField('')}
onChange={(item) => {
city.selectedValue = item.cityId;
city.selectedCity = item;
changeFocusField('');
}}
/>
</View>
<View>
<Text>Selected Country</Text>
<Text style={styles.selectedValue}>{country.selectedCountry.name}</Text>
<Text>Selected State</Text>
<Text style={styles.selectedValue}>{state.selectedState.name}</Text>
<Text>Selected City</Text>
<Text style={styles.selectedValue}>{city.selectedCity.name}</Text>
</View>
<TouchableOpacity onPress={() => resetForm()} style={styles.clrBtn}>
<Text style={styles.clrBtnTxt}>Reset</Text>
</TouchableOpacity>
<Snackbar duration={2000} visible={visible} onDismiss={onDismissSnackBar}>
{snackMsg}
</Snackbar>
</View>
);
}
const ZDropDown = ({
data,
labelField,
valueField,
value,
onFocus,
onBlur,
onChange,
isFocus,
}) => {
return (
<Dropdown
mode={'auto'}
style={[styles.dropdown, isFocus ? { borderColor: 'dodgerblue' } : {}]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
search={data.length > 5}
maxHeight={300}
searchPlaceholder="Search..."
data={data}
labelField={labelField}
valueField={valueField}
placeholder={!isFocus ? 'Select item' : '...'}
value={value}
onFocus={onFocus}
onBlur={onBlur}
onChange={onChange}
/>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
clrBtn: {
padding: 10,
alignItems: 'center',
alignSelf: 'center',
},
clrBtnTxt: {
color: 'grey',
},
selectedValue: {
color: 'steelblue',
marginLeft: 5,
marginTop: 5,
marginBottom: 10,
},
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
marginTop: 5,
marginBottom: 20,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
iconStyle: {
width: 20,
height: 20,
},
inputSearchStyle: {
height: 40,
fontSize: 16,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment