git404hub

what is expo-liquid-lens fr?

rit3zh/expo-liquid-lens — explained in plain English

Analysis updated 2026-05-18

40TypeScriptAudience · developerComplexity · 3/5Setup · moderate

tl;dr

A React Native tab switcher for Expo apps whose sliding pill indicator renders a real-time GPU refraction effect that warps the content beneath it.

vibe map

mindmap
  root((expo-liquid-lens))
    What it does
      Tab switcher component
      GPU refraction pill
      Tap or drag to select
    Tech stack
      TypeScript
      React Native
      WebGPU
      Skia
    Use cases
      Category filter bar
      Segmented control UI
      Animated tab navigation
    Audience
      Mobile developers
      React Native devs

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Build an animated segmented tab bar with a glass-like sliding indicator.

VIBE 2

Add a category or filter switcher with tap and drag interaction.

VIBE 3

Show a GPU-refraction visual effect in a React Native app's UI.

what's the stack?

TypeScriptReact NativeExpoWebGPUSkia

how it stacks up fr

rit3zh/expo-liquid-lensjavlonbek1233/-brainboostjavlonbek1233/-neuroscan-a
Stars404040
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity3/52/52/5
Audiencedevelopervibe codervibe coder

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · moderate time til it works · 30min

Requires a native development build with WebGPU support, does not run in Expo Go.

in plain english

expo-liquid-lens is a tab switcher component for React Native apps built with Expo. It displays a horizontal row of tabs with a pill-shaped indicator that slides to the active tab. What makes it visually distinctive is the pill: instead of a plain colored highlight, it renders a live refraction effect using WebGPU, so the content under the pill appears warped like glass, and the movement between tabs is animated with a spring rather than a linear slide. Users can tap a tab or drag the pill directly across the row. The component is written in TypeScript and provides a compound API, meaning you build the tab bar by nesting smaller pieces: a Tabs wrapper, Tabs.Item for each tab, Tabs.Label for the text, and Tabs.Icon for an icon from the @expo/vector-icons library. It supports both controlled mode (where your code explicitly sets the active index) and uncontrolled mode (where the component manages its own state). Colors, pill opacity, border radius, and padding are all configurable through props. Because the refraction effect runs on the GPU via a WebGPU shader, the component has requirements that plain React Native components do not. It depends on react-native-webgpu and React Native Skia, which require a native development build, it will not run inside Expo Go. Label text is rasterized by Skia rather than rendered as standard React text nodes, which means only string labels are supported, not arbitrary React elements. The README notes that continuous GPU shader rendering is heavier than a standard view-based tab bar and advises caution on low-end devices. The project is a demo component rather than a published package. To try it, you clone the repository, install dependencies with Bun, and run it on a device or simulator that has a working WebGPU backend.

prompts (copy fr)

prompt 1
Clone expo-liquid-lens and run it on an iOS development build
prompt 2
Add a Tabs component from expo-liquid-lens with icons and custom colors
prompt 3
Explain why this component needs a native development build instead of Expo Go
prompt 4
Show me how to use expo-liquid-lens in controlled mode with useState

Frequently asked questions

what is expo-liquid-lens fr?

A React Native tab switcher for Expo apps whose sliding pill indicator renders a real-time GPU refraction effect that warps the content beneath it.

What language is expo-liquid-lens written in?

Mainly TypeScript. The stack also includes TypeScript, React Native, Expo.

How hard is expo-liquid-lens to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is expo-liquid-lens for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.