Search code examples
javascriptimagereact-nativerequire

How to chose image source from an object on React-Native

I have a JSON with a lot of providers, where everyone has an id, and an image. Depending on the id, I want to show their corresponding logo.

Basically, what I want to do is this: 

<View style={styles.logo}>
   <Image style={styles.imagen} source={proveedores[proveedor]} />
</View>

This is the JSON which I import as coches:

[
    {"id":9, "proveedor": "Avis", "img":"Avis_logo.png"},
    {"id":11, "proveedor": "Atesa", "img":"atesa_logo.png"},
    {"id":17, "proveedor": "Hertz", "img":"hertz.png" },
    {"id":18, "proveedor": "Europcar", "img":"Europcar.png" },
    {"id":38, "proveedor": "SixtRentaCar", "img":"sixt.png" },
    {"id":106, "proveedor": "AutosXoroi", "img":"alquiler_de_coches.png" },
    {"id":111, "proveedor": "Drivania", "img":"drivania.png"},
    {"id":214, "proveedor": "CentauroRentaCar",  "img":"centauro.png" },
    {"id":1406, "proveedor": "GT1Rent", "img":"alquiler_de_coches.png" },
    {"id":2827, "proveedor": "AsionTravel", "img":"alquiler_de_coches.png"},
    {"id":3931, "proveedor": "Click&Rent", "img":"alquiler_de_coches.png" },
    {"id":3980, "proveedor": "LaSavinaCarsMotors", "img":"alquiler_de_coches.png" },
    {"id":6029, "proveedor": "OneCarsValencia", "img":"alquiler_de_coches.png" },
    {"id":6129, "proveedor": "FlexibleAutos", "img":"alquiler_de_coches.png" },
    {"id":6134, "proveedor": "AutoArandino", "img":"alquiler_de_coches.png" },
    {"id":6249, "proveedor": "Rentikar", "img":"alquiler_de_coches.png" },
    {"id":6285, "proveedor": "Transferextra", "img":"alquiler_de_coches.png" },
    {"id":6432, "proveedor": "SCMelaniaRentaCar", "img":"alquiler_de_coches.png" },
    {"id":6579, "proveedor": "GoldcarSpain", "img":"alquiler_de_coches.png" },
    {"id":6662, "proveedor": "Telefurgo", "img":"alquiler_de_coches.png" }
]

This is what I tried:

import coches from "../../assets/json/coches.json";

this.state={
   coches: coches
}

const proveedores = {
            Avis: require("../../assets/images/proveedores/Avis_logo.png"),
            Atesa: require("../../assets/images/proveedores/atesa_logo.png"),
            Hertz: require("../../assets/images/proveedores/hertz.png"),
            Europcar: require("../../assets/images/proveedores/Europcar.png"),
            SixtRentaCar: require("../../assets/images/proveedores/sixt.png"),
            AutosXoroi: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Drivania: require("../../assets/images/proveedores/drivania.png"),
            CentauroRentaCar: require("../../assets/images/proveedores/centauro.png"),
            GT1Rent: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            AsionTravel: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Click: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            LaSavinaCarsMotors: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            OneCarsValencia: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            FlexibleAutos: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            AutoArandino: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Rentikar: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Transferextra: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            SCMelaniaRentaCar: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            GoldcarSpain: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Telefurgo: require("../../assets/images/proveedores/alquiler_de_coches.png") 
        }

        const codigoRent = this.props.idProveedor; //this is 38 = SixRentaCar
        let proveedor = "";

        this.state.coches.forEach((agencia) => {
            if (agencia.id == codigoRent) { //if agencia.id=38 == codigoRent=38
                proveedor = agencia.proveedor; //Here proveedor is SixtRentaCar
            }
        });

<View style={styles.logo}>
   <Image style={styles.imagen} source={proveedores[proveedor]} />
</View>

Thing is that if I set proveedor as proveedor = "SixtRentaCar" I do get the logo.

How can I do this?

Solution

  • I think you might have to do something like this:

    import Avis_logo from '../../assets/images/proveedores/Avis_logo.png';
import atesa_logo from '../../assets/images/proveedores/atesa_logo.png';
...
import alquiler_de_coches from '../../assets/images/proveedores/alquiler_de_coches.png';

const files = {
   Avis_logo,
   atesa_logo,
   ...
   alquiler_de_coches
};

export default files;

    And then in another file you can do dynamic imports from that

    import imgFiles from '../imgFiles.js';

... 
<img src={imgFiles[variable]} />

    Where variable is a string like 'Avis_logo'