### Full Unistyles Configuration Example Source: https://www.unistyl.es/v3/start/configuration A complete setup including theme definitions, breakpoint constants, and TypeScript module augmentation. ```typescript import { StyleSheet } from 'react-native-unistyles' const lightTheme = { colors: { primary: '#ff1ff4', secondary: '#1ff4ff' }, gap: (v: number) => v * 8} const otherTheme = { colors: { primary: '#aa12ff', secondary: 'pink' }, gap: (v: number) => v * 8} const appThemes = { light: lightTheme, other: otherTheme} const breakpoints = { xs: 0, sm: 300, md: 500, lg: 800, xl: 1200} type AppBreakpoints = typeof breakpointstype AppThemes = typeof appThemes declare module 'react-native-unistyles' { export interface UnistylesThemes extends AppThemes {} export interface UnistylesBreakpoints extends AppBreakpoints {}} StyleSheet.configure({ settings: { initialTheme: 'light', }, breakpoints, themes: appThemes}) ``` -------------------------------- ### Install project dependencies Source: https://www.unistyl.es/v3/tutorial/intro Install Unistyles, Reanimated, and required native modules. ```bash yarn add react-native-reanimated react-native-unistyles react-native-nitro-modules ``` -------------------------------- ### Scaffold and Install Dependencies Source: https://www.unistyl.es/llms-full.txt Commands to initialize a new Expo project and install the necessary libraries for Unistyles and Reanimated. ```bash npx create-expo-app@latest unistyles-tutorial cd unistyles-tutorial ``` ```bash yarn add react-native-reanimated react-native-unistyles react-native-nitro-modules ``` ```bash yarn expo prebuild --clean ``` -------------------------------- ### Install StanJS and MMKV Source: https://www.unistyl.es/v3/tutorial/cross-platform Install the required dependencies for state management and data persistence. ```bash yarn add stan-js react-native-mmkv ``` -------------------------------- ### Run Expo prebuild Source: https://www.unistyl.es/v3/start/getting-started Command to clean and prebuild the Expo project after installation. ```bash yarn expo prebuild --clean ``` -------------------------------- ### Install Unistyles dependencies Source: https://www.unistyl.es/v3/start/getting-started Install the core Unistyles package and the required native modules. ```bash yarn add react-native-unistyles react-native-nitro-modules ``` -------------------------------- ### Platform-specific installation commands Source: https://www.unistyl.es/llms-full.txt Commands to finalize installation for Expo and React Native projects. ```shell yarn expo prebuild --clean ``` ```shell cd ios && pod install ``` -------------------------------- ### Create dynamic StyleSheet Source: https://unistyl.es/llms-small.txt Example of creating a stylesheet with themes, runtime values, and variants. ```tsx import { StyleSheet } from 'react-native-unistyles' const styles = StyleSheet.create((theme, rt) => ({ container: { backgroundColor: theme.colors.background, variants: { size: { small: { width: 100, height: 100 }, medium: { width: 200, height: 200 }, large: { width: 300, height: 300 } }, isPrimary: { true: { color: theme.colors.primary }, default: { color: theme.colors.secondary }, special: { color: theme.colors.special } } } }, text: { fontSize: rt.fontScale * 20, color: { sm: theme.colors.text, md: theme.colors.textSecondary } } })) ``` -------------------------------- ### Install iOS pods Source: https://www.unistyl.es/v3/start/getting-started Install native iOS dependencies for projects using React Native. ```bash cd ios && pod install ``` -------------------------------- ### Subscribe to theme and insets Source: https://www.unistyl.es/llms-full.txt Example of subscribing to both theme changes and specific runtime insets. ```tsx // subscribes to theme changes const { theme, rt } = useUnistyles() rt.insets // reading this value will automatically subscribe to insets changes ``` -------------------------------- ### Set initial theme Source: https://unistyl.es/llms-small.txt Define the starting theme using a static string or a synchronous function for dynamic resolution. ```tsx StyleSheet.configure({ settings: { initialTheme: 'premium' } }) ``` ```tsx StyleSheet.configure({ settings: { initialTheme: () => { // get preferred theme from user's preferences/MMKV/SQL/StanJS etc. return storage.getString('preferredTheme') ?? 'light' } } }) ``` -------------------------------- ### Define StyleSheet for Web Source: https://unistyl.es/llms-small.txt Example of defining styles using StyleSheet.create for the Unistyles web parser. ```ts const styles = StyleSheet.create({ container: { flex: 1, fontSize: 32, }, text: { fontSize: { xs: 28, lg: 40 }, }, parentContainer: { flex: 1, } }) ``` -------------------------------- ### Configure Babel Plugin in babel.config.js Source: https://www.unistyl.es/v3/other/babel-plugin Example of applying various Unistyles plugin options within a standard babel.config.js file. ```javascript /** @type {import('react-native-unistyles/plugin').UnistylesPluginOptions} */const unistylesPluginOptions = { // any component in this folder will be processed root: 'src', // also files with these imports will be processed (in any non-root folder) autoProcessImports: ['@react-native-ui-kit', '@codemask/styles'], // additionally process components from this `node_modules` package autoProcessPaths: ['external-library/components'], // log what you've found debug: true,} module.exports = function (api) { api.cache(true) return { // other config plugins: [ ['react-native-unistyles/plugin', unistylesPluginOptions] // other plugins ] }} ``` -------------------------------- ### Subscription patterns with useUnistyles Source: https://www.unistyl.es/v3/references/use-unistyles Examples showing how destructuring and property access trigger subscriptions to theme or runtime changes. ```typescript // subscribes to theme changes, rt is not yet usedconst { theme, rt } = useUnistyles() ``` ```typescript // subscribes to theme changesconst { theme, rt } = useUnistyles() rt.insets // reading this value will automatically subscribe to insets changes ``` -------------------------------- ### Importing React Native internals Source: https://unistyl.es/llms-small.txt Example of internal React Native component imports supported by Unistyles. ```js import { NativeText } from "react-native/Libraries/Text/TextNativeComponent" import View from "react-native/Libraries/Components/View/ViewNativeComponent" ``` ```js import { NativeText } from "react-native/Libraries/Text/TextNativeComponent" import View from "react-native/Libraries/Components/View/ViewNativeComponent" ``` -------------------------------- ### Define base variants in StyleSheet Source: https://www.unistyl.es/v3/references/compound-variants Initial setup of a component with standard size, weight, and color variants. ```javascript const styles = StyleSheet.create(theme => ({ baseText: { fontFamily: theme.fonts.base, fontWeight: 'normal' }, themedText: { variants: { size: { small: { fontSize: 12 }, medium: { fontSize: 16 }, large: { fontSize: 20 } }, isBold: { true: { fontWeight: 'bold' } }, color: { primary: { color: theme.colors.primary }, secondary: { color: theme.colors.secondary }, link: { color: theme.colors.link } } } }} ``` -------------------------------- ### Modify App Entry Point Source: https://www.unistyl.es/llms-full.txt Updates to package.json and creation of an index.ts file to ensure Unistyles is configured before the application starts. ```diff { -"main": "expo-router/entry" +"main": "index.ts" } ``` ```typescript import 'expo-router/entry' import './unistyles' ``` -------------------------------- ### Detecting StyleSheet dependencies Source: https://unistyl.es/llms-small.txt Examples of how the Babel plugin tracks dependencies within StyleSheet.create to optimize updates. ```ts // Babel: depends on theme const stylesheet = StyleSheet.create(theme => ({ container: { // Babel: depends on theme backgroundColor: theme.colors.background }, text: { // Babel: static (no dependencies) fontSize: 12 } })) ``` ```ts // Babel: depends on theme and miniRuntime const stylesheet = StyleSheet.create((theme, rt) => ({ container: { // Babel: depends on theme and insets paddingTop: rt.insets.top, paddingBottom: rt.insets.bottom, backgroundColor: theme.colors.background }, text: (fontSize: number) => ({ // Babel: depends on theme color: theme.colors.text, // Babel: depends on fontScale fontSize: rt.fontScale >= 3 ? fontSize * 1.5 : fontSize * 0.8 }) })) ``` -------------------------------- ### Detecting complex StyleSheet dependencies Source: https://www.unistyl.es/v3/other/babel-plugin Example showing dependency tracking for both theme and miniRuntime objects, including conditional logic. ```javascript // Babel: depends on theme and miniRuntimeconst stylesheet = StyleSheet.create((theme, rt) => ({ container: { // Babel: depends on theme and insets paddingTop: rt.insets.top, paddingBottom: rt.insets.bottom, backgroundColor: theme.colors.background }, text: (fontSize: number) => ({ // Babel: depends on theme color: theme.colors.text, // Babel: depends on fontScale fontSize: rt.fontScale >= 3 ? fontSize * 1.5 : fontSize * 0.8 })})) ``` -------------------------------- ### Configure initial theme settings Source: https://www.unistyl.es/v3/guides/theming Set the initial theme using a static string or a synchronous function to resolve the theme at runtime. ```javascript StyleSheet.configure({ settings: { initialTheme: 'premium' }}) ``` ```javascript StyleSheet.configure({ settings: { initialTheme: () => { // get preferred theme from user's preferences/MMKV/SQL/StanJS etc. return storage.getString('preferredTheme') ?? 'light' } }}) ``` -------------------------------- ### Basic Media Query Usage Source: https://www.unistyl.es/v3/references/media-queries Demonstrates how to import the mq utility and apply width-based media queries within a StyleSheet. ```javascript import { Stylesheet, mq } from 'react-native-unistyles' const styles = Stylesheet.create(theme => ({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' backgroundColor: theme.colors.background, backgroundColor: { [mq.only.width(240, 380)]: theme.colors.background, [mq.only.width(380)]: theme.colors.barbie } }})) ``` -------------------------------- ### Initialize Unistyles Configuration Source: https://unistyl.es/llms-small.txt Apply the configuration by passing themes, breakpoints, and settings to the StyleSheet.configure function. ```tsx import { StyleSheet } from 'react-native-unistyles' StyleSheet.configure({ themes: appThemes, breakpoints, settings }) ``` -------------------------------- ### Incomplete variant definition example Source: https://www.unistyl.es/llms-full.txt Example of an incomplete variant definition that leads to TypeScript type errors. ```tsx const styles = StyleSheet.create(theme => ({ container: { flex: 1, variants: { size: { small: { width: 100, height: 100 }, medium: { width: 200, height: 200 }, large: { width: 300, height: 300 } } } }, text: { fontWeight: 'bold', variants: { size: { small: { fontSize: 12 }, // missing medium and large variants! } } } }) ``` -------------------------------- ### Apply Configuration Source: https://www.unistyl.es/llms-full.txt Initialize the library by passing the defined themes, breakpoints, and settings to StyleSheet.configure. This must be called before any StyleSheet.create invocations. ```typescript import { StyleSheet } from 'react-native-unistyles' StyleSheet.configure({ themes: appThemes, breakpoints, settings }) ``` -------------------------------- ### Basic Media Query Usage Source: https://www.unistyl.es/llms-full.txt Import the mq utility and define styles using an object where keys are media query ranges. ```diff import { Stylesheet, mq } from 'react-native-unistyles' const styles = Stylesheet.create(theme => ({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' backgroundColor: theme.colors.background, backgroundColor: { +[mq.only.width(240, 380)]: theme.colors.background, +[mq.only.width(380)]: theme.colors.barbie +} } })) ``` -------------------------------- ### Parsed StyleSheet output Source: https://unistyl.es/llms-small.txt Example of the parsed output structure for a dynamic stylesheet. ```ts { container: { backgroundColor: '#000', width: 200, height: 200, color: '#ff33aa' }, text: { fontSize: 32, color: 'gold' } } ``` -------------------------------- ### Scaffold a new Expo project Source: https://www.unistyl.es/v3/tutorial/intro Initialize a new Expo project using the latest template. ```bash npx create-expo-app@latest unistyles-tutorialcd unistyles-tutorial ``` -------------------------------- ### Configure Unistyles Source: https://www.unistyl.es/v3/start/configuration Initializes the library with themes, breakpoints, and settings. Must be called before any StyleSheet.create invocations. ```typescript import { StyleSheet } from 'react-native-unistyles' StyleSheet.configure({ themes: appThemes, breakpoints, settings}) ``` -------------------------------- ### Subscribe to theme changes Source: https://www.unistyl.es/llms-full.txt Example of subscribing to theme changes only by destructuring the theme property. ```tsx // subscribes to theme changes, rt is not yet used const { theme, rt } = useUnistyles() ``` -------------------------------- ### Initialize Mini Runtime Source: https://www.unistyl.es/v3/references/mini-runtime Initializes the Mini Runtime environment. ```javascript window.va=window.va||function(){(window.vaq=window.vaq||[]).push(arguments)}; ``` -------------------------------- ### Get registered breakpoints Source: https://www.unistyl.es/llms-full.txt Retrieves the full object of registered breakpoints defined in the configuration. ```tsx import { UnistylesRuntime } from 'react-native-unistyles' // check the registered breakpoints export const RegisteredBreakpoints = () => ( My registered breakpoint are {JSON.stringify(UnistylesRuntime.breakpoints)} ) ``` -------------------------------- ### Get registered breakpoints Source: https://www.unistyl.es/v3/references/breakpoints Retrieve the full object of registered breakpoints using UnistylesRuntime. ```javascript import { UnistylesRuntime } from 'react-native-unistyles' // check the registered breakpointsexport const RegisteredBreakpoints = () => ( My registered breakpoint are {JSON.stringify(UnistylesRuntime.breakpoints)} ) ``` -------------------------------- ### Configure Custom HTML Root for Web Source: https://www.unistyl.es/v3/tutorial/cross-platform Create a custom HTML root file to initialize Unistyles during static rendering in Node.js environments. ```typescript import { ScrollViewStyleReset } from 'expo-router/html'import { type PropsWithChildren } from 'react'import '../unistyles' // This file is web-only and used to configure the root HTML for every// web page during static rendering.// The contents of this function only run in Node.js environments and// do not have access to the DOM or browser APIs.export default function Root({ children }: PropsWithChildren) { return ( {/* Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. */} {/* Add any additional elements that you want globally available on web... */} {children} );} ``` -------------------------------- ### Register themes with StyleSheet.configure Source: https://unistyl.es/llms-small.txt Initialize themes by passing them to the StyleSheet.configure method. ```tsx import { StyleSheet } from 'react-native-unistyles' import { myTheme } from './themes' StyleSheet.configure({ themes: { name: myTheme, // you can add more themes here } }) ``` -------------------------------- ### Get current theme name Source: https://unistyl.es/llms-small.txt Use UnistylesRuntime to access the name of the currently active theme. ```tsx import { UnistylesRuntime } from 'react-native-unistyles' // access the current theme name in your component export const UserTheme = () => ( Selected theme is {UnistylesRuntime.themeName} ) ``` -------------------------------- ### Configure Unistyles Settings Source: https://unistyl.es/llms-small.txt Replace UnistylesRegistry with StyleSheet.configure to define themes, breakpoints, and settings. ```diff -import { UnistylesRegistry } from 'react-native-unistyles' +import { StyleSheet } from 'react-native-unistyles' - UnistylesRegistry.addConfig({ - adaptiveThemes: false, - initialTheme: 'dark', - plugins: [...], - experimentalCSSMediaQueries: true, - windowResizeDebounceTimeMs: 100, - disableAnimatedInsets: true - }) + StyleSheet.configure({ + settings: { + adaptiveThemes: false, // works exactly the same like in 2.0 + initialTheme: 'dark', // works exactly the same like in 2.0 // plugins are removed, instead transform your styles with static functions // experimentalCSSMediaQueries: these options is also removed, and enabled by default with custom parser // windowResizeDebounceTimeMs: removed, there is no debouncing anymore. Styles are updated with CSS media queries // disableAnimatedInsets: removed, insets won't re-render your views + } + }) ``` -------------------------------- ### Define Base Typography Variants Source: https://www.unistyl.es/llms-full.txt Initial setup of a component with size, weight, and color variants. ```tsx const styles = StyleSheet.create(theme => ({ baseText: { fontFamily: theme.fonts.base, fontWeight: 'normal' }, themedText: { variants: { size: { small: { fontSize: 12 }, medium: { fontSize: 16 }, large: { fontSize: 20 } }, isBold: { true: { fontWeight: 'bold' } }, color: { primary: { color: theme.colors.primary }, secondary: { color: theme.colors.secondary }, link: { color: theme.colors.link } } } } } ``` -------------------------------- ### Repurpose HomeScreen to PlaylistScreen Source: https://www.unistyl.es/v3/tutorial/new-screens Initial setup for the PlaylistScreen by wrapping content in a ScrollView and renaming the component. ```typescript import { ScrollView } from 'react-native';import { ThemedText } from '@/components/ThemedText'import { ThemedView } from '@/components/ThemedView'import { StyleSheet } from 'react-native-unistyles' export default function PlaylistScreen() { export default function HomeScreen() { return ( Home Screen );} const styles = StyleSheet.create(theme => ({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }})); ``` -------------------------------- ### Set Initial Theme Synchronously Source: https://unistyl.es/llms-small.txt Configure the initial theme using a synchronous storage lookup. ```tsx import { StyleSheet } from 'react-native-unistyles' StyleSheet.configure({ themes, breakpoints, settings: { initialTheme: () => { // get preferred theme from user's preferences/MMKV/SQL/StanJS etc. // must be synchronous return storage.getString('preferredTheme') ?? 'light' } } }) ``` -------------------------------- ### Create Application Entry Point Source: https://www.unistyl.es/v3/tutorial/intro Create an index.ts file to load the Expo Router entry point and the Unistyles configuration. ```typescript import 'expo-router/entry'import './unistyles' ``` -------------------------------- ### Define Settings Source: https://www.unistyl.es/llms-full.txt Configure library behavior such as initial themes or adaptive themes. Note that initialTheme and adaptiveThemes are mutually exclusive. ```typescript const settings = { initialTheme: 'light' } // or with a synchronous function const settings = { initialTheme: () => { // get preferred theme from user's preferences/MMKV/SQL/StanJS etc. return storage.getString('preferredTheme') ?? 'light' } } // or with adaptive themes const settings = { adaptiveThemes: true } ``` -------------------------------- ### Stateless Variant Scoping Source: https://unistyl.es/llms-small.txt Examples of using useVariants to create scoped style states and inspecting them with console.log. ```tsx styles.useVariants({ size: 'small' }) ``` ```tsx const _styles = styles { const styles = _styles.useVariants({ size: 'small' }) // Your code here } ``` ```tsx // Styles without variants console.log(styles.container) styles.useVariants({ size: 'small' }) // Styles with variants: small console.log(styles.container) styles.useVariants({ size: 'large' }) // Styles with variants: large console.log(styles.container) ``` -------------------------------- ### Implement Theme Settings Screen Source: https://www.unistyl.es/v3/tutorial/modals Uses useUnistyles for reactive theme state management and UnistylesRuntime for adaptive theme control. ```typescript import { SettingOptionRadio } from '@/components/SettingOptionRadio'import { ThemeColor } from '@/components/ThemeColor'import React from 'react'import { ScrollView, View } from 'react-native' import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles' import { StyleSheet } from 'react-native-unistyles' export default function SettingsThemeScreen() { const { rt } = useUnistyles() return ( { if (rt.hasAdaptiveThemes) { return } UnistylesRuntime.setAdaptiveThemes(true) }} isSelected={false} onPress={() => {}} /> { if (rt.hasAdaptiveThemes) { UnistylesRuntime.setAdaptiveThemes(false) } }} isSelected={false} onPress={() => {}} /> {!rt.hasAdaptiveThemes && ( UnistylesRuntime.setTheme('light')} onPress={() => {}} /> UnistylesRuntime.setTheme('dark')} onPress={() => {}} /> )} )} ``` -------------------------------- ### Apply Basic Media Queries Source: https://unistyl.es/llms-small.txt Use the mq utility to define width-based style overrides within a StyleSheet. ```diff import { Stylesheet, mq } from 'react-native-unistyles' const styles = Stylesheet.create(theme => ({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' backgroundColor: theme.colors.background, backgroundColor: { +[mq.only.width(240, 380)]: theme.colors.background, +[mq.only.width(380)]: theme.colors.barbie } } })) ``` -------------------------------- ### Identify dynamic mapping limitations Source: https://unistyl.es/llms-small.txt Examples where standard mappings fail because they cannot access component-level state or props. ```tsx import { withUnistyles } from 'react-native-unistyles' import { FlashList } from 'react-native-flash-list' const MyFlashList = withUnistyles(FlashList, (theme, rt) => ({ numColumns: 💥 Oops! getNumColumns function is not available here })) const MyComponent = () => { const getNumColumns = () => { // your logic } return ( ) } ``` ```tsx import { Switch } from 'react-native' import { withUnistyles } from 'react-native-unistyles' const MySwitch = withUnistyles(Switch, (theme, rt) => ({ trackColor: 💥 Opps! isDisabled prop is not available here })) const MyComponent = ({ isDisabled }) => { return ( ) } ``` -------------------------------- ### ScopedTheme component usage Source: https://unistyl.es/llms-small.txt Example of a ScopedTheme component where child component changes do not trigger parent re-renders. ```tsx {/* Changes in this file won't trigger ScopedTheme to update */} ``` -------------------------------- ### Create the Main Settings Screen Source: https://www.unistyl.es/v3/tutorial/new-screens Implements the primary settings hub using a ScrollView and Unistyles for layout management. ```typescript import { ThemedText } from '@/components/ThemedText'import { ScrollView } from 'react-native'import { StyleSheet } from 'react-native-unistyles' export default function SettingsScreen() { return ( Settings );} const styles = StyleSheet.create((theme, rt) => ({ container: { flex: 1, marginTop: rt.insets.top, paddingHorizontal: theme.gap(2) },})); ``` -------------------------------- ### Remap React Native internal imports Source: https://www.unistyl.es/llms-full.txt Examples of internal React Native component imports that Unistyles can remap. ```js import { NativeText } from "react-native/Libraries/Text/TextNativeComponent" import View from "react-native/Libraries/Components/View/ViewNativeComponent" ``` -------------------------------- ### Theme to CSS Variable Conversion Source: https://www.unistyl.es/v3/references/web-only Example showing the transformation of a JavaScript theme object into CSS root variables. ```javascript const darkTheme = { colors: { primary: '#4b7594' }, gap: (v: number) => v * 8, fontSize: 16} ``` ```css :root.dark { --colors-primary: #4b7594;} ``` -------------------------------- ### Configure Unistyles Settings Source: https://www.unistyl.es/v3/start/configuration Settings control library behavior like adaptive themes and initial theme selection. Note that adaptiveThemes and initialTheme are mutually exclusive. ```typescript const settings = { initialTheme: 'light'} // or with a synchronous functionconst settings = { initialTheme: () => { // get preferred theme from user's preferences/MMKV/SQL/StanJS etc. return storage.getString('preferredTheme') ?? 'light' }} // or with adaptive themesconst settings = { adaptiveThemes: true} ``` -------------------------------- ### Create index.ts entry file Source: https://www.unistyl.es/v3/guides/expo-router Initialize Unistyles before other components by importing it in the custom entry file. ```typescript import 'expo-router/entry'import './unistyles' // <-- file that initializes Unistyles ``` -------------------------------- ### ScopedTheme component structure Source: https://www.unistyl.es/v3/references/scoped-theme Example of a ScopedTheme implementation where child component changes do not trigger parent re-renders during HMR. ```jsx {/* Changes in this file won't trigger ScopedTheme to update */} ``` -------------------------------- ### Detecting StyleSheet dependencies with theme Source: https://www.unistyl.es/v3/other/babel-plugin Example of a StyleSheet definition where the Babel plugin tracks dependencies on the theme object. ```javascript // Babel: depends on themeconst stylesheet = StyleSheet.create(theme => ({ container: { // Babel: depends on theme backgroundColor: theme.colors.background }, text: { // Babel: static (no dependencies) fontSize: 12 }})) ``` -------------------------------- ### Initial ThemedText Implementation Source: https://www.unistyl.es/v3/tutorial/cleanup-components The initial component structure using standard StyleSheet and manual color handling. ```typescript export function ThemedText({ style, lightColor, darkColor, type = 'default', ...rest}: ThemedTextProps) { const color = useThemeColor({ light: lightColor, dark: darkColor }); return ( );} const styles = StyleSheet.create({ default: { fontSize: 16, lineHeight: 24, }, textColor: (lightColor?: string, darkColor?: string) => ({ // todo }), defaultSemiBold: { fontSize: 16, lineHeight: 24, fontWeight: '600', }, title: { fontSize: 32, fontWeight: 'bold', lineHeight: 32, }, subtitle: { fontSize: 20, fontWeight: 'bold', }, link: { lineHeight: 30, fontSize: 16, color: '#0a7ea4', },}); ``` -------------------------------- ### Babel plugin autoProcessImports configuration Source: https://www.unistyl.es/llms-full.txt Whitelists specific imports for the Babel plugin to process, useful for monorepo setups. ```js { autoProcessImports: ['@codemask/styles'] // whenever Babel encounters this import, it will process your file } ``` -------------------------------- ### Create a component with Unistyles Source: https://v2.unistyl.es/start/introduction Demonstrates the basic usage of Unistyles by defining a stylesheet with themes and breakpoints, then consuming it via the useStyles hook. ```typescript import React from 'react' import { View } from 'react-native' import { createStyleSheet, useStyles } from 'react-native-unistyles' export const Demo: React.FunctionComponent = () => { const { styles } = useStyles(stylesheet) return ( ) } const stylesheet = createStyleSheet(theme => ({ // regular RN styles container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, // or with some superpowers 🦄 // ◦ with theme box: { width: 100, height: 100, backgroundColor: theme.colors.primary }, // ◦ with breakpoints rectangle: { width: { xs: 100, md: 200, xl: 400 }, height: { xs: 50, md: 100, xl: 200 }, backgroundColor: theme.colors.secondary }, // ◦ and much much more! // dynamic functions, media queries, variants, runtime values })) ``` -------------------------------- ### Starlight Steps Component Styles Source: https://www.unistyl.es/v3/references/web-styles CSS for rendering ordered steps with custom counters and vertical guide lines. ```css .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}}@layer starlight.content{.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}} ``` -------------------------------- ### StyleSheet.create Source: https://www.unistyl.es/llms-full.txt Creates a stylesheet that supports static styles, theme-aware styles, and dynamic styles using the miniRuntime. ```APIDOC ## StyleSheet.create ### Description Creates a stylesheet object. Supports static definitions, theme-based functions, and functions that accept both theme and miniRuntime (rt) for dynamic calculations. ### Signature `StyleSheet.create(styles: object | (theme) => object | (theme, rt) => object)` ### Parameters - **styles** (object | function) - Required - The style definition object or a function returning a style object. ``` -------------------------------- ### Define StyleSheets with Dependencies Source: https://www.unistyl.es/v3/start/how-unistyles-works Demonstrates how to define a StyleSheet that includes static styles, theme-dependent styles, and dynamic function-based styles. ```javascript const styles = StyleSheet.create((theme, rt) => ({ // static: no dependencies container: { backgroundColor: 'red', }, // depends on theme and font scale text: { color: theme.colors.text, fontSize: rt.fontScale * 16 }, dynamic: (isOdd: boolean) => ({ // depends on theme color: isOdd ? theme.colors.primary : theme.colors.secondary, })}) ``` -------------------------------- ### Define base variants in Unistyles Source: https://unistyl.es/llms-small.txt Initial setup of a Typography component using standard variants for size, weight, and color. ```tsx const styles = StyleSheet.create(theme => ({ baseText: { fontFamily: theme.fonts.base, fontWeight: 'normal' }, themedText: { variants: { size: { small: { fontSize: 12 }, medium: { fontSize: 16 }, large: { fontSize: 20 } }, isBold: { true: { fontWeight: 'bold' } }, color: { primary: { color: theme.colors.primary }, secondary: { color: theme.colors.secondary }, link: { color: theme.colors.link } } } } })) ```