Why does Nativewind cause nothing to render when I have an <ImageBackground />?

88 Views Asked by At

I just installed Nativewind in my expo app (Expo SDK v50.0.0-preview.7). Before updating my metro and babel configs to include Nativewind, everything was rendering properly, but now <ImageBackground /> will cause nothing to render (I get a blank screen). When I comment out the <ImageBackground /> everything else renders properly.

<View className='flex-1 flex-col h-screen'>
    <ImageBackground
        source={{
            uri: Asset.fromModule(require('~/assets/images/light/login.png')).uri
        }}
        resizeMode='cover'
        className='flex-1'
    >
        <SafeAreaView>
            <View className='p-[24px] pt-[12px]'>
                <Text className='text-[30px] text-center font-semibold'>
                    Welcome!
                </Text>
                <Pressable>
                    <Text className='text-[18px] text-center font-medium'>
                        Sign in with Microsoft
                    </Text>
                </Pressable>
            </View>
        </SafeAreaView>
    </ImageBackground>
</View>

babel.config.js:

module.exports = function (api) {
    api.cache(true);

    return {
        presets: [
            [
                'babel-preset-expo',
                {
                    jsxImportSource: "nativewind"
                }
            ],
            'nativewind/babel'
        ],
    };
};

metro.config.js:

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

const path = require("path");

const projectRoot = __dirname;
const workspaceRoot = path.resolve(projectRoot, "../../");

const config = getDefaultConfig(projectRoot);

if (config.resolver) {
    config.watchFolders = [workspaceRoot];

    config.resolver.nodeModulesPaths = [
        path.resolve(projectRoot, "node_modules"),
        path.resolve(workspaceRoot, "node_modules"),
    ];

    config.resolver.disableHierarchicalLookup = true;
}

module.exports = withNativeWind(config, {
    input: "./src/styles.css",
    configPath: "./tailwind.config.ts",
});

tailwind.config.ts:

import type { Config } from "tailwindcss";
// @ts-expect-error - no types
import nativewind from "nativewind/preset";

import baseConfig from "@helium/tailwind-config";

export default {
    content: ["./src/**/*.{ts,tsx}"],
    presets: [nativewind],
    theme: {
        colors: {
            "main": '#CA3535',
            "secondary-light": '#444444',
            "secondary-dark": '#BBBBBB',
        },
        extend: {
            boxShadow: {
                'light': '0 0 10px 3px rgba(0, 0, 0, 0.1)',
                'dark': '0 0 10px 3px rgba(255, 255, 255, 0.1)',
            }
        }
    },
} satisfies Config;

I have not been able to find any issues related to this online, so any help is greatly appreciated.

0

There are 0 best solutions below