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>

Haseeb Khan · Accepted Answer · 2022-10-08 07:28:59Z

5

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"

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

        elevation: 6,
    }
})
export default styles

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

answered Oct 8, 2022 at 7:28

Haseeb Khan

715 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shangazi Mkubwa · Accepted Answer · 2022-08-16 11:03:25Z

2

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.

answered Aug 16, 2022 at 11:03

Shangazi Mkubwa

751 silver badge9 bronze badges

Comments

MehdiNasiriPoor · Accepted Answer · 2022-08-16 10:59:08Z

1

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}}

answered Aug 16, 2022 at 10:59

MehdiNasiriPoor

3342 silver badges14 bronze badges

1 Comment

Shangazi Mkubwa Over a year ago

backgroundColor is not a must when working with tailwind css, it is an added option.

raghava · Accepted Answer · 2022-08-16 11:42:20Z

0

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

answered Aug 16, 2022 at 11:42

raghava

2701 silver badge5 bronze badges

Comments

Gustavo Batista · Accepted Answer · 2024-02-04 03:05:50Z

0

Nowadays shadow prop works well in NativeWind.

Take my code as example:

<View className="flex-1 bg-white p-4">
    <View className="flex-1 bg-blue-500 rounded-2xl shadow shadow-black/>
</View>

It's handled both Android and iOS with no problem

Just remember sometimes you'll need to add a background color to work See more in the docs here

Box with shadow-2xl applied

Without Shadow

edited Feb 4, 2024 at 3:05

answered Feb 4, 2024 at 3:05

Gustavo Batista

11 bronze badge

1 Comment

semperlabs Over a year ago

It's important to mention that shadow is not visible without defining a shadow color, in this case shadow-black

Collectives™ on Stack Overflow

Tailwind Css in React Native Box Shadow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related