Icons are displayed as a square

[mphist]

I'm using Expo and running the Web option to develop an application, and the icons are displaying squares in place of the actual icons.

After looking through similar issues on the web, I manually installed "react-native-vector-icons", but it didn't resolve the issue.

My configs are as follows. I'd appreciate any help.

package.json

"dependencies": {
    "@expo/webpack-config": "^0.17.2",
    "@react-navigation/bottom-tabs": "^6.4.1",
    "@react-navigation/native": "^6.0.14",
    "@react-navigation/native-stack": "^6.9.2",
    "expo": "~47.0.8",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-paper": "^5.1.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.9"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-typescript": "^7.18.6",
    "@types/jest": "^29.2.4",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.70.6",
    "concurrently": "^7.6.0",
    "install": "^0.13.0",
    "jest": "^29.3.1",
    "npm": "^9.2.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4",
    "ts-jest": "^29.0.3",
    "typescript": "^4.6.3"
  },

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx"
  }
}

[mphist]

Solution was to include 'babel-preset-expo' to babel.config.js

[micaelomota]

@mphist I'm facing this issue now, locally it works well, but when I build the app and deploy it shows squares. I see my babel.config.js has it correctly 'babel-preset-expo'

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin",
    ],
  };
};

[furkantanyol]

any solutions? having the same issue @micaelomota

[ysalitrynskyi]

Same issue