StyledProvider

gluestack-style exports a StyledProvider component that can be used to configure the library.

The StyledProvider component is a higher-order component that wraps your entire application and provides the library's configuration options through its config prop.

You can use the StyledProvider component to set global options, such as breakpoints and theme.

Here is an example of how you can use the StyledProvider component to configure the library:

import { StyledProvider, createConfig } from "@gluestack-style/react"

const config = createConfig({
  aliases: {
    bg: "backgroundColor",
    bgColor: "backgroundColor",
    rounded: "borderRadius",
    h: "height",
    w: "width",
  },
  tokens: {
    colors: {
      primary0: "#ffffff",
      primary400: "#c084fc",
      primary500: "#a855f7",
      primary600: "#9333ea",
    },
    space: {
      4: 16,
      5: 20,
      6: 24,
    },
    radii: {
      sm: 4,
      md: 6,
    },
    letterSpacings: {
      md: 0,
    },
    lineHeights: {
      sm: 20,
      md: 22,
    },
    fontWeights: {
      normal: "400",
      medium: "500",
    },
    fontSizes: {
      sm: 14,
      md: 16,
    },
    mediaQueries: {
      sm: "@media (min-width: 480px)",
      md: "@media (min-width: 768px)",
    },
  },
  globalStyle: {
    variants: {
      shadow: {
        softShadow: {
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowRadius: 10,
          shadowOpacity: 0.1,
          _android: {
            shadowColor: "$primary500",
            elevation: 5,
            shadowOpacity: 0.05,
          },
        },
      },
    },
  },
} as const)

const App = () => (
  <StyledProvider config={config}>
    <YourApp />
  </StyledProvider>
)

In this example, the StyledProvider component is used to set the breakpoints and theme for the entire application, and the config prop is passed with the configuration options.

It's important to note that the StyledProvider needs to be placed at the top level of your application, so that it can provide the config to all the other components that use the library.

Once you have wrapped your application with the StyledProvider, you will be able to use the breakpoints, theme and other configs throughout your application.

Color Mode:

To switch between color modes, the UI library may provide a toggle button or some other mechanism that can be used to change the color mode. When the color mode is changed, the library updates the colors used throughout the interface to match the new mode.

To implement this the StyledProvider accepts a colorMode prop. Just handle your colorMode and pass your current colorMode in this prop and all your components will start reacting to your colorMode changes.

import React from "react"
import { View, Pressable, Text } from "react-native"
import { styled, StyledProvider } from "@gluestack-style/react"
import { config } from "./gluestack-style.config"
const StyledComponent = styled(
  View,
  {
    p: "$4",
    _dark: {
      bg: "$info600",
    },
    _light: {
      bg: "$info800",
    },
  },
  {}
)

export function ColorMode({ ...args }) {
  const [currentColorMode, setCurrentColorMode] = React.useState("light")

  return (
    <StyledProvider config={config} colorMode={currentColorMode}>
      <Pressable
        style={{
          backgroundColor: "gray",
          padding: 12,
          marginBottom: 12,
        }}
        onPress={() => {
          setCurrentColorMode(currentColorMode === "dark" ? "light" : "dark")
        }}
      >
        <Text style={{ color: "white" }}>
          Toggle {currentColorMode === "dark" ? "light" : "dark"}
        </Text>
      </Pressable>
      <StyledComponent />
    </StyledProvider>
  )
}

Global Style Injector:

The StyledProvider accepts a globalStyleInjector prop. This prop is a function that will be called with config. You can use this function to inject global styles into your application.

import React from "react"
import { Pressable, Text } from "react-native"
import {
  styled,
  StyledProvider,
  createGlobalStylesWeb,
} from "@gluestack-style/react"
import { config } from "./gluestack-style.config"

const globalStyles = createGlobalStylesWeb({
  body: {
    bg: "$red500",
  },
  ".className": {
    body: {
      bg: "$info600",
    },
  },
})

const StyledButton = styled(Pressable, {
  bg: "$primary600",
  px: "$6",
  py: "$4",
  _dark: {
    bg: "$info600",
  },
  _light: {
    bg: "$info800",
  },
})

const App = () => {
  return (
    <StyledProvider config={config} globalStyleInjector={globalStyles}>
      <StyledButton />
    </StyledProvider>
  )
}