Icons Not Loaded After Updating ReactNative Expo to Version 40

TL; DR: If you’re loading SVGs, check into your metro.config.js and see if you’re using the getDefaultConfig from '@expo/metro-config'. If you’re requiring it from 'metro-config', you should update your code based on the one below. More info in the readme ofreact-native-svg-transformer

Recently I’ve had an issue with updating a project I was working on – after updating the Expo SDK to version 40, the icons stopped working.

The project was using react-native-elements, so this was my first guess for the cause of the issue. Digging a bit deeper, it turned out that any icon from @expo/vector-icons was shown as an X in a square.

Digging through the project (and github issues) I decided to create an empty expo project and gradually include the files. Doing so, I found out that there was a custom metro.config.js that took care for loading the SVGs. Looking into the readme of the 'react-native-svg-transformer' and Eurica 🙂 from version 40 or newer, the code in the metro.config.js should be different:

const { getDefaultConfig } = require("@expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]

And don’t forget to install the '@expo/metro-config' module:

yarn add @expo/metro-config
// or
npm install @expo/metro-config

That’s it and happy hacking 🙂

Making async ajax calls to an array of url’s and processing their responses at once

Today I had a very interesting case where we needed to get a specific amount of SVG files with ajax calls that were to be processed once after all of the requests are done.

I was familiar with the $.when and used it before but only in casese where the number of the calls were fixed amount.

So something like this:

$.when( $.ajax( 'first.svg' ), $.ajax( 'second.svg' ) ).done( function( ajax1, ajax2 ) {
    // do stuff with both things.. as ajax1[0] is the svg document
    // for the first.svg and ajax2[0] is the svg document for the 
    // second.svg

It’s clear that we are going to use something similar.. so we tried putting the ajax requests into an array so we can dinamically add them.

// svgUrlArray is an existing array with all the urls of the svgs

// we create a new array with all the ajax calls
var svgAjaxArray = [];

for( var svgIndex = 0; svgIndex < svgUrlArray.length; svgIndex++ ) {
    svgAjaxArray.push( $.ajax( svgUrlArray[ svgIndex ] ) );

Now we give the array to the $.when

$.when( svgAjaxArray ).done( function() {
    // this is executed a bit too early 

The done function is executed too early. Why?

Because the Array is not a Deffered – it’s just an Array and it gets its value immediatley. So the done is executed right away.

So what’s the easiest solution?

$.when.apply( $, svgAjaxArray ).done( function() {
    // Now we're talking ;)
    // You must use the arguments variable to get all the entries
    // because you don't know what is the length of the ajaxArray

So now we can do any amount of async requests and process them after all of them are done. Hooraaay!