Box shadow is not working

[Sim923]

Box shadow is not working so I customized box shadow styles like this one

https://tvke.github.io/react-native-tailwindcss/effects/box-shadow.html

[ajsmth]

Hi there - can you try and explain a bit more about what is not working?

The configuration for boxShadow is slightly different from native tailwind configs:

// defaultConfig.js


    boxShadow: {
      sm: [1, 2, 1, 0.05, "rgb(0,0,0)"],
      DEFAULT: [1, 3, 1, 0.1, "rgba(0,0,0)"],
      md: [4, 6, -1, 0.1, "rgb(0,0,0)"],
      lg: [10, 15, -3, 0.1, "rgb(0,0,0)"],
      xl: [20, 25, -5, 0.1, "rgb(0,0,0)"],
      "2xl": [25, 50, -12, 0.25, "rgb(0,0,0)"],
      none: [0, 0, 0, 0, "rgb(0,0,0)"],
    }

[Sim923]

the values set in boxShadow configuration is not affected by UI I can not see any differences or shadows when using defaultConfig values. So I tried to use my own values coming from https://tvke.github.io/react-native-tailwindcss/effects/box-shadow.html

[ajsmth]

Okay - can you supply a code example that I can run and verify?

[Sim923]

"shadow-sm": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 1,
				"height": 2
			},
			"shadowOpacity": 0.05,
			"shadowRadius": 1
		},
		"android": {
			"elevation": 1
		}
	},
	"shadow": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 1
			},
			"shadowOpacity": 0.1,
			"shadowRadius": 3
		},
		"android": {
			"elevation": 1.5
		}
	},
	"shadow-md": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 4
			},
			"shadowOpacity": 0.1,
			"shadowRadius": 6
		},
		"android": {
			"elevation": 3
		}
	},
	"shadow-lg": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 10
			},
			"shadowOpacity": 0.1,
			"shadowRadius": 15
		},
		"android": {
			"elevation": 7.5
		}
	},
	"shadow-xl": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 20
			},
			"shadowOpacity": 0.1,
			"shadowRadius": 25
		},
		"android": {
			"elevation": 12.5
		}
	},
	"shadow-2xl": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 25
			},
			"shadowOpacity": 0.25,
			"shadowRadius": 4
		},
		"android": {
			"elevation": 2
		}
	},
	"shadow-none": {
		"default": {
			"shadowColor": "rgb(0,0,0)",
			"shadowOffset": {
				"width": 0,
				"height": 0
			},
			"shadowOpacity": 0,
			"shadowRadius": 0
		},
		"android": {
			"elevation": 0
		}
	},

[ajsmth]

ah okay - well just eyeballing this it looks like the config is different from what I wrote above - I use array syntax for box shadow. Also not sure what this website you keep referencing is for - this lib has no association with it

[Sim923]

I created my own configuration file based on https://github.com/ajsmth/tailwind-react-native/blob/main/lib/styles.json I only updated shadow sections.

replaced values from this site - https://tvke.github.io/react-native-tailwindcss/effects/box-shadow.html

[ajsmth]

ah I think I see what you mean! I'll fix this up - thanks!