React Native Element Dropdown Doesn't Work with Local Image

Question

So I am working on a language dropdown and I have managet to upload the images to imgur and the app works perfect. The only issue is that I cannot get the images to work offline.

Code

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: {
      uri: "https://i.imgur.com/xIuOPwq.gif",
    },
  },
  {
    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",
    },
  },
];

and the stylesheet

const styles = StyleSheet.create({
  dropdown: {
    margin: 16,
    height: 50,
    width: 150,
    backgroundColor: "#EEEEEE",
    borderRadius: 22,
    paddingHorizontal: 8,
  },
  imageStyle: {
    width: 24,
    height: 24,
    borderRadius: 12,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
    marginLeft: 8,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
});

I have tried

uri: "./path/to/the/image.jpg" - does not work

uri: require("../assets/images/flags/american.jpg"), - ends with error: ERROR Warning: Failed prop type: Invalid propsourcesupplied toImage, expected one of type [number, string].

source: require("../assets/images/flags/american.jpg"), - just doesn't work

What am I doing wrong and how can I make it so that I import local files for my dropdown?

Thank you in advance!

Answer 1

react-native-element-dropdown library uses Image component in React Native. Source code can be view in here.

The syntax for providing image source to it should follow the rules.

//Remote image
<Image source={{uri: "https://i.imgur.com/EL9UnZd.png"}} />

//Local image
<Image source={require("./path_to_image/image.png")} />

So you may edit the local_data like this.

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

const SelectCountryScreen = _props => {
  const local_data = [
    {
      value: "1",
      lable: "English",
      image: {
        uri: "https://i.imgur.com/xIuOPwq.gif",
      },
    },
    {
      value: "2",
      lable: "Swedish",
      image: require("./images.png") //Local images usage demo
    },

    {
      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",
      },
    },
  ];

    const [country, setCountry] = useState('1');

    return (
      <SelectCountry
        style={styles.dropdown}
        selectedTextStyle={styles.selectedTextStyle}
        placeholderStyle={styles.placeholderStyle}
        imageStyle={styles.imageStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        search
        maxHeight={200}
        value={country}
        data={local_data}
        valueField="value"
        labelField="lable"
        imageField="image"
        placeholder="Select country"
        searchPlaceholder="Search..."
        onChange={e => {
          setCountry(e.value);
        }}
      />
    );
  };

export default SelectCountryScreen;