Web Styles

Unistyles Web is independent from React Native Web, utilizing a custom web parser that directly generates CSS from your StyleSheet definitions.

How It Works

Unistyles web parser generates unique classNames for your styles and assigns them to corresponding DOM elements. This ensures that only the necessary styles are applied, avoiding redundancy. Additionally, media queries are automatically created based on your breakpoints, eliminating the need for recalculation on every resize.

Example:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'red',
        fontSize: 32,
    },
    text: {
        fontSize: {
            xs: 28,
            lg: 40
        },
    },
    parentContainer: {
        flex: 1,
    }
})

This produces the following CSS output:

.unistyles_1u0egm6 {
  flex: 1;
}

@media (min-width: 0px) {
  .unistyles_kaoph5 {
    font-size: 32px;
  }
}

@media (min-width: 1200px) {
  .unistyles_kaoph5 {
    font-size: 40px;
  }
}

Updating Styles

When you change your app’s theme, Unistyles automatically updates your CSS without triggering any re-renders. This applies to dynamic functions and variants as well.

For instance, if you define your styles dynamically:

const styles = StyleSheet.create(theme => ({
    container: {
        flex: 1,
        backgroundColor: theme.colors.background
    }
}))

The generated CSS might look like this:

.unistyles_1u0egm6 {
  flex: 1;
  background-color: #000;
}

Upon switching the theme:

UnistylesRuntime.setTheme('light')

The CSS will automatically update to:

.unistyles_1u0egm6 {
  flex: 1;
  background-color: #fff;
}

Limitations

Due to Unistyles custom parser, styles cannot be accessed directly as they would be with React Native Web. Passing styles to the RNW parser would modify them and generate unnecessary new classes.

As a result, when you try to console.log the styles, there will be no output:

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

// This will result in an empty object since we generate classes instead of inline styles
console.log(styles) // {}

Web-Only Features

Unistyles includes some features specific to the web. Learn more about them here.