Configure your global style

To configure global style in @gluestack-style/react, create a gluestack-style.config.js file to define your globalStyle along with other configuration settings.
import { createConfig } from "@gluestack-style/react"
export const config = createConfig({
aliases: {},
tokens: {},
globalStyle: {
variants: {
shadow: {
softShadow: {
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 10,
shadowOpacity: 0.1,
_android: {
shadowColor: "$primary500",
elevation: 5,
shadowOpacity: 0.05,
},
},
},
},
},
} as const)

To use global style

const MyButton = styled(Pressable, {
bg: '$red500',
p: '$3',
});
const export Button = () => <MyButton shadow="softShadow" />;
Edit this page on GitHub