From 09e837a94599df904c2dce64f2acc3b1e53857ce Mon Sep 17 00:00:00 2001
From: Thet Aung <thetaung.dev@gmail.com>
Date: Fri, 31 Jan 2025 15:59:24 +0300
Subject: [PATCH 1/2] fix: background context not available in mobile

---
 .../Surface/BackgroundContextWrapper.tsx      | 30 +++++++++++++++++++
 src/components/Surface/Surface.android.tsx    |  9 ++++--
 src/components/Surface/Surface.ios.tsx        | 25 +++++++++-------
 src/components/Surface/Surface.tsx            | 22 +++++---------
 src/components/Surface/index.tsx              |  1 +
 5 files changed, 59 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Surface/BackgroundContextWrapper.tsx

diff --git a/src/components/Surface/BackgroundContextWrapper.tsx b/src/components/Surface/BackgroundContextWrapper.tsx
new file mode 100644
index 00000000..c2cab83a
--- /dev/null
+++ b/src/components/Surface/BackgroundContextWrapper.tsx
@@ -0,0 +1,30 @@
+import { ReactNode, useContext, useMemo } from 'react';
+import { BackgroundContext } from '../../utils';
+import { useContrastColor } from '../../hooks';
+
+export const BackgroundContextWrapper = ({
+    backgroundColor,
+    children,
+}: {
+    backgroundColor: string;
+    children: ReactNode;
+}) => {
+    const contrastColor = useContrastColor(backgroundColor, undefined, undefined);
+
+    const parentContext = useContext(BackgroundContext);
+    const isTransparent = backgroundColor === 'transparent';
+
+    const surfaceContextValue = useMemo(
+        () => ({
+            backgroundColor,
+            color: contrastColor,
+        }),
+        [backgroundColor, contrastColor],
+    );
+
+    return (
+        <BackgroundContext.Provider value={isTransparent ? parentContext : surfaceContextValue}>
+            {children}
+        </BackgroundContext.Provider>
+    );
+};
diff --git a/src/components/Surface/Surface.android.tsx b/src/components/Surface/Surface.android.tsx
index 7df4075a..57072e92 100644
--- a/src/components/Surface/Surface.android.tsx
+++ b/src/components/Surface/Surface.android.tsx
@@ -6,6 +6,7 @@ import { isAnimatedValue } from '../../styles/overlay';
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../core/theme/types';
 import { getElevationAndroid } from './utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -109,9 +110,11 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props) =>
     }, [backgroundColor, elevation, surfaceStyles]);
 
     return (
-        <Animated.View {...props} testID={testID} style={memoizedStyles}>
-            {children}
-        </Animated.View>
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+            <Animated.View {...props} testID={testID} style={memoizedStyles}>
+                {children}
+            </Animated.View>
+        </BackgroundContextWrapper>
     );
 };
 
diff --git a/src/components/Surface/Surface.ios.tsx b/src/components/Surface/Surface.ios.tsx
index 432b856c..86af2930 100644
--- a/src/components/Surface/Surface.ios.tsx
+++ b/src/components/Surface/Surface.ios.tsx
@@ -6,6 +6,7 @@ import { isAnimatedValue } from '../../styles/overlay';
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../core/theme/types';
 import { getStyleForAnimatedShadowLayer, getStyleForShadowLayer } from './utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -106,24 +107,28 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props) =>
 
     if (isAnimatedValue(elevation)) {
         return (
-            <Animated.View style={layer0Style}>
-                <Animated.View style={layer1Style}>
-                    <Animated.View {...props} testID={testID} style={sharedStyle}>
-                        {children}
+            <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+                <Animated.View style={layer0Style}>
+                    <Animated.View style={layer1Style}>
+                        <Animated.View {...props} testID={testID} style={sharedStyle}>
+                            {children}
+                        </Animated.View>
                     </Animated.View>
                 </Animated.View>
-            </Animated.View>
+            </BackgroundContextWrapper>
         );
     }
 
     return (
-        <Animated.View style={layer0Style}>
-            <Animated.View style={layer1Style}>
-                <Animated.View {...props} testID={testID} style={sharedStyle}>
-                    {children}
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+            <Animated.View style={layer0Style}>
+                <Animated.View style={layer1Style}>
+                    <Animated.View {...props} testID={testID} style={sharedStyle}>
+                        {children}
+                    </Animated.View>
                 </Animated.View>
             </Animated.View>
-        </Animated.View>
+        </BackgroundContextWrapper>
     );
 };
 
diff --git a/src/components/Surface/Surface.tsx b/src/components/Surface/Surface.tsx
index 4cbcb0e5..902d1156 100644
--- a/src/components/Surface/Surface.tsx
+++ b/src/components/Surface/Surface.tsx
@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef, ReactNode, memo, useMemo, forwardRef, useContext } from 'react';
+import { ComponentPropsWithRef, ReactNode, memo, useMemo, forwardRef } from 'react';
 import { Animated, View, StyleProp, ViewStyle } from 'react-native';
 
 import type { MD3Elevation } from '../../core/theme/types';
-import { useComponentStyles, useContrastColor } from '../../hooks';
+import { useComponentStyles } from '../../hooks';
 import shadow from '../../styles/shadow';
-import { BackgroundContext } from '../../utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -73,27 +73,19 @@ export type Props = ComponentPropsWithRef<typeof View> & {
 // for Web
 const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
     const surfaceStyles = useComponentStyles('Surface', style);
-    const contrastColor = useContrastColor(surfaceStyles?.backgroundColor, undefined, undefined);
 
-    const parentContext = useContext(BackgroundContext);
-    const isTransparent = surfaceStyles?.backgroundColor === 'transparent';
-
-    const { surfaceStyle, surfaceContextValue } = useMemo(() => {
+    const { surfaceStyle } = useMemo(() => {
         return {
-            surfaceContextValue: {
-                backgroundColor: surfaceStyles?.backgroundColor,
-                color: contrastColor,
-            },
             surfaceStyle: [elevation ? shadow(elevation) : null, surfaceStyles],
         };
-    }, [elevation, surfaceStyles, contrastColor]);
+    }, [elevation, surfaceStyles]);
 
     return (
-        <BackgroundContext.Provider value={isTransparent ? parentContext : surfaceContextValue}>
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
             <Animated.View ref={ref} {...props} testID={testID} style={surfaceStyle}>
                 {children}
             </Animated.View>
-        </BackgroundContext.Provider>
+        </BackgroundContextWrapper>
     );
 };
 
diff --git a/src/components/Surface/index.tsx b/src/components/Surface/index.tsx
index f3a5870f..cf47a3d7 100644
--- a/src/components/Surface/index.tsx
+++ b/src/components/Surface/index.tsx
@@ -1,2 +1,3 @@
 export { default as Surface, Props as SurfaceProps } from './Surface';
 export { defaultStyles as surfaceStyles } from './utils';
+export * from './BackgroundContextWrapper';

From 2c791c1ae96a9d45a8828b6bdf189571c3fe72f8 Mon Sep 17 00:00:00 2001
From: Thet Aung <thetaung.dev@gmail.com>
Date: Fri, 31 Jan 2025 15:59:46 +0300
Subject: [PATCH 2/2] 0.4.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 040fc5ac..af988f71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bambooapp/bamboo-molecules",
-    "version": "0.4.4",
+    "version": "0.4.5",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/webbeetechnologies/bamboo-molecules.git"