Tailwind Css in React Native Box Shadow-CodePudding

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>

CodePudding user response：

first of all your view that have shadow must have a backgroundColor, even white, and your style is something like this: style={{backgroundColor:'#fff', shadowColor:'#000', shadowOffset:{width:0, height:3}, shadowOpacity:0.5, elevation:3}}

CodePudding user response：

Shadow doesn't work for android devices on tailwind css. The work around I used was to set the style prop to elevation:2 , the higher the number the darker the shadow. <TouchableOpacity className="mr-3 bg-white" style={{ elevation:2 }}> [enter link description here][1]

[1]: How to set shadows in React Native for android? this question was well addressed here.

CodePudding user response：

instead of shadow you can simply replace t.shadow, t.shadowMd, t.shadowLg, t.shadow2xl

tailwindCSS classes are somewhat different for react-native-tailwindcss

still confused, please refer here