↗
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.
BaseButton
Button
Fully customizable button with ripple, animation, and per-state style callbacks.
iOS
Android
Web
TV
View →
NativeButton
Button
Text-based button with optional icons and async loading indicator.
iOS
Android
Web
TV
View →
Switch
Form
Animated toggle with smooth track and thumb transitions.
iOS
Android
Web
View →
Dropdown
Form
Animated dropdown with search, portal support, and imperative refs.
iOS
Android
Web
View →
FlatLabelInput
Form
Animated floating label input with keyboard-aware layout.
iOS
Android
Web
View →
LabeledInputField
Form
Inline floating label input with left and right adornment slots.
iOS
Android
Web
TV
View →
LabeledInputFieldWeb
Form
Web-optimized labeled input with lower-cost placeholder positioning.
Web
View →
Portal
Overlay
Render content outside the view hierarchy for overlays and toasts.
iOS
Android
Web
View →
PortalHost
Overlay
Root host layer that receives Portal content for overlays and dropdowns.
iOS
Android
Web
View →
Ripple
Effect
Low-level animated ripple effect used by pressable components.
iOS
Android
Web
View →
SpatialNavigationRoot
Navigation
Top-level provider for TV/keyboard D-Pad spatial navigation.
iOS
Android
Web
TV
View →
CustomButton
Button
Fully customizable button with custom content, icons, and animated states.
iOS
Android
Web
TV
View →
ButtonsSlider
Button
Segmented control with animated selection indicator.
iOS
Android
Web
View →
AutoDetectButtonsSlider
Button
Auto-detecting segmented slider that adapts to content width dynamically.
iOS
Android
Web
View →
SpatialNavigationFocusableView
Navigation
Focusable container for TV/keyboard D-Pad spatial navigation with LRUD support.
Android
TV
View →
SpatialNavigationView
Navigation
Directional container for grouping focusable spatial navigation children.
iOS
Android
Web
TV
View →
SpatialNavigationNode
Navigation
Low-level focusable node with focus, select, active, and ref control.
iOS
Android
Web
TV
View →
DefaultFocus
Navigation
Marks the default child to focus when a navigation area activates.
iOS
Android
Web
TV
View →
SpatialNavigationScrollView
Navigation
Scroll container that cooperates with remote and pointer focus movement.
iOS
Android
Web
TV
View →
SpatialNavigationDeviceTypeProvider
Navigation
Provider that detects pointer, keyboard, and remote input mode for focus behavior.
iOS
Android
Web
TV
View →
SpatialNavigationVirtualizedList
Navigation
Virtualized list with registered focus nodes for large TV-style menus.
iOS
Android
Web
TV
View →
SpatialNavigationVirtualizedGrid
Navigation
Virtualized grid for performant spatial navigation across many items.
iOS
Android
Web
TV
View →
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