Skip to content

LinearGradient widget backgrounds do not render correctly in Clear / Tinted modes #122

@hsravat-4590

Description

@hsravat-4590

Library Version

^1.2.1

React Native Version

0.83.2

React Version

19.2.0

Expo Version

^55.0.8

Minimal Reproduction

Steps to reproduce

  1. Create a widget using Voltra
  2. Add a full-size LinearGradient as the background
  3. Wrap content in GlassContainer
  4. Add the widget to the iOS Home Screen
  5. Change appearance to:
    • Clear
    • Tinted

Code example

import { Voltra } from "voltra";

export function ExampleWidget() {
  return (
    <Voltra.ZStack style={{ width: "100%", height: "100%" }}>
      <Voltra.LinearGradient
        colors={["#0F1724", "#1E293B"]}
        start="topLeading"
        end="bottomTrailing"
        style={{ width: "100%", height: "100%" }}
      />

      <Voltra.GlassContainer style={{ width: "100%", height: "100%" }}>
        <Voltra.Text style={{ color: "white" }}>
          Hello Widget
        </Voltra.Text>
      </Voltra.GlassContainer>
    </Voltra.ZStack>
  );
}

Expected behavior

  • The widget should either:

    • Render the gradient correctly, OR
    • Gracefully degrade in Clear/Tinted modes (e.g. fallback background, preserved content visibility)
  • Content should remain visible regardless of system appearance mode


Actual behavior

  • In Clear and Tinted modes:
Image
  • The widget background becomes a plain white rounded rectangle

  • The gradient is not rendered

  • Content may appear washed out or invisible

  • In Default / Dark modes:

    • Everything renders correctly

Additional Information (Optional)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions