Reactopia | Reusable React developer tools

Yash Mahajan

Getting Started

Introduction Contributing

Components

Separator UiButton Badge StackUiInputIn devUiSelectIn devUiTextareaIn dev

Hooks

useDebounce useLocalStorage useMediaQuery useMounted

Utilities

cn groupBy sleep

Reactopia

Open React tooling: components, SVG animation, and a growing directory. Built by Yash Mahajan.

Product

Components
Discover
SVG tools
AI direction

Legal

Privacy Policy
Terms of Use
Cookie Policy
License
Credits
Contact

Project

About
Changelog
GitHub
X

Privacy Terms Cookies

Getting Started

Introduction Contributing

Components

Separator UiButton Badge StackUiInputIn devUiSelectIn devUiTextareaIn dev

Hooks

useDebounce useLocalStorage useMediaQuery useMounted

Utilities

cn groupBy sleep

Components

Stack

Vertical flex layout helper with gap for React Native.

BetacomponentReact NativeUpdated 2026-10-07MIT License Source on GitHub Report Issue

Dependencies:npm install react react-native

Badge useDebounce

Components

Stack

Vertical flex layout helper with gap for React Native.

BetacomponentReact NativeUpdated 2026-10-07MIT License Source on GitHub Report Issue

Dependencies:npm install react react-native

Introduction

Vertical layout helper for React Native: column flex with configurable gap and alignment. Complements the Separator component for list-style UIs.

Platform: React Native. Dependencies: react, react-native.

Component

On older React Native versions without gap in flexbox, replace gap with margin on children or use Separator between items.

Example

Footer

For horizontal rows, mirror the same pattern with flexDirection: "row" (a Row helper).

Badge useDebounce

Introduction

Vertical layout helper for React Native: column flex with configurable gap and alignment. Complements the Separator component for list-style UIs.

Platform: React Native. Dependencies: react, react-native.

Component

On older React Native versions without gap in flexbox, replace gap with margin on children or use Separator between items.

Example

Footer

For horizontal rows, mirror the same pattern with flexDirection: "row" (a Row helper).

tsx

<Stack gap={12}>
  <Title />
  <Subtitle />
  <Actions />
</Stack>

import React from "react";
import { View, type ViewProps, type ViewStyle } from "react-native";

export type StackProps = ViewProps & {
  gap?: number;
  align?: ViewStyle["alignItems"];
  justify?: ViewStyle["justifyContent"];
};

export function Stack({
  gap = 8,
  align = "stretch",
  justify = "flex-start",
  style,
  children,
  ...rest
}: StackProps) {
  return (
    <View
      style={[{ flexDirection: "column", alignItems: align, justifyContent: justify, gap }, style]}
      {...rest}
    >
      {children}
    </View>
  );
}

tsx