skip to Main Content

I am using react-native-element-dropdown in react native app. It works fine with default value if set in useState but it’s not work with set api response value and not selected in dropdown

import { Dropdown } from "react-native-element-dropdown";

const Profile = ({ navigation, route }) => {
  const [country, setCountry] = useState("");

  useEffect(() => {
    getUserProfile();
  }, []);

  const getUserProfile = async () => {
    return api
      .getuserprofile(locale, authValues.user.id, authValues.token)
      .then((response) => {
        if (response.data.status) {
          setCountry(response.data.body.user.country_id);
        }
      })
      .catch((error) => {
        //console.log(error);
      });
  };

  return (
    <SafeAreaView style={globalStyles.appContainer}>
      <View style={globalStyles.inputBox}>
        <Text style={globalStyles.inputLabel}>Country of Residence</Text>

        <Dropdown
          data={CountryData}
          search
          maxHeight={300}
          labelField="value"
          valueField="key"
          placeholder="Country of Residence"
          searchPlaceholder={"Search..."}
          value={country}
          onChange={(item) => {
            setCountry(item.key);
          }}
        />
      </View>
    </SafeAreaView>
  );
};

export default Profile;

2

Answers


  1. I’ve create an example of how to archive it on React native:

    import * as React from 'react';
    import {useState, useEffect} from 'react';
    import { Text, View, StyleSheet } from 'react-native';
    import Constants from 'expo-constants';
    
    import { Dropdown } from 'react-native-element-dropdown';
    import AntDesign from 'react-native-vector-icons/AntDesign';
    
    export default function App() {
      const [data, setData] = useState([{
        key: 1,
        value: 'Australia'
      }, {
        key: 2,
        value: 'New Zeland'
      }, {
        key: 3,
        value: 'The United State'
      }]);
      const [selectedValue, setSelectedValue] = useState(null);
      const [isFocus, setIsFocus] = useState(false);
    
      const getSelected = () => {
        fetch('https://api.agify.io/?name=michael').then(res => {
          setSelectedValue(3);
        }).catch((err) => {
          console.log(err);
        })
      }
    
      useEffect(() => {
         getSelected();
      }, []);
      return (
        <View style={styles.container}>
         <Dropdown
              style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
              data={data}
              search
              maxHeight={300}
              labelField="value"
              valueField="key"
              placeholder={!isFocus ? 'Select item' : '...'}
              searchPlaceholder="Search..."
              value={selectedValue}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={item => {
                setSelectedValue(item.key);
                setIsFocus(false);
              }}
              renderLeftIcon={() => (
                <AntDesign
                  style={styles.icon}
                  color={isFocus ? 'blue' : 'black'}
                  name="Safety"
                  size={20}
                />
              )}
            />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
    });
    
    

    and you can check the working example from here

    Login or Signup to reply.
  2. you used item.value insted of item.key

    onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search