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>
4
Answers
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.
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}}
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
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:
import { StyleSheet } from "react-native"
Usage:
<View className="...." style={styles.shadow} />