mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-17 03:58:57 +08:00
49 lines
839 B
Markdown
49 lines
839 B
Markdown
import Compatibility from "../\_compatibility.mdx"
|
|
import Usage from "../\_usage.mdx"
|
|
|
|
# Box Shadow
|
|
|
|
## Usage
|
|
|
|
<Usage />
|
|
|
|
:::caution
|
|
|
|
On native, shadows may not appear if a background color is not set
|
|
|
|
:::
|
|
|
|
## Example
|
|
|
|
```SnackPlayer name=Hello%20World
|
|
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
|
|
|
|
<Compatibility
|
|
supported={[
|
|
"shadow",
|
|
"shadow-{n}",
|
|
"shadow-none",
|
|
]}
|
|
none={[
|
|
"shadow-[n]",
|
|
"shadow-inner",
|
|
]}
|
|
/>
|