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

package/plugin/stylesheet.js

@@ -14,7 +14,21 @@ const UnistyleDependency = {
     PixelRatio: 10,
     FontScale: 11,
     StatusBar: 12,
-    NavigationBar: 13
+    NavigationBar: 13,
+    Ime: 14
+}
+
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
 }
 
 function isUnistylesStyleSheet(t, path, state) {
@@ -28,6 +42,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -80,7 +101,8 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
-                        case 'orientation': {
+                        case 'isPortrait':
+                        case 'isLandscape': {
                             dependencies.push(UnistyleDependency.Orientation)
 
                             return
@@ -90,6 +112,11 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
 
                             return
                         }
+                        case 'ime': {
+                            dependencies.push(UnistyleDependency.Ime)
+
+                            return
+                        }
                         case 'insets': {
                             dependencies.push(UnistyleDependency.Insets)
 
@@ -141,7 +168,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/components/Display.tsx

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react'
+import { useMedia } from './useMedia'
+
+type DisplayProps = { mq: symbol } & PropsWithChildren
+
+export const Display: React.FunctionComponent<DisplayProps> = ({ children, ...props }) => {
+    const { isVisible } = useMedia(props)
+
+    return isVisible
+        ? children
+        : null
+}

package/src/components/Hide.tsx

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react'
+import { useMedia } from './useMedia'
+
+type HideProps = { mq: symbol } & PropsWithChildren
+
+export const Hide: React.FunctionComponent<HideProps> = ({ children, ...props }) => {
+    const { isVisible } = useMedia(props)
+
+    return !isVisible
+        ? children
+        : null
+}

package/src/components/index.ts

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

package/src/components/useMedia.ts

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+import { isValidMq, parseMq, isUnistylesMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const computeIsVisible = (): boolean => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { width, height } = UnistylesRuntime.screen
+
+        if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
+            return false
+        }
+
+        if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
+            return false
+        }
+
+        if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
+            return false
+        }
+
+        if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
+            return false
+        }
+
+        return true
+    }
+    const [isVisible, setIsVisible] = useState<boolean | null>(computeIsVisible())
+
+    useEffect(() => {
+        setIsVisible(computeIsVisible())
+    }, [config.mq])
+
+    useLayoutEffect(() => {
+        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setIsVisible(computeIsVisible())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [config.mq])
+
+    return {
+        isVisible
+    }
+}

package/src/components/useMedia.web.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const disposeRef = useRef(() => {})
+    const [isVisible, setIsVisible] = useState(() => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { minWidth, maxWidth, minHeight, maxHeight } = parsedMq
+
+        const mediaQuery = [
+            minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
+            maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
+            minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
+        ].filter(Boolean).join(' and ')
+
+        const media = window.matchMedia(mediaQuery)
+        const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
+
+        media.addEventListener('change', handler)
+        disposeRef.current = () => media.removeEventListener('change', handler)
+
+        return media.matches
+    })
+
+    // Unmount
+    useEffect(() => () => disposeRef.current(), [])
+
+    return {
+        isVisible
+    }
+}

package/src/core/createUnistylesComponent.native.tsx

@@ -0,0 +1,83 @@
+import React, { type ComponentType, forwardRef, useEffect, useRef, useState } from 'react'
+import type { UnistylesTheme } from '../types'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+import type { PartialBy } from '../types/common'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
+        const [, setRt] = useState(0)
+        const stylesRef = useRef<Record<string, any>>({})
+        const isForcedRef = useRef(false)
+
+        if (!isForcedRef.current) {
+            SUPPORTED_STYLE_PROPS.forEach(propName => {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent requires ${propName} to be an object. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    // @ts-expect-error - this is hidden from TS
+                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    stylesRef.current = {
+                        ...stylesRef.current,
+                        [propName]: narrowedProps[propName]
+                    }
+                }
+            })
+        }
+
+        useEffect(() => {
+            const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+                const componentDependencies = (narrowedProps.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
+
+                if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
+                    setTheme(UnistylesRuntime.getTheme())
+
+                    // override with Unistyles styles
+                    SUPPORTED_STYLE_PROPS.forEach(propName => {
+                        if (narrowedProps?.[propName]) {
+                            stylesRef.current = {
+                                ...stylesRef.current,
+                                // @ts-expect-error - this is hidden from TS
+                                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+                            }
+                        }
+                    })
+
+                    isForcedRef.current = true
+                }
+
+                if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+                    setRt(prevState => prevState + 1)
+                }
+            })
+
+            return () => {
+                removeChangeListener()
+            }
+        }, [])
+
+        const mergedProps = mappings?.(theme) as Record<string, any> ?? {}
+        const finalProps = deepMergeObjects(mergedProps, props)
+
+        // override with Unistyles styles
+        SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
+            }
+        })
+
+        isForcedRef.current = false
+
+        return <Component {...finalProps as TProps} ref={ref} />
+    })
+}

package/src/core/createUnistylesComponent.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo } from 'react'
+import type { UnistylesTheme } from '../types'
+import { UnistylesRuntime } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import type { PartialBy } from '../types/common'
+import { UnistylesListener } from '../web/listener'
+import { UnistylesShadowRegistry } from '../web'
+import { equal } from '../web/utils'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
+
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+const useShadowRegistry = (style?: Record<string, any>) => {
+    const [ref] = useState(document.createElement('div'))
+    const oldClassNames = useRef<Array<string>>([])
+    const classNames = useMemo(() => {
+        if (!style) {
+            return []
+        }
+
+        const newClassNames = UnistylesShadowRegistry.add(ref, [style], undefined, []) ?? []
+
+        if (equal(oldClassNames.current, newClassNames)) {
+            return oldClassNames.current
+        }
+
+        oldClassNames.current = newClassNames
+
+        return newClassNames
+    }, [style])
+
+    useEffect(() => () => {
+        // Remove styles on unmount
+        if (style) {
+            UnistylesShadowRegistry.add(null, [style], undefined, [])
+        }
+    })
+
+    return classNames
+}
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
+
+        useEffect(() => {
+            const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
+                if (!mappings) {
+                    disposeMappings()
+
+                    return
+                }
+
+                return setMappingsProps(mappings(UnistylesRuntime.getTheme()))
+            })
+
+            return () => disposeMappings()
+        }, [mappingsProps, narrowedProps.style])
+
+        const combinedProps = {
+            ...deepMergeObjects(props, (mappingsProps ?? {}) as object),
+            ...narrowedProps.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as unknown as TProps
+
+        return <Component {...combinedProps} ref={ref} />
+    })
+}

package/src/core/index.ts

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

package/src/index.ts

@@ -1,15 +1,6 @@
-import React from 'react'
-
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-
-// todo verify true min version
-const minReactVersionRequiredByUnistyles = '18.3.1'
-
-if (React.version < minReactVersionRequiredByUnistyles) {
-    throw new Error(`
-        You are using an outdated version of React (${React.version}).
-        Unistyles requires at least React ${minReactVersionRequiredByUnistyles}.
-    `)
-}
+export { createUnistylesComponent } from './core'
+export type { UnistylesVariants } from './types'
+export * from './components'

package/src/mq.ts

@@ -1,5 +1,10 @@
 import type { Nullable } from './types'
 import type { UnistylesBreakpoints } from './global'
+import { UnistylesRuntime } from './specs'
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
 
 type MQValue = keyof UnistylesBreakpoints | number
 
@@ -29,16 +34,8 @@ const getMQValue = (value: Nullable<MQValue>) => {
         return 0
     }
 
-    // todo take it from js
-    const breakpoints = {
-        xs: 0,
-        sm: 300,
-        md: 500,
-        lg: 800,
-        xl: 1200
-    }
+    const breakpoints = UnistylesRuntime.breakpoints
 
-    // @ts-ignore
     return breakpoints[value] ?? 0
 }
 
@@ -64,3 +61,24 @@ export const mq: MQHandler = {
         }
     })
 }
+
+export const parseMq = (mq: string) => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
+    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+
+    return isWidthValid && isHeightValid
+}

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

@@ -18,7 +18,8 @@ export enum UnistyleDependency {
     PixelRatio = 10,
     FontScale = 11,
     StatusBar = 12,
-    NavigationBar = 13
+    NavigationBar = 13,
+    Ime = 14
 }
 
 export interface UnistylesNativeMiniRuntime {
@@ -31,7 +32,8 @@ export interface UnistylesNativeMiniRuntime {
     readonly rtl: boolean
     readonly statusBar: Dimensions,
     readonly navigationBar: Dimensions
-    readonly orientation: Orientation
+    readonly isPortrait: boolean,
+    readonly isLandscape: boolean
 }
 
 // represents any native API that can communicate with Unistyles
@@ -49,13 +51,13 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
     getPrefersRtlDirection(): boolean,
 
     setRootViewBackgroundColor(color: number): void,
-    setNavigationBarBackgroundColor?(color: number): void,
     setNavigationBarHidden?(isHidden: boolean): void,
     setStatusBarHidden(isHidden: boolean): void,
-    setStatusBarBackgroundColor?(color: number): void,
     setImmersiveMode(isEnabled: boolean): void,
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    unregisterPlatformListeners(): void
 }

package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', andro
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void
 }

package/src/specs/NavigtionBar/index.ts

@@ -1,25 +1 @@
-import { processColor } from 'react-native'
-import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './UnistylesNavigationBar.nitro'
-import type { Color } from '../types'
-
-interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
-}
-
-export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBar) => {
-    const privateHybrid = hybridObject as PrivateUnistylesNavigationBar
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
-}
-
-type PrivateMethods =
-    | '_setBackgroundColor'
-    | 'dispose'
-
-export type UnistylesNavigationBar = Omit<PrivateUnistylesNavigationBar, PrivateMethods>
+export type { UnistylesNavigationBar } from './UnistylesNavigationBar.nitro'

package/src/specs/ShadowRegistry/index.ts

@@ -4,11 +4,11 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): void,
-    remove(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
+    remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>): void,
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -26,20 +26,26 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, styles, variants, args) => {
+    // virtualized nodes can be null
+    if (!handle || !styles || !Array.isArray(styles)) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    // filter Reanimated styles and styles that are undefined
+    const filteredStyles = styles
+        .filter(style => !style?.initial?.updater)
+        .filter(Boolean)
+
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [])
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =

package/src/specs/ShadowRegistry/types.ts

@@ -25,5 +25,8 @@ export type ViewHandle = {
 }
 
 export type Unistyle = {
-    __unid?: number
+    __unid?: number,
+    initial?: {
+        updater?: () => void
+    }
 }

package/src/specs/StatusBar/UnistylesStatusBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++', android:
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void,
 }