Box Shadow

Nativewind uses the scaling system from react-native-shadow-generator to help generate cross platform shadows.

Usage

Please refer to the documentation on the Tailwind CSS website

CAUTION

On native, shadows may not appear if a background color is not set

Example

import { Text, View } from 'react-native';
import { styled } from 'nativewind';
 
const StyledView = styled(View)
const StyledText = styled(Text)
 
const App = () => {
  return (
    <StyledView className="flex-1 items-center justify-center">
      <StyledView className="h-[50vh] items-center justify-center shadow">
        <StyledText className="text-slate-800 shadow">Try editing me! ๐ŸŽ‰</StyledText>
      </StyledView>
    </StyledView>
  );
}

Compatibility

ClassSupport
shadow
โœ… Full Support
shadow-{n}
โœ… Full Support
shadow-none
โœ… Full Support
shadow-[n]
๐ŸŒ Web only
shadow-inner
๐ŸŒ Web only
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

โœ… Full support

โœ”๏ธ Partial support on native

๐Ÿงช Experimental support on native

๐Ÿ“ฑ Native only

๐ŸŒ Web only

On this page