How to Change Select Options Based on Another Dropdown using React Native?

When “How to Change Select Options Based on Another Dropdown using React Native?” moves through design, development and browser testing, the official Monitask overview can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

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...