Nello sviluppo dell’ultima app nativa in React Native a cui sto lavorando, mi sono trovato nella situazione di dover cambiare il colore di un’icona dinamicamente in base all’input dell’utente. Il risultato da ottenere doveva essere il seguente:

Inizialmente, un pò per pigrizia e un pò per concludere più velocemente il task, ho risolto creando tante icone di colori diversi e in base all’input dell’utente cambiava l’intera icona. Ovviamente questo non è l’approccio ottimale per far fronte a questo caso e allora ho iniziato a sperimentare e studiare quale potesse essere la soluzione ottimale per cambiare il colore dell’icona dinamicamente senza dover avere un immagine per ogni colore.

Per fare questo abbiamo bisogno che la nostra icona sia in formato SVG così da poter modificare il colore dell’immagine agendo sull’XML della stessa icona. Inoltre, per lavorare con file SVG in React Native abbiamo bisogno d'installare nella nostra app la libreria react-native-svg.

Installazione react-native-svg

Per procedere con l’installazione della libreria possiamo semplicemente lanciare da terminale il seguente comando nella cartella del nostro progetto React Native:

 npm install react-native-svg

*se utilizzi expo consulta la doc ufficiale per l’installazione della libreria

Lavoriamo sull’SVG

A questo punto possiamo aprire il file SVG della nostra immagine con un qualsiasi editor e ispezionando il file XML della nostra immagine possiamo notare che in alcuni punti sono presenti stringe esadecimali che rappresentano i colori presenti nell’immagine come in questo esempio:

L’idea alla base è quella di modificare la/le stringhe esadecimali dinamicamente quindi sostituirla con una variabile che cambierà in base all’input dell’utente.

Possiamo quindi creare, nel punto in cui preferiamo della nostra app, una funzione che accetta come parametro una stringa esadecimale, che rappresenta il nostro colore, e che ci restituisce il nostro XML come stringa e con il colore passato come attributo. Per fare questo ci possiamo servire della string interpolation gestita da template literals che ci permette di generare una striga racchiudendola da backticks ( ) e racchiudendo la nostra variabile in ${miaVariabile} come in questo esempio.

A questo punto possiamo visualizzare la nostra immagine in qualunque parte della nostra app attraverso il componente <SvgXml /> fornitoci dalla libreria react-native-svg installata in precedenza.

Importiamo quindi il componente

import { SvgXml } from 'react-native-svg';

e utilizziamolo dove preferiamo passando la funziona, che genera il nostro xml modificato, come props del componente SvgXml. selectedColor non è altro che una variabile che memoria la stringa esadecimale del colore che voglio visualizzare.

<SvgXml xml={getHeartIcon(selectedColor)} width="50%" height="50%" />

Conclusioni

L’approccio mostrato in questo breve articolo è frutto di una personalissima e modestissima esperienza per quel che sono le mie scarse conoscenze della manipolazione di file SVG. Mi è sembrato un approccio abbastanza snello e facile da usare, con il solo ausilio del package react-native-svg. Inoltre lo ritengo un approccio abbastanza flessibile che può permetterci di manipolare più di un colore nella stessa immagine. Sicuramente ci saranno approcci più adatti, se li conosci mi farebbe piacere se li condividessi con me. 🤩

Se vuoi uno spunto di come implementare questo approccio dai un’occhiata alla repo che ho creato ad-hoc e non esitare a contattarmi per ulteriori spiegazioni. https://github.com/dlato97/iconDynamicColor