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.