skip to Main Content

I’ve been searching for hours how to mix NativeWind and SVG reader for react native application, here’s the answer for me:

2

Answers


  1. Chosen as BEST ANSWER

    Expo:

    "expo": "^50.0.1",

    ReactNative:

    "react-native": "0.73.2",

    Hope it helps.


    metro.config.js (root of the project)

    const { getDefaultConfig } = require("expo/metro-config");
    const { withNativeWind } = require("nativewind/metro");
    
    const createConfig = () => {
      const config = getDefaultConfig(__dirname);
    
      const { transformer, resolver } = config;
    
      config.transformer = {
        ...transformer,
        babelTransformerPath: require.resolve("react-native-svg-transformer")
      };
      config.resolver = {
        ...resolver,
        assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
        sourceExts: [...resolver.sourceExts, "svg"]
      };
      return config;
    };
    
    const config = createConfig();
    module.exports = withNativeWind(config, { input: "./src/global.css" , });
    

  2. You can follow my article for react native tailwind and setup it in just 2 minutes

    Medium Link: Tailwind CSS In React Native

    hope it will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search