rslabdocs

Ink Toggle

A dark mode switch that pours the theme, a drop of ink falls and floods the screen.

ReanimatedSkiaNativeWindSource

Prerequisites

This animation is built on the following libraries. expo install pins the versions that match your SDK, and the CLI tells you exactly which ones are missing when you add the component.


npx expo install react-native-reanimated @shopify/react-native-skia expo-haptics expo-status-bar expo-symbols react-native-view-shot react-native-css

Install


npx @rslab/cli add ink-toggle

Usage

Mount it at the root of a screen, it fills its parent and the canvas overlays the content while animating:

import { InkToggle } from '@/components/ui/InkToggle';

<View className="will-change-variable flex-1 bg-neutral-50 dark:bg-neutral-950">
  {/* your content with dark: variants */}

  <InkToggle iconStyle={{ position: 'absolute', top: 64, right: 20 }} />
</View>;

Requires "userInterfaceStyle": "automatic" in app.json.

See exactly how this works with an RSLAB subscription.

Get Pro

On this page