Require local image instead of link

[kriptcs]

Greetings,

I have got the package to work smoothly on my app yet I have an issue, I need to reference a local image instead of a link since the app must work offline

value: "1", lable: "Swedish", image: { uri: "https://i.imgur.com/lCmlkhG.png", },

What do I need to do in order to achieve that?

Thank you!

[nehalprasad]

I guess you might be using SelectCountryComponent . Inside renderItem of the SelectCountryComponent

and you have to pass the local image something like this

@kriptcs

[kriptcs]

hey @nehalprasad Thank you for your reply. I have used require(...), but it still didn't help. I think the issue is in the first screenshot you sent. I do not have that function, where can I find it? For full context here is how my code looks:

CountrySelector.js

import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { SelectCountry } from "react-native-element-dropdown";

const local_data = [
  {
    value: "1",
    lable: "English",
    image: {
      source: require("../assets/images/flags/american.jpg"),
    },
  ....
];

const SelectCountryScreen = (_props) => {
  const [country, setCountry] = useState("1");
  const sendToParent = (data) => {
    _props.func(data);
  }; // Unrelated to the issue and the issue still occured even before this.
  return (
    <SelectCountry
      style={styles.dropdown}
      selectedTextStyle={styles.selectedTextStyle}
      placeholderStyle={styles.placeholderStyle}
      imageStyle={styles.imageStyle}
      iconStyle={styles.iconStyle}
      maxHeight={200}
      value={country}
      data={local_data}
      valueField="value"
      labelField="lable"
      imageField="image"
      onChange={(e) => {
        setCountry(e.value);
        sendToParent(e.value);
      }}
    />
  );
};

export default SelectCountryScreen;

const styles = StyleSheet.create({
  dropdown: {
    },
    ....

});

Home.js

        <SelectCountryScreen
          style={styles.languageToggle}
          func={getChildData}
        />

I have used the SelectCountry example 2 template.

[kriptcs]

Sorry to bother, what is the equivalent of "item: any" in javascript? I am not using typescript and it throws up an error

[kriptcs]

Alright. It still does not seem to work though..I have pretty much copy pasted both chunks and I have no syntax errors yet I stilll have no image on the dropdown. The only ones that work are the ones that are still uploaded online

[kriptcs]

I sent my code above, I do have this. It is not a separate file, it is rather in the same .js file as everything else. The problem I think doesn't like in this, because I have 5 of these pieces of data: 4 with a link imgur and 1 with a uri to a local file. The other 4 work as usual and the one with the uri doesn't. I have tried a lot of things: uri: "./path/to/image.jpg"

uri: require("./path/to/image.jpg)"

then tried using "url" instead of "uri" and still nothing.

[kriptcs]

yes in a few minutes if possible

[kriptcs]

@prasadnehaal I am in the meet now

[nehalprasad]

@kriptcs Can you send me the local_data of yours again

[kriptcs]

const local_data = [ { value: "1", lable: "English", image: { source: require("../assets/images/flags/american.jpg"), }, }, { value: "2", lable: "Swedish", image: { uri: "https://i.imgur.com/lCmlkhG.png", }, },

{ value: "3", lable: "Japanese", image: { uri: "https://i.imgur.com/EL9UnZd.png", }, }, { value: "4", lable: "Danish", image: { uri: "https://i.imgur.com/h5lYMuT.png", }, }, { value: "5", lable: "Finnish", image: { uri: "https://i.imgur.com/wGo0ftj.jpeg", }, }, ];

@nehalprasad

[nehalprasad]

import React, {useEffect, useState} from 'react'; import { I18nManager, Image, SafeAreaView, StyleSheet, Text, View, } from 'react-native'; import {Dropdown} from 'react-native-element-dropdown'; const local_data = [ { value: '1', lable: 'India', image: { uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7tdv7EvQTq9b4q630tWtlsXw5--lzD2rh_5m8nIBMsw&s', }, }, { value: '2', lable: 'Romania', image: { uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flag_of_Romania.svg/800px-Flag_of_Romania.svg.png', }, }, { value: '3', lable: 'Israel', image: { uri: 'https://cdn.britannica.com/53/1753-004-03582EDA/Flag-Israel.jpg', }, }, { value: '4', lable: 'Sweden', image: { uri: require('./src/images/Sweden.jpeg'), }, }, { value: '5', lable: 'Bermuda', image: { uri: 'https://cdn.britannica.com/55/69555-050-672A2C54/Flag-Bermuda.jpg', }, }, ]; const renderItem = (item: any) => { const isLocalImage = typeof item.image.uri === 'string'; return (

{item.lable}

); }; const App = () => { const [country, setCountry] = useState('1'); const [image, setImage] = useState()

useEffect(() => { console.log(image); }, [image])

return (

{ if (typeof image?.uri === 'string') { return } else { return } }} onChange={e => { setImage(e.image) setCountry(e.value); }} />

); }; export default App; const styles = StyleSheet.create({ container: { width: 60, }, item: { flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row', padding: 6, alignItems: 'center', }, image: { width: 20, height: 20, marginRight: 3, marginVertical: 4, }, selectedTextStyle: { flex: 1, fontSize: 12, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr', }, dropdown: { margin: 16, height: 50, borderBottomColor: 'gray', borderBottomWidth: 0.5, }, imageStyle: { width: 24, height: 24, }, placeholderStyle: { fontSize: 16, }, inputSearchStyle: { height: 40, fontSize: 16, }, });

[nehalprasad]

The image path i have chosen is src folder then an image folder and inside that an image with Sweden.jpeg @kriptcs

[kriptcs]

It seems to work but the styling is a bit off

[nehalprasad]

Yup I got it. Just pass the style as per your design in the style prop of all the tags

[kriptcs]

Greetings, managed to get it styled yet I still have a few issues

1. The dropdown starts off by stating the language name but as soon as I change language it says "Select item" instead.
2. There is no names next to the languages and even though I applied the same styling as before, it all looks different.

[nehalprasad]

may i see you code @kriptcs

[kriptcs]

I managed to fix it in the end. This is what did it for me https://stackoverflow.com/questions/78226455/react-native-element-dropdown-doesnt-work-with-local-image

Thank you so much for the time and help @nehalprasad