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

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 { View, StyleSheet } from 'react-native';
import { SmartStack } from 'react-native-widget-stack';
 
export default function App() {
  const widgets = [
    { id: '1', name: 'Maps', color: 'blue' },
    { id: '2', name: 'Weather', color: 'red' },
    { id: '3', name: 'News', color: 'green' },
  ];
 
  return (
    <View style={styles.container}>
      <SmartStack widgets={widgets} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 50,
  },
});