Skip to content

Change linear gradient implementation to CAGradientLayer for iOS new arch #2

Closed
SzymczakJ wants to merge 64 commits into
v3.0.0-alpha.1-discord-1from
szymczak/apply-patch
Closed

Change linear gradient implementation to CAGradientLayer for iOS new arch #2
SzymczakJ wants to merge 64 commits into
v3.0.0-alpha.1-discord-1from
szymczak/apply-patch

Conversation

@SzymczakJ
Copy link
Copy Markdown

Migrated react-native-linear-gradient's iOS implementation from CPU-rasterized UIGraphicsImageRenderer (which drew a CGImage bitmap and set it as layer.contents) to GPU-composited CAGradientLayer.

Benefits

  • No main-thread rasterization. Old path stalled the main thread on every draw; new path is composited by the render server, which is much faster(40 ms of CPU cost to almost 0 ms) .
  • Cheap resizes / reflows. Bounds changes (rotation, keyboard, bottom sheet expand, Reanimated layouts) are a single property assignment — no bitmap re-allocation.
  • No re-raster on prop tweaks. Color or stop changes are metadata updates, not full redraws.
  • No peak-memory spikes during redraw. Transient CPU bitmap allocations are gone; less allocator churn and heap fragmentation.

Notes on memory
Old implementation had to allocate a lot of memory for CG raster data, now when CAGradientLayer handles everything on GPU that cost is gone(now it just needs small data structures for GPU communication). This gives us ~4MiB memory save on each screen sized gradient.

…le/update-example

Simplify and fix GradientTimer (example)
BREAKING CHANGE: Use (existing) default import instead of named import.

This also adds JSDoc comments and modernizes imports for better
TypeScript 5 support.
…le/rm-named-export

Remove named export and improve TS definitions
…le/example75

Update react-native to 0.75.5 (example project)
…le/fix-ts-types

Fix type declarations for TypeScript 5
This also includes minor improvements to error handling/messages.
…le/fix-colors

Fix color conversion on new architecture
…le/clang-format

Apply clang-format to objc files
…le/typescript

Add typescript dependency and check
friederbluemle and others added 28 commits January 7, 2026 21:02
…le/codegen-config

Add explicit componentProvider iOS codegen config
…atch-1

Add link to rn-gradient.vercel.app to README.md
…le/rm-windows

Remove windows implementation and related code
…le/consolidate-platforms

Consolidate and combine platform specific code
This removes all Flow types, including the flow-bin devDependency.
…le/ts-migration

Migrate codebase to TypeScript
This also fixes the color label in AnimatedGradient.
This also aligns .prettierrc.js with RN 0.80+.
…le/update-example

Update example app with TS migration and import linting
@SzymczakJ SzymczakJ changed the base branch from 3.0.0-beta.3-discord to v3.0.0-alpha.1-discord-1 April 22, 2026 15:44
@SzymczakJ SzymczakJ closed this Jun 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants