Skip to content

Commit 2288bc5

Browse files
authored
feat: add docs about auto color adaptation (#13)
1 parent 8a0a1dc commit 2288bc5

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,26 @@ function MergingGlassElements() {
6767
}
6868
```
6969

70+
To achieve automatic text color adaptation based on the background behind the glass view, use `PlatformColor` from `react-native`:
71+
72+
> [!NOTE]
73+
> There appears to be a size limit for the glass to automatically adapt the text color. If the glass view height is >= 65 it won't automatically adapt to the material behind it.
74+
75+
https://github.com/user-attachments/assets/199bce70-dab4-43bc-9de1-605f561760e5
76+
77+
```tsx
78+
import { PlatformColor } from 'react-native';
79+
import { LiquidGlassView } from '@callstack/liquid-glass';
80+
81+
function MyComponent() {
82+
return (
83+
<LiquidGlassView style={{ padding: 20, borderRadius: 20 }}>
84+
<Text style={{ color: PlatformColor('labelColor') }}>Hello World</Text>
85+
</LiquidGlassView>
86+
);
87+
}
88+
```
89+
7090
> [!NOTE]
7191
> On unsupported iOS version (below iOS 26), it will render a normal `View` without any effects.
7292

0 commit comments

Comments
 (0)