04-Apr-2023
.
Admin
Hi Guys,
I am going to explain you example of how to change select options based on another dropdown using React native. you will learn how to create change select options based on another dropdown in React native. step by step explain how to implement change select options based on another dropdown in React native. you will learn react native change select options based on another dropdown example. So, let's follow few step to create example of change select options based on another dropdown example in react native.
Let's start following example:
Step 1: Download Project
In the first step run the following command to create a project.
expo init ExampleApp
Step 2: Install and Setup
First of all you have to install react-native-element-dropdown package.
npm install react-native-element-dropdown --save
Step 3: App.js
In this step, You will open the App.js file and put the code.
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import DropDowns from './components/DropDowns';
const App = () => {
return (
<View style={styles.container}>
<DropDowns />
<StatusBar />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 30,
flex:1,
},
});
export default App;
Step 4: DropDowns.js
In this step, you will create a Components folder and create a file named DropDowns.js in it and put the code.
Components/DropDowns.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
const DATA = [
{ label: 'Half Day', value: 'Half Day' },
{ label: 'Full Day', value: 'Full Day' },
];
const TYPE = [
{ label: 'Occasionally', value: 'Occasionally' },
{ label: 'Medical', value: 'Medical' },
];
const DropDowns = () => {
const [value, setValue] = React.useState(null);
const [timeValue, setTimeValue] = React.useState(null);
const [select, setSelect] = React.useState(false);
return (
<View>
<Text style={styles.leaveType}>Leave Time:</Text>
<Dropdown
data={DATA}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
maxHeight={300}
labelField="label"
valueField="value"
placeholder={'--Select--'}
value={value}
onChange={item => {
setValue(item.value);
setSelect(true);
}}
/>
<View style={styles.timeDropdown}>
<Text style={styles.leaveType}>Leave Type:</Text>
<Dropdown
data={select ? TYPE : undefined}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
maxHeight={300}
labelField="label"
valueField="value"
placeholder={'--Select--'}
searchPlaceholder="Search..."
value={timeValue}
onChange={item => {
setTimeValue(item.value);
}}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
},
placeholderStyle: {
fontSize: 16,
},
selectedTextStyle: {
fontSize: 16,
},
timeDropdown: {
marginTop:10,
},
leaveType: {
fontSize:17,
fontWeight:'600',
marginBottom:5,
},
});
export default DropDowns;
Run Project
In the last step run your project using the below command.
expo start
You can QR code scan in Expo Go Application on mobile.
Output :
It will help you...
#React Native