Skip to Content
Getting Started

Introduction

The RN Smart Stack is a recreation of the iOS Smart Stack for React Native. It provides a vertically swipeable stack of widgets with smooth transitions between widgets. You can read about how it was built here.

Smart Stack Demo

Installation

npm install react-native-widget-stack

Dependencies

This library needs these dependencies to be installed in your project before you can use it:

npm install react-native-gesture-handler react-native-reanimated react-native-reanimated-carousel expo-blur

NOTE: React Native Gesture Handler needs extra steps to finalize its installation, please follow their installation instructions. Please make sure to wrap your App with GestureHandlerRootView when you’ve upgraded to React Native Gesture Handler ^2.

React Native Reanimated v2 needs extra steps to finalize its installation, please follow their installation instructions.

Basic Usage

import { SmartStack } from 'react-native-widget-stack'; import { useSharedValue } from 'react-native-reanimated'; function App() { const heightProgress = useSharedValue(0); const widgets = [ { id: '1', name: 'Widget 1', color: '#007AFF'}, { id: '2', name: 'Widget 2', color: '#FF3B30'}, { id: '3', name: 'Widget 3', color: '#FF9500'}, ]; return ( <SmartStack widgets={widgets} heightProgress={heightProgress} /> ); }
Last updated on