Tailwind Css in React Native Box Shadow

Question

I am new to react native. I am trying to apply a shadow effect on a restaurant component I created. Unfortunately I cant get the shadow to take effect. All other styling works. I am using tailwind css for this project. Configuration for tailwind is ok. The only problem is shadowing so far. I have tried to apply shadowing to other components but the results are the same, no effect is observed. Where am I going wrong or what am I not seeing.

<TouchableOpacity className="bg-white mr-3 shadow">
  <Image 
    source={{
      uri: imgUrl,
    }}
    className="h-36 w-36 rounded-sm"
  />
  <View>
    <Text className="font-bold text-lg pt-2">{title}</Text>
    <View className="flex-row items-center space-x-1">
      <StarIcon color="green" opacity={0.5} size={22} />
      <Text className="text-xs text-gray-500">
        <Text className="text-green-500">{rating}</Text> : {genre}
      </Text>
    </View>
    <View className="flex-row items-center space-x-1">
      <LocationMarkerIcon color="gray" size={22} opacity={0.4}/>
      <Text className="text-xs text-gray-500"> Nearby : {address}</Text>
    </View>
  </View>
</TouchableOpacity>

Answer 1

TailwindCSS in React Native is: nativewind Shadow doesn't work for android devices on nativewind. You should use External Styling instead of nativewind shadow properties like:

1. import { StyleSheet } from "react-native"

   const styles = StyleSheet.create({
       shadow: {
           shadowColor: "#000",
           shadowOffset: {
               width: 0,
               height: 3,
           },
           shadowOpacity: 0.27,
           shadowRadius: 4.65,
   
           elevation: 6,
       }
   })
   export default styles
   

2. Usage: <View className="...." style={styles.shadow} />