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;

CodePudding user response：

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

CodePudding user response：

you used item.value insted of item.key

onChange={item => {
        setValue(item.value);
        setIsFocus(false);
      }}