hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
970 stars 294 forks source link

Adding translation to labels of dropdown #651

Open monabeeltahir opened 1 year ago

monabeeltahir commented 1 year ago

Hello!

I am trying to add multi language support in dropdown menu. In my home screen I have change language button but I am finding it difficult to change the language for the dropdown menu labels

hossein-zare commented 1 year ago

Hi, You should map labels manually.

monabeeltahir commented 1 year ago

So this is how I define the labels. The issue with this approach is that it only renders or defines labels once. const [items, setItems] = useState([ {label: strings.food, value: 'Food'}, {label: 'Dental', value: 'Dental'}, {label: strings.medical, value: 'Medical'}, {label: strings.housing, value: 'Housing'}, {label: strings.womenhealth, value: 'Women'} ]);

monabeeltahir commented 1 year ago

I am using 'react-localization' library and declaring the strings with translations.

hossein-zare commented 1 year ago

Try this method:

const [items, setItems] = useState([]);

useEffect(() => {
  setItems([
    {label: strings.food, value: 'Food'},
    {label: 'Dental', value: 'Dental'},
    {label: strings.medical, value: 'Medical'},
    {label: strings.housing, value: 'Housing'},
    {label: strings.womenhealth, value: 'Women'},
  ]);
}, [strings]);
monabeeltahir commented 1 year ago

Thanks.