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 .
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