Home / Guides
React Native UI guides
How to build the interface patterns every app needs, with Reanimated, gesture-handler and NativeWind. Each guide explains how the pattern works and gives you the code to build it yourself, then shows the LumioUI component that does it for you, with its demo.
-
How to make a modal dialog in React Native Build a modal in React Native: a dimmed backdrop, a centred panel that animates in, focus kept inside for screen readers, and close on tap outside. Code and a live demo. -
How to make a bottom sheet in React Native Build a bottom sheet in React Native with Reanimated: slide it up over a dimmed backdrop, drag it down to close, and keep it accessible. Code and a live demo. -
How to build an animated carousel in React Native Build a swipeable carousel in React Native: a paging ScrollView, page dots driven by scroll position, and side pages that scale and fade with Reanimated. Full code. -
Animated tabs with a sliding indicator in React Native Make React Native tabs whose indicator glides to the selected tab with Reanimated: measure each tab, spring the indicator, fade the panels. Code and a live demo. -
How to show toast notifications in React Native Add toast notifications to a React Native app: a provider at the root, a hook to show success, error and loading toasts, swipe to dismiss. Code and a live demo. -
How to make an animated splash screen in React Native and Expo Make an animated splash screen in Expo: keep the native splash up while you load, then hand off to a matching React Native view and animate it away. -
How to build a month calendar in React Native Build a month calendar in React Native: generate the day grid, page between months, mark busy days with dots and handle selection. Full code, no calendar library. -
Skeleton loading screens in React Native Show skeleton placeholders while React Native content loads, shaped like the real layout, then switch the content on in their place. Plus: shimmer or still? -
How to add dark mode and a theme toggle in React Native Add dark mode to a React Native app: follow the system theme, let people override it with a toggle, and keep every colour on theme tokens. Code and a live demo. -
How to build an accordion in React Native Build an expandable accordion in React Native with Reanimated: measure the content, animate the height, rotate the chevron and announce state to screen readers. -
How to make a side drawer menu in React Native Make a side drawer menu in React Native: slide it in over a dimmed backdrop, swipe it closed, highlight the active row. Reanimated code and a live demo. -
How to make an animated heart like button in React Native Make an Instagram-style heart like button in React Native: fill animation, a count that updates in place, haptics, double-tap to like. Reanimated code and a demo.
Choosing a library? See the best React Native UI libraries compared. Building with glass? See liquid glass for React Native.