className Not working in react native with nativewind styling

Question

i am attempting to use className and nativewind stlying to style my image in this custom component but the image doesn't show up, i was able to use className with nativewind in other parts of my code, but it doesnt't seem to be working her, prehaps it is because it is a custom compontent but i am not sure, i am anyone can help.

import {View,Text,ScrollView,TouchableOpacity,Image} from 'react-native'
import React, {useLayoutEffect} from 'react'


const CategoryCard=({imgUrl, title})=>{
    

    return(

        <TouchableOpacity>
            <Image
                source={{
                    uri: imgUrl,
                }}

                className='h-7 w-7 bg-gray-300 p-4 rounded-full'

            />


            <Text>{title}</Text>

        </TouchableOpacity>
    )
}

export default CategoryCard

I tried looking into the nativewind docs and found this https://www.nativewind.dev/guides/custom-components that could have something to do with it bur i couldn't really make sense of it and couldn't apply it to my own case.

Answer 1

I was experiencing a similar problem in a project using expo + typescript. I missed an extra step for typescript in the Nativewind docs here: https://www.nativewind.dev/getting-started/typescript

Creating an app.d.ts file in the root of my project with the following line fixed this for me.

/// <reference types="nativewind/types" />