↗

â†—

↗

↗

v1.0.0 · React Native + TV + Web

React Native Cross Elements

Beautiful, cross-platform interactable components and spatial navigation for React Native — iOS, Android, Web, and TV — with full accessibility support.

iOS

Android

Web

TV

$

npm install react-native-cross-elements

Copy

Browse Components

Get Started →

15+

Components

4

Platforms

60fps

Animations

100%

TypeScript

Everything you need

One library for all your cross-platform interactive UI needs.

🧩

Rich UI Components

Buttons, Switch, Dropdown, Inputs, Ripple, Portal — all cross-platform and accessible.

📺

TV & Spatial Navigation

LRUD-powered focus engine for remote, D-Pad, keyboard, and pointer devices.

✨

Silky Animations

Powered by React Native Reanimated 3 for 60/120 fps interactions on every platform.

🎨

Fully Stylable

Every component exposes style callbacks with focused, hovered, and pressed states.

♿

Accessible

Proper accessibility roles, props, and screen reader support out of the box.

📦

TypeScript First

Strict types and generics throughout — great IDE autocompletion.

Components

Explore the full cross-platform component library.

Fully customizable button with ripple, animation, and per-state style callbacks.

Text-based button with optional icons and async loading indicator.

Animated toggle with smooth track and thumb transitions.

Animated dropdown with search, portal support, and imperative refs.

Animated floating label input with keyboard-aware layout.

LabeledInputField

Inline floating label input with left and right adornment slots.

LabeledInputFieldWeb

Web-optimized labeled input with lower-cost placeholder positioning.

Render content outside the view hierarchy for overlays and toasts.

Root host layer that receives Portal content for overlays and dropdowns.

Low-level animated ripple effect used by pressable components.

SpatialNavigationRoot

Top-level provider for TV/keyboard D-Pad spatial navigation.

Fully customizable button with custom content, icons, and animated states.

Segmented control with animated selection indicator.

AutoDetectButtonsSlider

Auto-detecting segmented slider that adapts to content width dynamically.

SpatialNavigationFocusableView

Focusable container for TV/keyboard D-Pad spatial navigation with LRUD support.

SpatialNavigationView

Directional container for grouping focusable spatial navigation children.

SpatialNavigationNode

Low-level focusable node with focus, select, active, and ref control.

Marks the default child to focus when a navigation area activates.

SpatialNavigationScrollView

Scroll container that cooperates with remote and pointer focus movement.

SpatialNavigationDeviceTypeProvider

Provider that detects pointer, keyboard, and remote input mode for focus behavior.

SpatialNavigationVirtualizedList

Virtualized list with registered focus nodes for large TV-style menus.

SpatialNavigationVirtualizedGrid

Virtualized grid for performant spatial navigation across many items.

Ready to build something great?

Install in seconds. Works on iOS, Android, Web, and TV out of the box.

Read the Docs →

Quick Start

GitHub

npm

Issues

MIT License · Made with ♥ by ImRoodyDev

react-native-cross-elements · v1.0.0