react-native-flush-component 🚽

Don't forget to flush your React Native components to prevent backlog.

An Animated, interactive cartoon toilet component for React Native that may inspire you to sanitize your dependencies. Tap the handle or call .flush() to watch payloads (like the 💩 emoji) swirl down the drain.

Installation

npm install react-native-flush-component

Usage

import React, { useRef } from "react";
import { View, Button } from "react-native";
import FlushComponent from "react-native-flush-component";

export default function App() {
  const toiletRef = useRef();

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <FlushComponent
        ref={toiletRef}
        onFlushStart={() => console.log("💧 Flush started")}
        onFlushEnd={() => console.log("✅ Flush complete")}
      />
      <Button title="Flush" onPress={() => toiletRef.current.flush()} />
    </View>
  );
}

Props

| Prop | Type | Default | Description | |------|------|----------|-------------| | payloads | array | ["💩","🍕","🍔"] | Items to flush (emojis, strings, or React nodes). | | payloadSize | number | 30 | Emoji/text size for each payload. | | payloadFloat | bool | true | Makes payloads float gently before flush. | | loopPayloads | bool | false | Loops payloads forever. | | bOutback | bool | false | Reverses swirl rotation (Australian mode). | | bDebounce | bool | true | Prevents multiple flushes at once. | | onFlushStart | function | — | Called when flush begins. | | onFlushEnd | function | — | Called when flush completes. |

API (Imperative Handle)

You can access these methods using a ref:

toiletRef.current.flush();
toiletRef.current.toggleLid();
toiletRef.current.isFlushing(); // returns boolean

Example Payloads

payloads={[
  "💩", "🍕", "🍔", "🍟", "🍩", "💎", "💩"
]}

You can pass custom React nodes too, not just strings.

License

MIT ©2025 A. Burton