react-native-unistyles 3.0.0-alpha.40 → 3.0.0-alpha.42

package/src/components/Pressable.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { getId } from '../core'
+
+type PressableProps = Props & {
+    rawStyle?: Array<any>
+    variants?: Record<string, string | boolean>
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, rawStyle, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>()
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                storedRef.current = ref
+                const styleResult = typeof style === 'function'
+                    ? style({ pressed: false })
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : []
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+
+                const returnFn = typeof passedRef === 'function'
+                    ? passedRef(ref)
+                    : () => {}
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, rawStyle ?? [], variants, [fnArgs])
+
+                return () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+
+                    if (typeof returnFn === 'function') {
+                        returnFn()
+                    }
+                }
+            }}
+            style={state => {
+                const styleResult = typeof style === 'function'
+                    ? style(state)
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : []
+                const pressId = getId()
+
+                if (storedRef.current) {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.add(storedRef.current, rawStyle ?? [], variants, [fnArgs], pressId)
+                }
+
+                return typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult(pressId)
+                    : styleResult
+            }}
+        />
+    )
+})

package/src/components/Pressable.web.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, useEffect, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+
+type WebPressableState = {
+    pressed: boolean,
+    hovered: boolean,
+    focused: boolean
+}
+
+type PressableProps = Props & {
+    variants?: Record<string, string | boolean>
+    style?: ((state: WebPressableState) => ViewStyle) | ViewStyle,
+}
+
+const initialState: WebPressableState = {
+    pressed: false,
+    hovered: false,
+    focused: false
+}
+
+const events = {
+    'pointerdown': { pressed: true },
+    'pointerup': { pressed: false },
+    'pointerenter': { hovered: true },
+    'pointerleave': { hovered: false },
+    'focus': { focused: true },
+    'blur': { focused: false }
+} satisfies Partial<Record<keyof HTMLElementEventMap, Partial<WebPressableState>>>
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>()
+    const state = useRef<WebPressableState>(initialState)
+    const styleRef = useRef(style)
+
+    useEffect(() => {
+        styleRef.current = style
+    }, [style])
+
+    useEffect(() => {
+        const handler = (newState: Partial<WebPressableState>) => () => {
+            state.current = { ...state.current, ...newState }
+
+            const styleResult = typeof styleRef.current === 'function'
+                ? styleRef.current(state.current)
+                : styleRef.current
+            const fnArgs = typeof styleResult === 'function'
+                // @ts-expect-error - this is hidden from TS
+                ? styleResult.getBoundArgs()
+                : []
+            const extractedResult = typeof styleResult === 'function'
+                ? (styleResult as Function)()
+                : styleResult
+
+            // @ts-expect-error - this is hidden from TS
+            UnistylesShadowRegistry.add(storedRef.current, [extractedResult], variants, [fnArgs])
+        }
+
+        if (!storedRef.current) {
+            return
+        }
+
+        // ref on the web is dom element
+        const ref = storedRef.current as unknown as HTMLDivElement
+
+        Object.entries(events).forEach(([event, state]) => {
+            ref.addEventListener(event, handler(state))
+        })
+
+        return () => {
+            Object.entries(events).forEach(([event, state]) => {
+                ref.removeEventListener(event, handler(state))
+            })
+        }
+    }, [])
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                storedRef.current = ref
+                const styleResult = typeof style === 'function'
+                    ? style(initialState)
+                    : style
+                const fnArgs = typeof styleResult === 'function'
+                    // @ts-expect-error - this is hidden from TS
+                    ? styleResult.getBoundArgs()
+                    : []
+                const extractedResult = typeof styleResult === 'function'
+                    ? (styleResult as Function)()
+                    : styleResult
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.add(ref, [extractedResult], variants, [fnArgs])
+            }}
+        />
+    )
+})

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { Hide } from './Hide'
 export { Display } from './Display'
+export { Pressable } from './Pressable'

package/src/core/getBoundArgs.ts

@@ -0,0 +1,15 @@
+export const getBoundArgs = (fn: Function) => {
+    const boundArgs = [] as Array<any>
+
+    fn.bind = (thisArg, ...args) => {
+        boundArgs.push(...args)
+
+        const newFn = Function.prototype.bind.apply(fn, [thisArg, ...args])
+
+        newFn.getBoundArgs = () => boundArgs
+
+        return newFn
+    }
+
+    return fn
+}

package/src/core/getId.ts

@@ -0,0 +1 @@
+export const getId = () => `${Math.random().toString(36).substring(2, 9)}`

package/src/core/index.ts

@@ -1 +1,3 @@
 export { createUnistylesComponent } from './createUnistylesComponent'
+export { getBoundArgs } from './getBoundArgs'
+export { getId } from './getId'

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useMedia } from './useMedia'

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-export { createUnistylesComponent } from './core'
+export { createUnistylesComponent, getBoundArgs } from './core'
 export type { UnistylesVariants } from './types'
 export * from './components'

package/src/mq.ts

@@ -45,18 +45,18 @@ const getMQValue = (value: Nullable<MQValue>) => {
  */
 export const mq: MQHandler = {
     only: {
-        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
-        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
     },
-    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
+    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
-            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
+            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
                 (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
     }),
-    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
+    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
-            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
+            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
                 (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
     })

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -1,5 +1,5 @@
 import type { HybridObject } from 'react-native-nitro-modules'
-import { type Dimensions, type Insets } from '../types'
+import type { Dimensions, Insets } from '../types'
 
 type ColorScheme = 'dark' | 'light' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'

package/src/specs/ShadowRegistry/index.ts

@@ -4,10 +4,10 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
     remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
+    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
     unlink(node: ShadowNode): void
 }
 
@@ -19,14 +19,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
 
     if (!node) {
-        // todo extend log with file name / component name
-        throw new Error('Could not find shadow node for one of your components')
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
     }
 
     return node
 }
 
-HybridShadowRegistry.add = (handle, styles, variants, args) => {
+HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
     // virtualized nodes can be null
     if (!handle || !styles || !Array.isArray(styles)) {
         return
@@ -37,7 +36,7 @@ HybridShadowRegistry.add = (handle, styles, variants, args) => {
         .filter(style => !style?.initial?.updater)
         .filter(Boolean)
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [])
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [], id)
 }
 
 HybridShadowRegistry.remove = handle => {

package/src/specs/ShadowRegistry/types.ts

@@ -8,7 +8,8 @@ export type ShadowNode = {
 
 export type ViewHandle = {
     __internalInstanceHandle?: {
-        stateNode?: StateNode
+        stateNode?: StateNode,
+        elementType?: string
     },
     getScrollResponder?: () => {
         getNativeScrollRef?: () => ({

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.ts

@@ -1,5 +1,5 @@
 import type { HybridObject } from 'react-native-nitro-modules'
-import { UnistyleDependency } from '../NativePlatform'
+import type { UnistyleDependency } from '../NativePlatform'
 
 export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++', android: 'c++' }> {
     readonly hairlineWidth: number

package/src/specs/StyleSheet/index.ts

@@ -6,8 +6,9 @@ import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 
 type UnistylesSettings = {
-    adaptiveThemes?: boolean,
-    initialTheme?: (() => keyof UnistylesThemes) | keyof UnistylesThemes
+    initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes
+} | {
+    adaptiveThemes: boolean
 }
 
 export type UnistylesConfig = {

package/src/specs/TurboUnistyles/NativeTurboUnistyles.ts

@@ -1,8 +1,7 @@
 import type { TurboModule } from 'react-native'
 import { TurboModuleRegistry } from 'react-native'
 
-// this is empty spec for TurboModule that is required to hook
-// Unistyles to Fabric
+// this is empty spec for TurboModule that is required to hook Unistyles to Fabric
 interface Spec extends TurboModule {}
 
 TurboModuleRegistry.get<Spec>('Unistyles')

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -6,7 +6,7 @@ import type { UnistylesNativeMiniRuntime } from '../NativePlatform'
 type ColorScheme = 'light' | 'dark' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'
 
-// used for Nitro. It's Native + Cxx types
+// used for Nitro. It's (Native + Cxx) type
 export interface UnistylesCxxMiniRuntime extends UnistylesNativeMiniRuntime {
     readonly themeName?: string,
     readonly breakpoint?: string,

package/src/specs/UnistylesRuntime/index.ts

@@ -3,7 +3,7 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } from './UnistylesRuntime.nitro'
 import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
 import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
-import { type UnistylesNavigationBar } from '../NavigtionBar'
+import type { UnistylesNavigationBar } from '../NavigtionBar'
 import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
 import type { UnistylesThemes } from '../../global'

package/src/specs/index.web.ts

@@ -1,5 +1 @@
-import type { ReactElement } from 'react'
-
-export const getSSRUnistyles = () => [] as Array<ReactElement>
-
 export * from '../web'

package/src/types/common.ts

@@ -2,3 +2,4 @@ export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
 export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T
 export type PartialBy<T, K> = Omit<T, K & keyof T> & Partial<Pick<T, K & keyof T>>
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never

package/src/types/index.ts

@@ -1,4 +1,4 @@
-export type { Optional, Nullable } from './common'
+export type { Optional, Nullable, UnionToIntersection } from './common'
 export type {
     NestedStylePairs,
     UnistylesTheme,

package/src/utils.ts

@@ -6,7 +6,7 @@ export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources:
             const sourceValue = source[key]
             const targetValue = target[key]
 
-            if (Object(sourceValue) == sourceValue && Object(targetValue) === targetValue) {
+            if (Object(sourceValue) === sourceValue && Object(targetValue) === targetValue) {
                 // @ts-expect-error - can't assign to generic
                 target[key] = deepMergeObjects(targetValue, sourceValue)
 

package/src/web/convert/types.ts

@@ -1,5 +1,6 @@
 import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
 import type { ToDeepUnistyles } from '../../types/stylesheet'
+import type { UnionToIntersection } from '../../types'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 
@@ -15,7 +16,6 @@ export type AllShadow = TextShadow & BoxShadow
 
 export type AllShadowKeys = keyof AllShadow
 
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never
 type FilterKeys = keyof UnionToIntersection<FilterFunction>
 
 export type Filters = {

package/src/web/convert/utils.ts

@@ -35,8 +35,8 @@ export const normalizeColor = (color: string, opacity = 1) => {
     if (hex.length === 8) {
         const [r = 0, g = 0, b = 0, a = 1] = hex
             .split(/(?=(?:..)*$)/)
-            .map(x => parseInt(x, 16))
-            .filter(num => !isNaN(num))
+            .map(x => Number.parseInt(x, 16))
+            .filter(num => !Number.isNaN(num))
 
         return `rgba(${r},${g},${b},${(a / 255) * opacity})`
     }

package/src/web/create.ts

@@ -1,11 +1,15 @@
 import type { ReactNativeStyleSheet } from '../types'
 import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
-import { assignSecrets, reduceObject, getStyles } from './utils'
+import { assignSecrets, reduceObject, getStyles, error } from './utils'
 import { deepMergeObjects } from '../utils'
 import { UnistylesRuntime } from './runtime'
 import { createUseVariants, getVariants } from './variants'
 
-export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>, id?: string) => {
+    if (!id) {
+        throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.')
+    }
+
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet

package/src/web/index.ts

@@ -12,6 +12,13 @@ export const StyleSheet = {
         right: 0,
         bottom: 0,
     },
+    absoluteFillObject: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+    },
     compose: (a: object, b: object) => deepMergeObjects(a, b),
     flatten: (...styles: Array<object>) => deepMergeObjects(...styles),
     hairlineWidth: 1
@@ -20,6 +27,3 @@ export const StyleSheet = {
 export { UnistylesRuntime } from './runtime'
 export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
-
-// TODO: Work on SSR
-export const getSSRUnistyles = () => []

package/src/web/listener.ts

@@ -17,6 +17,7 @@ class UnistylesListenerBuilder {
         }
 
         this.isInitialized = true
+
         UnistylesRuntime.darkMedia?.addEventListener('change', event => {
             if (!event.matches) {
                 return
@@ -39,6 +40,7 @@ class UnistylesListenerBuilder {
                 this.emitChange(UnistyleDependency.Theme)
             }
         })
+
         window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
         window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
     }

package/src/web/registry.ts

@@ -153,7 +153,7 @@ class UnistylesRegistryBuilder {
                         hash: `${hash}${key.replace('_', ':')}`,
                         key: pseudoKey,
                         value: pseudoValue,
-                        sheet: this.styleTag.sheet!
+                        sheet: this.styleTag.sheet as CSSStyleSheet
                     })
                 })
 

package/src/web/runtime.ts

@@ -5,7 +5,7 @@ import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'
-import { isServer, schemeToTheme } from './utils'
+import { error, isServer, schemeToTheme } from './utils'
 
 class UnistylesRuntimeBuilder {
     lightMedia = this.getLightMedia()
@@ -152,6 +152,10 @@ class UnistylesRuntimeBuilder {
     }
 
     setTheme = (themeName: AppThemeName) => {
+        if (this.hasAdaptiveThemes) {
+            throw error(`You're trying to set theme to: '${themeName}', but adaptiveThemes are enabled.`)
+        }
+
         if (themeName === UnistylesRuntime.themeName) {
             return
         }
@@ -185,21 +189,17 @@ class UnistylesRuntimeBuilder {
         const oldTheme = UnistylesState.themes.get(themeName)
 
         if (!oldTheme) {
-            throw new Error(`🦄 Theme "${themeName}" is not registered!`)
+            throw error(`Unistyles: You're trying to update theme "${themeName}" but it wasn't registered.`)
         }
 
         UnistylesState.themes.set(themeName, updater(oldTheme))
     }
 
     getTheme = (themeName = this.themeName) => {
-        if (!themeName) {
-            throw new Error('🦄 No theme selected!')
-        }
-
-        const theme = UnistylesState.themes.get(themeName)
+        const theme = UnistylesState.themes.get(themeName ?? '')
 
-        if (!theme) {
-            throw new Error(`🦄 Theme "${this.themeName}" is not registered!`)
+        if (!themeName || !theme) {
+            throw error(`You're trying to get theme "${themeName}" but it wasn't registered.`)
         }
 
         return theme

package/src/web/shadowRegistry.ts

@@ -65,7 +65,7 @@ class UnistylesShadowRegistryBuilder {
         const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
             const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
             const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
-            const style = newComputedStylesheet[__uni__key]!
+            const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
             const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
             const args = _args[styleIndex] ? _args[styleIndex] : __uni__args
             const result = typeof style === 'function'
@@ -93,7 +93,7 @@ class UnistylesShadowRegistryBuilder {
                 }
 
                 const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
-                const newValue = newComputedStyleSheet[__uni__key]!
+                const newValue = newComputedStyleSheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
                 const result = typeof newValue === 'function'
                     ? newValue(...args)
                     : newValue

package/src/web/state.ts

@@ -3,9 +3,12 @@ import type { UnistylesConfig } from '../specs/StyleSheet'
 import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { UnistylesRuntime } from './runtime'
-import { isServer, schemeToTheme } from './utils'
+import { error, isServer, schemeToTheme } from './utils'
 import { UnistylesListener } from './listener'
 import { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnionToIntersection } from '../types'
+
+type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 
 class UnistylesStateBuilder {
     themes = new Map<string, UnistylesTheme>()
@@ -28,7 +31,10 @@ class UnistylesStateBuilder {
     init = (config: UnistylesConfig) => {
         this.initThemes(config.themes)
         this.initBreakpoints(config.breakpoints)
-        this.initSettings(config.settings)
+
+        if (config.settings) {
+            this.initSettings(config.settings as UnistylesSettings)
+        }
 
         if (isServer()) {
             return
@@ -43,37 +49,50 @@ class UnistylesStateBuilder {
         })
     }
 
-    private initSettings = (settings: UnistylesConfig['settings']) => {
+    private initSettings = (settings: UnistylesSettings) => {
         this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false
-        const themeNames = Array.from(this.themes.keys()) as Array<AppThemeName>
-
-        // Single theme + no settings
-        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
-            this.themeName = themeNames[0]
 
-            return
-        }
-
-        // No settings
-        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
-            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config')
+        if (settings.initialTheme && settings.adaptiveThemes) {
+            throw error('You\'re trying to set initial theme and enable adaptiveThemes, but these options are mutually exclusive.')
         }
 
         // Adaptive themes
         if (settings.adaptiveThemes) {
+            if (!this.themes.get('light') || !this.themes.get('dark')) {
+                throw error(`You're trying to enable adaptiveThemes, but you didn't register both 'light' and 'dark' themes.`)
+            }
+
             this.themeName = schemeToTheme(UnistylesRuntime.colorScheme) as AppThemeName
 
             return
         }
 
-        // Initial theme
-        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme
+        if (settings.initialTheme) {
+            const initialTheme = typeof settings.initialTheme === 'function'
+                ? settings.initialTheme()
+                : settings.initialTheme
+
+            if (!this.themes.get(initialTheme)) {
+                throw error(`You're trying to select theme "${initialTheme}" but it wasn't registered.`)
+            }
+
+            this.themeName = initialTheme
+        }
     }
 
     private initBreakpoints = (breakpoints = {} as UnistylesBreakpoints) => {
         this.breakpoints = breakpoints
+        const breakpointsEntries = Object.entries(breakpoints)
+
+        if (breakpointsEntries.length === 0) {
+            throw error('StyleSheet.configure\'s breakpoints can\'t be empty.')
+        }
+
+        if (breakpointsEntries?.[0]?.[1] !== 0) {
+            throw error('StyleSheet.configure\'s first breakpoint must start from 0.')
+        }
 
-        Object.entries(breakpoints)
+        breakpointsEntries
             .sort(([, a], [, b]) => a - b)
             .forEach(([breakpoint, value]) => {
                 if (isServer()) {

package/src/web/utils/common.ts

@@ -7,7 +7,7 @@ export const keyInObject = <T extends Record<string, any>>(obj: T, key: Property
 
 export const isServer = () => typeof window === 'undefined'
 
-export const warn = (message: string) => console.warn(`🦄 [react-native-unistyles] ${message}`)
+export const error = (message: string) => new Error(`Unistyles: ${message}`)
 
 export const equal = <T>(a: T, b: T) => {
     if (Object.is(a, b)) {