From 7e3e7d83ff99cb4c3831375b16caade33953a0ad Mon Sep 17 00:00:00 2001
From: Yousef <yousefelgoharyx@gmail.com>
Date: Mon, 11 Nov 2024 23:50:19 +0200
Subject: [PATCH 1/3] Support unistyles provider with no breaking changes

---
 examples/expo/src/App.tsx                     |  1 +
 examples/expo/src/common/navigation.ts        |  4 +-
 examples/expo/src/examples/HomeScreen.tsx     | 17 ++++
 .../examples/TwoThemesWithProviderScreen.tsx  | 60 +++++++++++++
 examples/expo/src/examples/index.ts           |  1 +
 src/context.tsx                               | 90 +++++++++++++++++++
 src/hooks/useUnistyles.ts                     | 16 +++-
 src/index.ts                                  |  5 +-
 8 files changed, 190 insertions(+), 4 deletions(-)
 create mode 100644 examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
 create mode 100644 src/context.tsx

diff --git a/examples/expo/src/App.tsx b/examples/expo/src/App.tsx
index 365574ba..36fc24a9 100644
--- a/examples/expo/src/App.tsx
+++ b/examples/expo/src/App.tsx
@@ -28,6 +28,7 @@ export const App: React.FunctionComponent = () => (
                 <Stack.Screen name={DemoNames.NoThemes} component={Screens.NoThemesScreen} />
                 <Stack.Screen name={DemoNames.SingleTheme} component={Screens.SingleThemeScreen} />
                 <Stack.Screen name={DemoNames.TwoThemes} component={Screens.TwoThemesScreen} />
+                <Stack.Screen name={DemoNames.TwoThemesWithProvider} component={Screens.TwoThemesWithProviderScreen} />
                 <Stack.Screen name={DemoNames.LightDarkThemes} component={Screens.LightDarkThemesScreen} />
                 <Stack.Screen name={DemoNames.MultipleThemes} component={Screens.MultipleThemesScreen} />
                 <Stack.Screen name={DemoNames.MultipleThemesAdaptive} component={Screens.MultipleThemesAdaptiveScreen} />
diff --git a/examples/expo/src/common/navigation.ts b/examples/expo/src/common/navigation.ts
index 4d599533..25a04f5d 100644
--- a/examples/expo/src/common/navigation.ts
+++ b/examples/expo/src/common/navigation.ts
@@ -31,7 +31,8 @@ export enum DemoNames {
     UpdateTheme = 'UpdateThemeScreen',
     AndroidStatusBarNavigationBar = 'AndroidStatusBarNavigationBarScreen',
     Layout = 'LayoutScreen',
-    Keyboard = 'KeyboardScreen'
+    Keyboard = 'KeyboardScreen',
+    TwoThemesWithProvider = 'TwoThemesWithProvider',
 }
 
 export type DemoStackParams = {
@@ -66,6 +67,7 @@ export type DemoStackParams = {
     [DemoNames.AndroidStatusBarNavigationBar]: undefined,
     [DemoNames.Layout]: undefined,
     [DemoNames.Keyboard]: undefined
+    [DemoNames.TwoThemesWithProvider]: undefined,
 }
 
 export type NavigationProps<S extends DemoNames = DemoNames.Home> = NavigationProp<DemoStackParams, S>
diff --git a/examples/expo/src/examples/HomeScreen.tsx b/examples/expo/src/examples/HomeScreen.tsx
index c9079e1d..33d844ec 100644
--- a/examples/expo/src/examples/HomeScreen.tsx
+++ b/examples/expo/src/examples/HomeScreen.tsx
@@ -71,6 +71,23 @@ export const HomeScreen = () => {
                             navigation.navigate(DemoNames.TwoThemes)
                         }}
                     />
+                    <DemoLink
+                        description="Two themes with provider"
+                        onPress={() => {
+                            UnistylesRegistry
+                                .addThemes({
+                                    light: lightTheme,
+                                    premium: premiumTheme
+                                    // we need to cast it to UnistylesThemes as we already registered 3 themes with TypeScript under styles/index.ts,
+                                    // but we want to demonstrate how to register two themes
+                                } as UnistylesThemes)
+                                .addConfig({
+                                    initialTheme: 'light'
+                                })
+
+                            navigation.navigate(DemoNames.TwoThemesWithProvider)
+                        }}
+                    />
                     <DemoLink
                         description="Light/Dark themes"
                         onPress={() => {
diff --git a/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx b/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
new file mode 100644
index 00000000..8110106e
--- /dev/null
+++ b/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { Text, View } from 'react-native'
+import { createStyleSheet, useStyles, UnistylesRuntime, useInitialTheme, UnistylesProvider } from 'react-native-unistyles'
+import { Button, DemoScreen } from '../components'
+
+export const TwoThemesWithProviderScreen: React.FunctionComponent = () => {
+    return (
+        <UnistylesProvider>
+            <TwoThemesWithProviderScreenContent />
+        </UnistylesProvider>
+    )
+}
+const TwoThemesWithProviderScreenContent: React.FunctionComponent = () => {
+    // if you have 2 or more themes, you need to select one of them
+    // keep in mind that everything is synchronous and so fast, that you can set it in the same screen 🔥
+    // two more notes:
+    // call it before useStyles
+    // if you won't do that you will get UNISTYLES_THEME_NOT_FOUND error
+    useInitialTheme('premium')
+
+    // you can also skip useInitialTheme and set the theme during UnistylesRegistry.addConfig({}) call
+
+    const { styles, theme } = useStyles(stylesheet)
+
+    return (
+        <DemoScreen>
+            <View style={styles.container}>
+                <Text style={styles.text}>
+                    This screen has two themes registered with `UnistylesRegistry.addThemes` function.
+                </Text>
+                <Text style={styles.text}>
+                    It also shows a way to switch the theme from anywhere of your app. You can do that importing `UnistylesRuntime` and calling `setTheme` function.
+                </Text>
+                <Text style={styles.text}>
+                    This screen uses {UnistylesRuntime.themeName} theme.
+                </Text>
+                <Button
+                    title="Switch theme"
+                    color={theme.colors.accent}
+                    onPress={() => UnistylesRuntime.setTheme(UnistylesRuntime.themeName === 'light' ? 'premium' : 'light')}
+                />
+            </View>
+        </DemoScreen>
+    )
+}
+
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        backgroundColor: theme.colors.backgroundColor,
+        rowGap: 20
+    },
+    text: {
+        textAlign: 'center',
+        color: theme.colors.typography
+    }
+}))
diff --git a/examples/expo/src/examples/index.ts b/examples/expo/src/examples/index.ts
index ebb135b2..f0f5b39e 100644
--- a/examples/expo/src/examples/index.ts
+++ b/examples/expo/src/examples/index.ts
@@ -29,3 +29,4 @@ export { UpdateThemeScreen } from './UpdateThemeScreen'
 export { AndroidStatusBarNavigationBarScreen } from './AndroidStatusBarNavigationBarScreen'
 export { LayoutScreen } from './LayoutScreen'
 export { KeyboardScreen } from './KeyboardScreen'
+export { TwoThemesWithProviderScreen } from './TwoThemesWithProviderScreen'
\ No newline at end of file
diff --git a/src/context.tsx b/src/context.tsx
new file mode 100644
index 00000000..2d10cc67
--- /dev/null
+++ b/src/context.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import type { UnistylesBreakpoints } from "./global";
+import { unistyles } from "./core";
+import type {
+    ScreenDimensions,
+    ScreenInsets,
+    ScreenSize,
+    UnistylesEvents,
+    UnistylesMobileLayoutEvent,
+    UnistylesTheme,
+    UnistylesThemeEvent,
+} from "./types";
+import { UnistylesEventType } from "./common";
+import { NativeEventEmitter, NativeModules } from "react-native";
+
+export type TUnistylesContext = {
+    plugins: string[];
+    theme: UnistylesTheme;
+    layout: {
+        screen: ScreenSize;
+        statusBar: ScreenDimensions;
+        navigationBar: ScreenDimensions;
+        insets: ScreenInsets;
+        breakpoint: keyof UnistylesBreakpoints;
+        orientation: "landscape" | "portrait";
+    };
+};
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
+
+export const UnistylesContext = React.createContext<TUnistylesContext | undefined>(undefined);
+
+export const UnistylesProvider = ({ children }: { children: React.ReactNode }) => {
+    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName));
+    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins);
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        screen: {
+            width: unistyles.runtime.screen.width,
+            height: unistyles.runtime.screen.height,
+        },
+        statusBar: {
+            width: unistyles.runtime.statusBar.width,
+            height: unistyles.runtime.statusBar.height,
+        },
+        navigationBar: {
+            width: unistyles.runtime.navigationBar.width,
+            height: unistyles.runtime.navigationBar.height,
+        },
+        insets: {
+            top: unistyles.runtime.insets.top,
+            bottom: unistyles.runtime.insets.bottom,
+            left: unistyles.runtime.insets.left,
+            right: unistyles.runtime.insets.right,
+        },
+    });
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener("__unistylesOnChange", (event: UnistylesEvents) => {
+            switch (event.type) {
+                case UnistylesEventType.Theme: {
+                    const themeEvent = event as UnistylesThemeEvent;
+
+                    return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName));
+                }
+                case UnistylesEventType.Layout: {
+                    const layoutEvent = event as UnistylesMobileLayoutEvent;
+
+                    return setLayout({
+                        breakpoint: layoutEvent.payload.breakpoint,
+                        orientation: layoutEvent.payload.orientation,
+                        screen: layoutEvent.payload.screen,
+                        statusBar: layoutEvent.payload.statusBar,
+                        insets: layoutEvent.payload.insets,
+                        navigationBar: layoutEvent.payload.navigationBar,
+                    });
+                }
+                case UnistylesEventType.Plugin: {
+                    return setPlugins(unistyles.runtime.enabledPlugins);
+                }
+                default:
+                    return;
+            }
+        });
+
+        return subscription.remove;
+    }, []);
+    return <UnistylesContext.Provider value={{ theme, layout, plugins }}>{children}</UnistylesContext.Provider>;
+};
diff --git a/src/hooks/useUnistyles.ts b/src/hooks/useUnistyles.ts
index 2e1ed0d0..d724c18b 100644
--- a/src/hooks/useUnistyles.ts
+++ b/src/hooks/useUnistyles.ts
@@ -1,12 +1,14 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { unistyles } from '../core'
 import { UnistylesEventType } from '../common'
 import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+import { UnistylesContext } from '../context'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
+    const unistylesContext = useContext(UnistylesContext);
     const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
     const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
     const [layout, setLayout] = useState({
@@ -33,6 +35,10 @@ export const useUnistyles = () => {
     })
 
     useEffect(() => {
+        if (unistylesContext !== undefined) {
+            return
+        }
+
         const subscription = unistylesEvents.addListener(
             '__unistylesOnChange',
             (event: UnistylesEvents) => {
@@ -66,6 +72,14 @@ export const useUnistyles = () => {
         return subscription.remove
     }, [])
 
+    if (unistylesContext !== undefined) {
+        return {
+            plugins: unistylesContext.plugins,
+            theme: unistylesContext.theme,
+            layout: unistylesContext.layout
+        }
+    }
+    
     return {
         plugins,
         theme,
diff --git a/src/index.ts b/src/index.ts
index 9b797445..9a4b175d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
 import { useStyles } from './useStyles'
 import { createStyleSheet } from './createStyleSheet'
-
+import { UnistylesProvider } from './context'
 /**
  * Utility to interact with the Unistyles
  * (should be called only once)
@@ -40,7 +40,8 @@ export {
     AndroidContentSizeCategory,
     IOSContentSizeCategory,
     UnistylesRegistry,
-    UnistylesRuntime
+    UnistylesRuntime,
+    UnistylesProvider
 }
 
 export type {

From 1c884213509079f4a3266bc1ee78e124adef9b05 Mon Sep 17 00:00:00 2001
From: Yousef <yousefelgoharyx@gmail.com>
Date: Fri, 15 Nov 2024 16:25:50 +0200
Subject: [PATCH 2/3] Format code properly

---
 src/context.tsx | 67 +++++++++++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/context.tsx b/src/context.tsx
index 2d10cc67..8ffb9eff 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import type { UnistylesBreakpoints } from "./global";
-import { unistyles } from "./core";
+import React, { useEffect, useState } from 'react'
+import type { UnistylesBreakpoints } from './global'
+import { unistyles } from './core'
 import type {
     ScreenDimensions,
     ScreenInsets,
@@ -8,13 +8,13 @@ import type {
     UnistylesEvents,
     UnistylesMobileLayoutEvent,
     UnistylesTheme,
-    UnistylesThemeEvent,
-} from "./types";
-import { UnistylesEventType } from "./common";
-import { NativeEventEmitter, NativeModules } from "react-native";
+    UnistylesThemeEvent
+} from './types'
+import { UnistylesEventType } from './common'
+import { NativeEventEmitter, NativeModules } from 'react-native'
 
 export type TUnistylesContext = {
-    plugins: string[];
+    plugins: Array<string>;
     theme: UnistylesTheme;
     layout: {
         screen: ScreenSize;
@@ -22,50 +22,50 @@ export type TUnistylesContext = {
         navigationBar: ScreenDimensions;
         insets: ScreenInsets;
         breakpoint: keyof UnistylesBreakpoints;
-        orientation: "landscape" | "portrait";
+        orientation: 'landscape' | 'portrait';
     };
-};
+}
 
-const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
-export const UnistylesContext = React.createContext<TUnistylesContext | undefined>(undefined);
+export const UnistylesContext = React.createContext<TUnistylesContext | undefined>(undefined)
 
 export const UnistylesProvider = ({ children }: { children: React.ReactNode }) => {
-    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName));
-    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins);
+    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
+    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
     const [layout, setLayout] = useState({
         breakpoint: unistyles.runtime.breakpoint,
         orientation: unistyles.runtime.orientation,
         screen: {
             width: unistyles.runtime.screen.width,
-            height: unistyles.runtime.screen.height,
+            height: unistyles.runtime.screen.height
         },
         statusBar: {
             width: unistyles.runtime.statusBar.width,
-            height: unistyles.runtime.statusBar.height,
+            height: unistyles.runtime.statusBar.height
         },
         navigationBar: {
             width: unistyles.runtime.navigationBar.width,
-            height: unistyles.runtime.navigationBar.height,
+            height: unistyles.runtime.navigationBar.height
         },
         insets: {
             top: unistyles.runtime.insets.top,
             bottom: unistyles.runtime.insets.bottom,
             left: unistyles.runtime.insets.left,
-            right: unistyles.runtime.insets.right,
-        },
-    });
+            right: unistyles.runtime.insets.right
+        }
+    })
 
     useEffect(() => {
-        const subscription = unistylesEvents.addListener("__unistylesOnChange", (event: UnistylesEvents) => {
+        const subscription = unistylesEvents.addListener('__unistylesOnChange', (event: UnistylesEvents) => {
             switch (event.type) {
                 case UnistylesEventType.Theme: {
-                    const themeEvent = event as UnistylesThemeEvent;
+                    const themeEvent = event as UnistylesThemeEvent
 
-                    return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName));
+                    return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
                 }
                 case UnistylesEventType.Layout: {
-                    const layoutEvent = event as UnistylesMobileLayoutEvent;
+                    const layoutEvent = event as UnistylesMobileLayoutEvent
 
                     return setLayout({
                         breakpoint: layoutEvent.payload.breakpoint,
@@ -73,18 +73,19 @@ export const UnistylesProvider = ({ children }: { children: React.ReactNode }) =
                         screen: layoutEvent.payload.screen,
                         statusBar: layoutEvent.payload.statusBar,
                         insets: layoutEvent.payload.insets,
-                        navigationBar: layoutEvent.payload.navigationBar,
-                    });
+                        navigationBar: layoutEvent.payload.navigationBar
+                    })
                 }
                 case UnistylesEventType.Plugin: {
-                    return setPlugins(unistyles.runtime.enabledPlugins);
+                    return setPlugins(unistyles.runtime.enabledPlugins)
                 }
                 default:
-                    return;
+                    return
             }
-        });
+        })
+
+        return subscription.remove
+    }, [])
 
-        return subscription.remove;
-    }, []);
-    return <UnistylesContext.Provider value={{ theme, layout, plugins }}>{children}</UnistylesContext.Provider>;
-};
+    return <UnistylesContext.Provider value={{ theme, layout, plugins }}>{children}</UnistylesContext.Provider>
+}

From 0474ebc1587094aca24e9871d42cafd6a36f81b3 Mon Sep 17 00:00:00 2001
From: Yousef <yousefelgoharyx@gmail.com>
Date: Sun, 17 Nov 2024 17:04:05 +0200
Subject: [PATCH 3/3] Satisfy eslint

---
 .../examples/TwoThemesWithProviderScreen.tsx  | 20 ++++++-------------
 examples/expo/src/examples/index.ts           |  2 +-
 src/context.tsx                               |  8 ++++++--
 src/hooks/useUnistyles.ts                     |  6 +++---
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx b/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
index 8110106e..ba2a4257 100644
--- a/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
+++ b/examples/expo/src/examples/TwoThemesWithProviderScreen.tsx
@@ -3,23 +3,15 @@ import { Text, View } from 'react-native'
 import { createStyleSheet, useStyles, UnistylesRuntime, useInitialTheme, UnistylesProvider } from 'react-native-unistyles'
 import { Button, DemoScreen } from '../components'
 
-export const TwoThemesWithProviderScreen: React.FunctionComponent = () => {
-    return (
-        <UnistylesProvider>
-            <TwoThemesWithProviderScreenContent />
-        </UnistylesProvider>
-    )
-}
+export const TwoThemesWithProviderScreen: React.FunctionComponent = () => (
+    <UnistylesProvider>
+        <TwoThemesWithProviderScreenContent />
+    </UnistylesProvider>
+)
+
 const TwoThemesWithProviderScreenContent: React.FunctionComponent = () => {
-    // if you have 2 or more themes, you need to select one of them
-    // keep in mind that everything is synchronous and so fast, that you can set it in the same screen 🔥
-    // two more notes:
-    // call it before useStyles
-    // if you won't do that you will get UNISTYLES_THEME_NOT_FOUND error
     useInitialTheme('premium')
 
-    // you can also skip useInitialTheme and set the theme during UnistylesRegistry.addConfig({}) call
-
     const { styles, theme } = useStyles(stylesheet)
 
     return (
diff --git a/examples/expo/src/examples/index.ts b/examples/expo/src/examples/index.ts
index f0f5b39e..d315ad10 100644
--- a/examples/expo/src/examples/index.ts
+++ b/examples/expo/src/examples/index.ts
@@ -29,4 +29,4 @@ export { UpdateThemeScreen } from './UpdateThemeScreen'
 export { AndroidStatusBarNavigationBarScreen } from './AndroidStatusBarNavigationBarScreen'
 export { LayoutScreen } from './LayoutScreen'
 export { KeyboardScreen } from './KeyboardScreen'
-export { TwoThemesWithProviderScreen } from './TwoThemesWithProviderScreen'
\ No newline at end of file
+export { TwoThemesWithProviderScreen } from './TwoThemesWithProviderScreen'
diff --git a/src/context.tsx b/src/context.tsx
index 8ffb9eff..0071dd8c 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { NativeEventEmitter, NativeModules } from 'react-native'
 import type { UnistylesBreakpoints } from './global'
 import { unistyles } from './core'
 import type {
@@ -11,7 +12,6 @@ import type {
     UnistylesThemeEvent
 } from './types'
 import { UnistylesEventType } from './common'
-import { NativeEventEmitter, NativeModules } from 'react-native'
 
 export type TUnistylesContext = {
     plugins: Array<string>;
@@ -87,5 +87,9 @@ export const UnistylesProvider = ({ children }: { children: React.ReactNode }) =
         return subscription.remove
     }, [])
 
-    return <UnistylesContext.Provider value={{ theme, layout, plugins }}>{children}</UnistylesContext.Provider>
+    return (
+        <UnistylesContext.Provider value={{ theme, layout, plugins }}>
+            {children}
+        </UnistylesContext.Provider>
+    )
 }
diff --git a/src/hooks/useUnistyles.ts b/src/hooks/useUnistyles.ts
index d724c18b..f4b791b2 100644
--- a/src/hooks/useUnistyles.ts
+++ b/src/hooks/useUnistyles.ts
@@ -8,7 +8,7 @@ import { UnistylesContext } from '../context'
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
-    const unistylesContext = useContext(UnistylesContext);
+    const unistylesContext = useContext(UnistylesContext)
     const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
     const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
     const [layout, setLayout] = useState({
@@ -70,7 +70,7 @@ export const useUnistyles = () => {
         )
 
         return subscription.remove
-    }, [])
+    }, [unistylesContext])
 
     if (unistylesContext !== undefined) {
         return {
@@ -79,7 +79,7 @@ export const useUnistyles = () => {
             layout: unistylesContext.layout
         }
     }
-    
+
     return {
         plugins,
         theme,