What is expo-liquid-lens?

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.