react-nativenativewind

React Native's TouchableOpacity not taking styles by className

I'm making a custom Button component with React Native & Nativewind. But the styling doesn't work when className is applied to TouchableOpacity.

Component:

import {TouchableOpacity} from "react-native";

 <TouchableOpacity className="border border-red" {...rest}>
   <View className={cn(base(), className)}>
     {IconLeft && <IconLeft color={icon()} />}

     <Text className={text()}>
       {loading && <LoaderIcon className={spinner()} />}
       {!loading && children}
     </Text>

     {IconRight && <IconRight color={icon()} />}
   </View>
 </TouchableOpacity>

Works with style={{ borderWidth: 1, borderColor: "red" }}. ClassName styling works normal on other components.

Tried swapping places between the inside <View /> and <TouchableOpacity /> (as suggested here). But then it becomes too small to be clicked.

Solution

  • The answer is: had to update Nativewind