react-native-pixel-launch

react-native-pixel-launch

Pixel Launcher-style animations for React Native and Expo — overlay transitions, dialogs, bottom sheets, dome footer with FAB menu, and categorized menu grid with search.

Preview

v1.0 — Pixel Launch Overlay	v1.1 — Full Component Suite

Features

• PixelLaunchContainer — Full-screen overlay that scales from any element (like Android's Pixel Launcher app-open animation)
• PixelDialog — Custom alert dialog that expands from an origin point to screen center
• AnimatedBottomSheet — Bottom sheet with slide animation + stagger items
• DomeFooter — SVG dome bar footer with circular FAB button cutout
• FabMenu — Expandable floating action button menu with staggered spring animations
• PixelMenuGrid — Data-driven, categorized icon grid with scale-on-press animation
• PixelMenuOverlay — Search bar + categorized menu grid combo
• Runs on the native thread (useNativeDriver: true) for smooth 60/120 Hz
• Works with both Expo and bare React Native
• TypeScript support built-in
• Zero required dependencies (only react and react-native)
• Optional react-native-svg peer dependency (only needed for DomeFooter)

Installation

npm install react-native-pixel-launch
# or
yarn add react-native-pixel-launch

If you want to use DomeFooter / FabMenu, also install:

npm install react-native-svg

Components

1. PixelLaunchContainer

Full-screen overlay that scales up from an origin rect and collapses back on close.

import { useState, useRef } from "react";
import { View, TouchableOpacity, Text } from "react-native";
import { PixelLaunchContainer, type LaunchOrigin } from "react-native-pixel-launch";

export default function App() {
  const [visible, setVisible] = useState(false);
  const [origin, setOrigin]   = useState<LaunchOrigin | null>(null);
  const btnRef                = useRef<View>(null);

  const handleOpen = () => {
    btnRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
      setOrigin({ x: pageX, y: pageY, width, height });
      setVisible(true);
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity ref={btnRef} onPress={handleOpen}>
        <Text>Open</Text>
      </TouchableOpacity>

      <PixelLaunchContainer
        visible={visible}
        origin={origin}
        onClose={() => setVisible(false)}
        onDismissed={() => console.log("fully closed")}
        backgroundColor="#FFFFFF"
      >
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <Text>Your screen content here</Text>
          <TouchableOpacity onPress={() => setVisible(false)}>
            <Text>Close</Text>
          </TouchableOpacity>
        </View>
      </PixelLaunchContainer>
    </View>
  );
}

Props

Prop	Type	Required	Default	Description
visible	boolean	Yes	--	Controls open/close state
origin	LaunchOrigin | null	Yes	--	Screen-absolute rect of the trigger element
onClose	() => void	Yes	--	Called when user wants to close
onDismissed	() => void	No	--	Called after close animation completes
backgroundColor	string	No	"#FFFFFF"	Overlay background colour
zIndex	number	No	200	zIndex of the overlay
children	ReactNode	Yes	--	Content rendered inside the overlay

2. PixelDialog

Custom dialog that replaces native Alert — scales from an origin point to screen center.

import { PixelDialog } from "react-native-pixel-launch";

<PixelDialog
  visible={showDialog}
  origin={dialogOrigin}
  title="Delete Item?"
  message="This action cannot be undone."
  icon={<MyIcon />}
  buttons={[
    { label: "Cancel", style: "cancel", onPress: () => setShowDialog(false) },
    { label: "Delete", style: "destructive", onPress: handleDelete },
  ]}
  onDismiss={() => setShowDialog(false)}
/>

Props

Prop	Type	Required	Default	Description
visible	boolean	Yes	--	Controls visibility
origin	LaunchOrigin | null	Yes	--	Origin rect of trigger element
title	string	Yes	--	Dialog title
message	string	No	--	Body text below title
icon	ReactNode	No	--	Icon rendered above the title
buttons	PixelDialogButton[]	Yes	--	Array of buttons
onDismiss	() => void	No	--	Called on backdrop tap

PixelDialogButton

type PixelDialogButton = {
  label: string;
  style?: "default" | "cancel" | "destructive";
  onPress: () => void;
};

3. AnimatedBottomSheet

Bottom sheet with slide-up animation, drag-to-dismiss, and stagger items.

import { AnimatedBottomSheet, StaggerItem } from "react-native-pixel-launch";

<AnimatedBottomSheet
  visible={isOpen}
  onClose={() => setIsOpen(false)}
  title="Options"
  bottomOffset={80}
  backgroundColor="#FFFFFF"
>
  <StaggerItem index={0}><Text>Row 1</Text></StaggerItem>
  <StaggerItem index={1}><Text>Row 2</Text></StaggerItem>
  <StaggerItem index={2}><Text>Row 3</Text></StaggerItem>
</AnimatedBottomSheet>

Props

Prop	Type	Required	Default	Description
visible	boolean	Yes	--	Controls open/close
onClose	() => void	Yes	--	Called on backdrop tap or swipe down
title	string	No	--	Header title
bottomOffset	number	No	0	Distance from screen bottom
originX	number	No	center	X position the sheet scales from
maxHeightRatio	number	No	0.80	Max height as fraction of screen
backgroundColor	string	No	"#FFFFFF"	Sheet background color
titleColor	string	No	"#111827"	Title text color
handleColor	string	No	"#E5E7EB"	Drag handle color
dividerColor	string	No	"#F3F4F6"	Divider line color
backdropMaxOpacity	number	No	0.45	Backdrop opacity when open
children	ReactNode	No	--	Sheet content

4. DomeFooter

SVG dome bar footer with circular cutout for a floating action button.

import { DomeFooter, FOOTER_BAR_H } from "react-native-pixel-launch";
import { useSafeAreaInsets } from "react-native-safe-area-context";

function MyFooter() {
  const insets = useSafeAreaInsets();
  const barH = FOOTER_BAR_H + insets.bottom;

  return (
    <DomeFooter
      barH={barH}
      primaryColor="#6C63FF"
      footerColor="#1E1E30"
      brandText="My App"
      isFabOpen={fabOpen}
      isSheetOpen={sheetOpen}
      isMenuOpen={menuOpen}
      onToggleFab={() => setFabOpen(!fabOpen)}
      onCloseSheet={() => setSheetOpen(false)}
      onCloseMenu={() => setMenuOpen(false)}
      renderIcon={(name) => (
        <Text style={{ color: "#FFF", fontSize: 22 }}>
          {name === "menu" ? "☰" : "✕"}
        </Text>
      )}
    />
  );
}

Props

Prop	Type	Required	Default	Description
barH	number	Yes	--	Total bar height (FOOTER_BAR_H + safe area)
primaryColor	string	Yes	--	Brand colour for FAB button
footerColor	string	Yes	--	Footer bar background colour
brandText	string	No	""	Text shown on the footer bar
onBack	() => void	No	--	Sub-screen mode: shows close button
isSheetOpen	boolean	No	false	Whether a sheet overlay is open
isFabOpen	boolean	No	false	Whether the FAB menu is open
isMenuOpen	boolean	No	false	Whether the menu is open
onCloseSheet	() => void	No	--	Close sheet callback
onToggleFab	() => void	No	--	Toggle FAB menu callback
onCloseMenu	() => void	No	--	Close menu callback
renderIcon	(name) => ReactNode	No	--	Custom icon renderer

5. FabMenu

Expandable floating action button menu with staggered spring animations.

import { FabMenu } from "react-native-pixel-launch";

<FabMenu
  isOpen={fabOpen}
  bottomOffset={barH}
  primaryColor="#6C63FF"
  items={[
    {
      key: "menu",
      icon: <Text style={{ color: "#FFF" }}>☰</Text>,
      label: "Menu Items",
      onPress: () => openMenu(),
    },
    {
      key: "settings",
      icon: <Text style={{ color: "#FFF" }}>⚙</Text>,
      label: "Settings",
      onPress: () => openSettings(),
    },
  ]}
  onClose={() => setFabOpen(false)}
/>

Props

Prop	Type	Required	Default	Description
isOpen	boolean	Yes	--	Controls menu visibility
bottomOffset	number	Yes	--	Distance from screen bottom
primaryColor	string	Yes	--	Colour for FAB buttons
items	FabMenuItem[]	Yes	--	Menu items to display
onClose	() => void	Yes	--	Close callback

6. PixelMenuGrid

Data-driven, categorized icon grid with scale-on-press animation and LaunchOrigin measurement.

import { PixelMenuGrid, type PixelMenuItem } from "react-native-pixel-launch";
import Icon from "@expo/vector-icons/MaterialCommunityIcons";

type MyItem = PixelMenuItem & { icon: string };

const items: MyItem[] = [
  { key: "home", title: "Home", icon: "home", color: "blue", category: "Main", order: 1 },
  { key: "chat", title: "Chat", icon: "chat", color: "green", category: "Main", order: 2 },
  { key: "settings", title: "Settings", icon: "cog", color: "gray", category: "Other", order: 3 },
];

<PixelMenuGrid
  items={items}
  primaryColor="#6C63FF"
  renderIcon={(item, color, size) => (
    <Icon name={item.icon as any} size={size} color={color} />
  )}
  onItemPress={(item, origin) => {
    // origin has { x, y, width, height } for PixelLaunchContainer
    console.log("Pressed", item.title, origin);
  }}
/>

Props

Prop	Type	Required	Default	Description
items	PixelMenuItem[]	No	--	Flat list (auto-grouped by category)
sections	PixelMenuSection[]	No	--	Pre-grouped sections
renderIcon	(item, color, size) => ReactNode	Yes	--	Icon renderer
onItemPress	(item, origin) => void	No	--	Press callback with measured position
searchTerm	string	No	""	Filter items by title
primaryColor	string	No	"#2563EB"	Accent color for section headers
iconCircleColor	string	No	"#FFFFFF"	Icon circle background
labelColor	string	No	"#1F2937"	Card label text color
columns	number	No	4	Number of grid columns
iconSize	number	No	64	Icon circle diameter
bottomPadding	number	No	0	Extra bottom padding

7. PixelMenuOverlay

Search bar + categorized menu grid combo. Manages search state internally.

import { PixelMenuOverlay } from "react-native-pixel-launch";

<PixelMenuOverlay
  items={menuItems}
  primaryColor="#6C63FF"
  iconCircleColor="#1E1E30"
  labelColor="#CBD5E0"
  searchBackgroundColor="#1E1E30"
  searchTextColor="#FFFFFF"
  searchPlaceholderColor="#718096"
  bottomPadding={100}
  renderIcon={(item, color, size) => (
    <Icon name={item.icon} size={size} color={color} />
  )}
  onItemPress={(item, origin) => openScreen(item, origin)}
/>

Props

Inherits all PixelMenuGrid props (except searchTerm) plus:

Prop	Type	Required	Default	Description
searchPlaceholder	string	No	"Search in menu"	Input placeholder
searchBackgroundColor	string	No	"#FFFFFF"	Search pill background
searchTextColor	string	No	"#202124"	Search input text color
searchPlaceholderColor	string	No	"#9AA0A6"	Placeholder text color
searchShadowColor	string	No	primaryColor	Search pill shadow color
renderSearchIcon	() => ReactNode	No	--	Custom search icon
renderClearIcon	() => ReactNode	No	--	Custom clear icon
showSearch	boolean	No	true	Show/hide search bar
headerContent	ReactNode	No	--	Content above search bar

Types

LaunchOrigin

type LaunchOrigin = {
  x: number;      // pageX from ref.measure()
  y: number;      // pageY from ref.measure()
  width: number;
  height: number;
};

PixelMenuItem

type PixelMenuItem = {
  key: string;        // Unique identifier
  title: string;      // Display label
  color?: string;     // Icon color (hex or named: "red", "blue", etc.)
  category?: string;  // Section grouping
  order?: number;     // Sort order within category
};

PixelMenuSection

type PixelMenuSection<T extends PixelMenuItem = PixelMenuItem> = {
  category: string;
  items: T[];
};

FabMenuItem

type FabMenuItem = {
  key: string;
  icon: React.ReactNode;
  label: string;
  onPress: () => void;
};

Exported Constants

Constant	Value	Description
FOOTER_BAR_H	56	Footer bar height (without safe area)
DOME_R	50	Dome radius
DOME_CX	screenWidth - 58	Dome center X position
BTN_R	30	FAB button radius
CUP_RIM_R	39	Dome cutout rim radius

Named Colors

PixelMenuGrid resolves named colors automatically:

red orange yellow green teal blue indigo violet purple pink cyan gray brown lime amber

You can extend or override these with the namedColors prop.

License

MIT — made by Sourabh Patidar