Name		Name	Last commit message	Last commit date
parent directory ..
GridMagnification.tsx		GridMagnification.tsx
GridMagnificationInitial.tsx		GridMagnificationInitial.tsx
GridMagnificationSkia.tsx		GridMagnificationSkia.tsx
README.md		README.md
icons.ts		icons.ts
index.tsx		index.tsx
types.ts		types.ts

README.md

Grid Magnification Effect

A grid list view that displays Magnify effect on long press & drag, focusing on the items near the touch area within a radius.

GridMagnificationInitial.tsx:- Initial implementation that I tried replicating this demo.
GridMagnification.tsx:- Mostly same in logic with the initial one, but here the interaction results in kind of a Bubble Magnifying effect replicating this demo, also using static app icons.
GridMagnificationSkia.tsx: Using RN-Skia with reanimated for animations

👀 This is how it looks

rn_grid_magnification_effect.mp4

📦 Packages used

react-native-gesture-handler:- To track user gestures
react-native-reanimated:- To Animate the Grid items with respect to the user's gestures.
@shopify/react-native-skia:- To Reimplement same effect using RN-Skia provided components and gesture & Animation APIs.

🗒 TODOs

Improve performance, especially on Android.
Fix and improve Skia implementation

🌻 Motivation

Inspired by this original SwiftUI implementation by @philipcdavis.

🔗 Links

Flutter Grid Magnification: Flutter implementation of the same demo.
Twitter Post