Install in Expo project

You can create a new Expo project with Expo CLI.

Installation

Install gluestack-style and it's peer dependencies using npm or yarn.

# using npm

npm i @gluestack-style/react react-native-svg

# using yarn

yarn add @gluestack-style/react react-native-svg

After installing gluestack-style, you need to set up the config and StyledProvider at the root of your application. This can be either in your App.tsx or App.jsx.

Setup Config

To configure gluestack-style, you will need to create a gluestack-style.config.ts file (.js works too) in the root of your project. In this config file, you can define your theme tokens, breakpoints, and any other settings that you want to use throughout your application.

For example, in gluestack-style.config.ts:

import { createConfig } from '@gluestack-style/react';

export 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);

type ConfigType = typeof config;

declare module '@gluestack-style/react' {
  interface ICustomConfig extends ConfigType {}
}

Setup StyledProvider

You need to setup StyledProvider with config at the root of your application. Once your config file is set up, you can import it and pass it as a prop to the StyledProvider component. This will make the configuration options available to all components using the styled function. In this example, we are setting up StyledProvider in App.tsx or App.jsx file.

import React from "react"
import { StyledProvider } from "@gluestack-style/react"
import { config } from "./gluestack-style.config"

const App = () => {
  return (
    <StyledProvider config={config}>
      {/* Other components here */}
    </StyledProvider>
  )
}

export default App

Note: You need to pass config to StyledProvider otherwise aliases and design tokens will not work.

Babel Plugin (Optional)

You can also add the babel plugin to your project if you want to perform all style calculations during build time. The plugin can be installed via npm or yarn and should be added to your babel config.

Installation

Install it as development dependency.

# using npm

npm i --save-dev @gluestack-style/babel-plugin-styled-resolver

# using yarn

yarn add --dev @gluestack-style/babel-plugin-styled-resolver

Usage

Add it to babel.config.js or .babelrc.

// babel.config.js
module.exports = {
  plugins: ["@gluestack-style/babel-plugin-styled-resolver"],
}

// .babelrc
{
  "plugins": ["@gluestack-style/babel-plugin-styled-resolver"]
}

That's it 🎉

You are ready to use gluestack-style!

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

const Box = styled(View, {
  bg: "$primary500",
  h: "$6",
  w: "$6",
})

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

export default App