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

Hi Guys,

This tutorial will provide example of how to create change select options based on another dropdown in React native. This post will give you simple example of how to change select options based on another dropdown using React native. we will help you to give example of how to implement change select options based on another dropdown in React native. I would like to show you change select options based on another dropdown example in react native. Here, Creating a basic example of react native change select options based on another dropdown example.

Let's start following example:

In the first step run the following command to create a project.

expo init ExampleApp

First of all you have to install react-native-element-dropdown package.

npm install react-native-element-dropdown --save

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;

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;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...