diff --git a/example/src/index.tsx b/example/src/index.tsx
index 1249409..c36aca6 100644
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -1,5 +1,5 @@
 // app entry
-import React, { useState } from 'react';
+import React, { useState, Children } from 'react';
 import {
   AppRegistry,
   Platform,
@@ -8,21 +8,22 @@ import {
   ViewStyle,
   StyleProp,
   Button,
+  SafeAreaView,
 } from 'react-native';
 import {
   Link,
   Navigator,
-  Tabs,
   Pager,
-  Stack,
   Tabbar,
   Tab,
+  Tabs,
+  Stack,
 } from 'react-navigation-library';
 
 import { FlatList, BorderlessButton } from 'react-native-gesture-handler';
 
 function PagerApp() {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(-1);
 
   function handleChange(index: number) {
     setActiveIndex(index);
@@ -30,34 +31,40 @@ function PagerApp() {
 
   return (
     <AppContainer>
-      <Pager index={activeIndex} onChange={handleChange}>
-        <Screen style={{ backgroundColor: 'aquamarine' }}>
+      <Pager
+        type="stack"
+        index={activeIndex}
+        onChange={handleChange}
+        width={150}
+        max={5}
+      >
+        <ScreenA style={{ backgroundColor: 'aquamarine' }} unmountOnExit>
           <Text>0</Text>
           <BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
             <Text>Next</Text>
           </BorderlessButton>
-        </Screen>
-        <Screen style={{ backgroundColor: 'orange' }}>
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'orange' }} unmountOnExit>
           <Text>1</Text>
           <BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
             <Text>Next</Text>
           </BorderlessButton>
-        </Screen>
-        <Screen style={{ backgroundColor: 'yellow' }}>
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'yellow' }}>
           <Text>2</Text>
           <BorderlessButton onPress={() => setActiveIndex(activeIndex + 1)}>
             <Text>Next</Text>
           </BorderlessButton>
-        </Screen>
-        <Screen style={{ backgroundColor: 'green' }}>
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'green' }}>
           <Text>3</Text>
-        </Screen>
-        <Screen style={{ backgroundColor: 'purple' }}>
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'purple' }}>
           <Text>4</Text>
-        </Screen>
+        </ScreenA>
       </Pager>
 
-      <View style={{ height: 50, width: '100%' }}>
+      <View style={{ height: 100, width: '100%' }}>
         <Button title="Inc" onPress={() => setActiveIndex(activeIndex + 1)} />
         <Button title="Dec" onPress={() => setActiveIndex(activeIndex - 1)} />
       </View>
@@ -65,29 +72,28 @@ function PagerApp() {
   );
 }
 
-function Screen({ children, style }) {
+function ScreenA({ children, style }) {
   return <View style={[styles.container, style]}>{children}</View>;
 }
 
 function ProfileStack({}) {
   return (
     <Navigator>
+      <SafeAreaView />
       <Stack>
-        <Screen style={{ backgroundColor: 'blue' }} path="/">
-          <Text>1</Text>
+        <ScreenA style={{ backgroundColor: 'blue' }} path="/">
           <Link to="two">
-            <Text>Two</Text>
+            <Text>Next</Text>
           </Link>
-        </Screen>
-        <Screen style={{ backgroundColor: 'red' }} path="two">
-          <Text>2</Text>
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'red' }} path="two">
           <Link to="../three">
-            <Text>Three</Text>
+            <Text>Next</Text>
           </Link>
-        </Screen>
-        <Screen style={{ backgroundColor: 'green' }} path="three">
+        </ScreenA>
+        <ScreenA style={{ backgroundColor: 'green' }} path="three">
           <Text>3</Text>
-        </Screen>
+        </ScreenA>
       </Stack>
     </Navigator>
   );
@@ -97,6 +103,7 @@ function App() {
   return (
     <AppContainer>
       <Navigator name="main-tabs" showLocationBar initialPath="/home">
+        <SafeAreaView />
         <Tabs>
           <Feed name="Home" path="home" />
           <Feed name="News" path="news" />
@@ -133,7 +140,7 @@ function Feed({ name }: any) {
     <Navigator name={name}>
       <Stack>
         <List items={items} />
-        <Profile path="/profile/:id" />
+        <Profile path="/profile/:id" unmountOnExit />
       </Stack>
     </Navigator>
   );
@@ -161,7 +168,12 @@ function Card({ item }) {
 
 function Profile({ item = {} }) {
   return (
-    <View style={{ flex: 1, backgroundColor: 'white' }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'white',
+      }}
+    >
       <Text>Item: {item.id}</Text>
       <ProfileStack />
     </View>
@@ -178,7 +190,7 @@ const containerStyle: StyleProp<ViewStyle> = Platform.select({
     overflow: 'hidden',
   },
   default: {
-    // top: 100,
+    // top: 50,
     // width: 150,
     // height: 150,
     // alignSelf: 'center',
@@ -195,6 +207,7 @@ const styles = {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    borderWidth: 1,
   },
 
   card: {
diff --git a/src/create-screen.tsx b/src/create-screen.tsx
index 506c65b..a5a5683 100644
--- a/src/create-screen.tsx
+++ b/src/create-screen.tsx
@@ -27,12 +27,10 @@ function createScreen(element: any, active: boolean, path: string) {
 
             return (
               <BasepathContext.Provider value={pathname}>
-                <CacheState
-                  active={active}
-                  state={navigation ? navigation.current.state : {}}
-                >
-                  {state => cloneElement(element, { ...props, ...state })}
-                </CacheState>
+                {cloneElement(element, {
+                  ...props,
+                  ...(navigation ? navigation.current.state : {}),
+                })}
               </BasepathContext.Provider>
             );
           }}
@@ -44,31 +42,6 @@ function createScreen(element: any, active: boolean, path: string) {
 
 export { createScreen };
 
-interface CacheStateProps {
-  children: any;
-  state: Object;
-  active: boolean;
-}
-
-class CacheState extends React.Component<CacheStateProps> {
-  state = this.props.state;
-
-  componentDidUpdate(prevProps: CacheStateProps) {
-    if (!prevProps.active && this.props.active) {
-      this.setState(this.props.state);
-    }
-  }
-
-  shouldComponentUpdate(nextProps: CacheStateProps) {
-    return nextProps.active || this.props.active;
-  }
-
-  render() {
-    const { children } = this.props;
-    return children(this.state);
-  }
-}
-
 let paramRe = /^:(.+)/;
 
 function getParams(
diff --git a/src/index.tsx b/src/index.tsx
index b6884ac..039921c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,8 @@
 export * from './navigation-provider';
 export * from './views';
-export * from './pager';
 export * from './navigator';
 export * from './tabs';
 export * from './stack';
-export * from './stacker';
 export * from './link';
+export * from './pager';
+export * from './screen';
diff --git a/src/link.tsx b/src/link.tsx
index 98309e4..a41c063 100644
--- a/src/link.tsx
+++ b/src/link.tsx
@@ -32,7 +32,10 @@ function Link({ to, state, children, style, options }: LinkProps) {
             }
 
             return (
-              <BorderlessButton onPress={() => navigate()} style={style}>
+              <BorderlessButton
+                onPress={() => navigate()}
+                style={[{ flex: 1 }, style]}
+              >
                 <View style={{ flex: 1 }} accessible>
                   {children}
                 </View>
diff --git a/src/navigator.tsx b/src/navigator.tsx
index b42f5ca..a93a4ce 100644
--- a/src/navigator.tsx
+++ b/src/navigator.tsx
@@ -5,16 +5,16 @@ import { Navigation } from './navigation';
 const NOOP = () => {};
 
 export interface NavigatorState {
-  activeIndex: number;
+  index: number;
   routes: string[];
-  handleChange: (nextIndex: number) => void;
+  onChange: (nextIndex: number) => void;
   setRoutes: (routes: string[]) => void;
 }
 
 export const NavigatorContext = createContext<NavigatorState>({
-  activeIndex: 0,
+  index: 0,
   routes: [],
-  handleChange: NOOP,
+  onChange: NOOP,
   setRoutes: NOOP,
 });
 
@@ -36,10 +36,10 @@ class NavigatorImpl extends Component<NavigatorProps> {
       },
     } = this.props;
 
-    const { activeIndex, routes } = this.state;
+    const { index, routes } = this.state;
 
     // is not focused so we shouldnt push this view
-    if (activeIndex !== -1 && activeIndex !== nextIndex) {
+    if (index !== -1 && index !== nextIndex) {
       const next = routes[nextIndex];
 
       if (next) {
@@ -73,26 +73,26 @@ class NavigatorImpl extends Component<NavigatorProps> {
   };
 
   state = {
-    activeIndex: -1,
-    handleChange: this.handleChange,
+    index: -1,
+    onChange: this.handleChange,
     routes: [],
     setRoutes: this.setRoutes,
   };
 
   componentDidUpdate(prevProps: NavigatorProps, prevState: NavigatorState) {
     if (prevProps.location !== this.props.location) {
-      const activeIndex = this.getActiveIndex(this.state.routes);
+      const index = this.getActiveIndex(this.state.routes);
 
-      if (activeIndex !== this.state.activeIndex) {
-        this.setState({ activeIndex });
+      if (index !== this.state.index) {
+        this.setState({ index });
       }
     }
 
     if (prevState.routes.length !== this.state.routes.length) {
-      const activeIndex = this.getActiveIndex(this.state.routes);
+      const index = this.getActiveIndex(this.state.routes);
 
-      if (activeIndex !== this.state.activeIndex) {
-        this.setState({ activeIndex });
+      if (index !== this.state.index) {
+        this.setState({ index });
       }
     }
   }
@@ -104,7 +104,7 @@ class NavigatorImpl extends Component<NavigatorProps> {
       <NavigatorContext.Provider value={this.state}>
         {typeof children === 'function'
           ? children({
-              activeIndex: this.state.activeIndex,
+              index: this.state.index,
               state: navigation.current.state,
               location,
             })
diff --git a/src/pager.tsx b/src/pager.tsx
index 77b75e3..a1615da 100644
--- a/src/pager.tsx
+++ b/src/pager.tsx
@@ -1,132 +1,73 @@
-import React, { Children } from 'react';
+import React, { Component, Children } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
 import {
-  State,
   PanGestureHandler,
+  State,
   PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
 
 const {
-  Value,
-  Clock,
+  event,
   block,
-  cond,
-  set,
-  and,
-  startClock,
-  stopClock,
-  clockRunning,
-  eq,
+  Value,
   divide,
-  multiply,
-  greaterOrEq,
   lessOrEq,
+  greaterOrEq,
+  cond,
+  eq,
   add,
-  neq,
-  event,
+  stopClock,
+  Clock,
+  set,
+  clockRunning,
   spring,
+  startClock,
+  multiply,
+  lessThan,
   onChange,
-  call,
   debug,
+  neq,
+  sub,
+  greaterThan,
+  call,
+  and,
   diffClamp,
-  min,
   max,
-  lessThan,
-  greaterThan,
+  min,
 } = Animated;
 
 const { width: screenWidth } = Dimensions.get('window');
 
-export interface PagerProps extends PanGestureHandlerProperties {
+export interface PagerProps {
   index: number;
-  width: number;
   onChange: (nextIndex: number) => void;
-  children: any;
+  width: number;
+  type: 'stack' | 'tabs';
+  max: number;
+  pan?: Partial<PanGestureHandlerProperties>;
 }
 
-class Pager extends React.Component<PagerProps> {
-  index = new Value(this.props.index);
-  nextIndex = new Value(-1);
-  minIndex = new Value(0);
-  maxIndex = new Value(Children.count(this.props.children) - 1);
-
-  clock = new Clock();
-  gesture = new Value(0);
-
-  vx = new Value(0);
+class Pager extends Component<PagerProps> {
   dragX = new Value(0);
+  releasedAt = new Value(0);
+  gestureState = new Value(0);
+  translateX = new Value(0);
+  minIndex = new Value(0);
+  maxIndex = new Value(this.props.max);
 
-  dx = new Value(this.props.width * this.props.index * -1);
-  translateX = new Value(0) as Animated.Node<number>;
+  index = new Value(this.props.index);
 
   static defaultProps = {
     width: screenWidth,
-  };
-
-  state = {
-    initialIndex: this.props.index,
-  };
-
-  runSpring = (
-    index: Animated.Node<number>,
-    current: Animated.Node<number>,
-    width: number
-  ) => {
-    const state = {
-      finished: new Value(0),
-      velocity: new Value(0),
-      position: new Value(0),
-      time: new Value(0),
-    };
-
-    const config = {
-      stiffness: 1000,
-      damping: 500,
-      mass: 3,
-      overshootClamping: false,
-      restDisplacementThreshold: 0.01,
-      restSpeedThreshold: 0.01,
-      toValue: new Value(0),
-    };
-
-    return block([
-      cond(
-        clockRunning(this.clock),
-        [0],
-        [
-          [
-            set(state.finished, 0),
-            set(state.time, 0),
-            set(state.velocity, 0),
-            set(state.position, current),
-            set(config.toValue, multiply(index, width, -1)),
-            set(this.index, index),
-            startClock(this.clock),
-          ],
-        ]
-      ),
-      spring(this.clock, state, config),
-      cond(state.finished, [
-        set(this.dragX, 0),
-        set(this.vx, 0),
-        stopClock(this.clock),
-      ]),
-
-      state.position,
-    ]);
+    max: 1,
   };
 
   constructor(props: PagerProps) {
     super(props);
 
-    const active = new Value(0);
-
-    const offset = new Value(0);
-
     const percentDragged = divide(this.dragX, props.width);
     const threshold = 0.2;
-
     const isRight = lessOrEq(percentDragged, -threshold);
     const isLeft = greaterOrEq(percentDragged, threshold);
 
@@ -135,57 +76,32 @@ class Pager extends React.Component<PagerProps> {
 
     this.translateX = block([
       onChange(this.index, [
+        set(snapIndex, this.index),
         call([this.index], ([index]) => this.props.onChange(index)),
       ]),
 
-      onChange(this.nextIndex, [
-        cond(neq(this.nextIndex, -1), [
-          cond(clockRunning(this.clock), stopClock(this.clock)),
-          set(this.index, this.nextIndex),
-          set(this.nextIndex, -1),
-          set(snapIndex, this.index),
-        ]),
-      ]),
-
-      // onChange(snapIndex, [
-      //   cond(lessThan(snapIndex, this.minIndex), [
-      //     call([snapIndex], ([snapIndex]) => this.props.onExit(snapIndex)),
-      //   ]),
-
-      //   cond(greaterOrEq(snapIndex, this.maxIndex), [
-      //     call([snapIndex], ([snapIndex]) => this.props.onExit(snapIndex)),
-      //   ]),
-      // ]),
-
       cond(
-        eq(this.gesture, State.ACTIVE),
+        eq(this.gestureState, State.ACTIVE),
+
         [
-          // this is key -- set the starting position of screen when starting to swipe
-          // https://github.com/react-native-community/react-native-tab-view/blob/master/src/Pager.tsx#L507
-          cond(active, [0], [set(offset, this.dx)]),
-          set(active, 1),
-          set(this.dx, add(offset, this.dragX)),
           set(
             snapIndex,
             add(this.index, cond(isRight, 1, cond(isLeft, -1, 0)))
           ),
-          stopClock(this.clock),
+          this.dragX,
         ],
-        [
-          set(active, 0),
-          set(this.dx, this.runSpring(clampedSnap, this.dx, props.width)),
-        ]
+        [set(this.index, clampedSnap), set(this.dragX, 0)]
       ),
-      this.dx,
-    ]);
+
+      this.dragX,
+    ]) as any;
   }
 
-  handlePan = event(
+  handleGesture = event(
     [
       {
         nativeEvent: {
           translationX: this.dragX,
-          velocityX: this.vx,
         },
       },
     ],
@@ -196,74 +112,175 @@ class Pager extends React.Component<PagerProps> {
     [
       {
         nativeEvent: {
-          state: this.gesture,
+          state: this.gestureState,
         },
       },
     ],
-    { useNativeDriver: true }
+    {
+      useNativeDriver: true,
+    }
   );
 
-  componentDidUpdate(prevProps: PagerProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.index !== this.props.index) {
-      // prevents infinite loop between pages on rapid index changes
-      // theres some weird behaviour when setting values imperatively
       requestAnimationFrame(() => {
-        this.nextIndex.setValue(this.props.index as any);
+        this.index.setValue(this.props.index as any);
       });
     }
 
-    if (prevProps.children.length !== this.props.children.length) {
+    if (prevProps.max !== this.props.max) {
       requestAnimationFrame(() => {
-        this.maxIndex.setValue(Children.count(this.props.children) - 1);
+        this.maxIndex.setValue(this.props.max);
       });
     }
   }
 
   render() {
-    const { children, width, ...rest } = this.props;
-    const { initialIndex } = this.state;
-
+    const { children, width, type, pan } = this.props;
     return (
       <PanGestureHandler
-        {...rest}
-        onGestureEvent={this.handlePan}
+        {...pan}
+        onGestureEvent={this.handleGesture}
         onHandlerStateChange={this.handleStateChange}
       >
         <Animated.View style={{ flex: 1, overflow: 'hidden' }}>
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [{ translateX: this.translateX }] as any,
-            }}
-          >
-            {Children.map(children, (element: any, index: number) => (
-              <Page index={index} width={width} initial={initialIndex}>
-                {element}
-              </Page>
-            ))}
-          </Animated.View>
+          {Children.map(children, (element, index) => (
+            <PagerView
+              index={index}
+              initialIndex={this.props.index}
+              activeIndex={this.index}
+              width={width}
+              gestureState={this.gestureState}
+              dragX={this.translateX}
+              type={type}
+            >
+              {element}
+            </PagerView>
+          ))}
         </Animated.View>
       </PanGestureHandler>
     );
   }
 }
 
-function Page({ children, index, width, initial }: any) {
-  const translateX = multiply(index, width);
-  // on mount the last child appears first because of absolute positioning
-  const zIndex = index === 0 ? 2 : 1;
-
-  return (
-    <Animated.View
-      style={{
-        ...StyleSheet.absoluteFillObject,
-        zIndex,
-        transform: [{ translateX }] as any,
-      }}
-    >
-      {children}
-    </Animated.View>
+function getToValue(index, activeIndex, width) {
+  const difference = index - activeIndex;
+  const clamped = Math.max(-0.3, Math.min(difference, 1));
+  const toValue = width * clamped;
+  return toValue;
+}
+
+class PagerView extends Component<any> {
+  clock = new Clock();
+
+  dx = new Value(
+    getToValue(this.props.index, this.props.initialIndex, this.props.width)
   );
+
+  translateX = new Value(0);
+
+  static defaultProps = {
+    type: 'stack',
+  };
+
+  constructor(props) {
+    super(props);
+
+    if (props.type === 'tabs') {
+      const difference = sub(this.props.index, this.props.activeIndex);
+      const clamped = max(-1, min(difference, 1));
+
+      const absoluteOffset = multiply(difference, this.props.width);
+      const toValue = multiply(this.props.width, clamped);
+
+      this.translateX = block([
+        onChange(this.props.dragX, []),
+
+        cond(
+          eq(this.props.gestureState, State.ACTIVE),
+          [set(this.dx, add(absoluteOffset, this.props.dragX))],
+          [this.runSpring(this.clock, toValue)]
+        ),
+
+        this.dx,
+      ]) as any;
+    } else {
+      const difference = sub(this.props.index, this.props.activeIndex);
+      const clamped = max(-0.3, min(difference, 1));
+      const toValue = multiply(this.props.width, clamped);
+
+      this.translateX = block([
+        onChange(this.props.dragX, []),
+
+        cond(
+          and(eq(difference, 0), eq(this.props.gestureState, State.ACTIVE)),
+          [set(this.dx, this.props.dragX)],
+          [this.runSpring(this.clock, toValue)]
+        ),
+
+        this.dx,
+      ]) as any;
+    }
+  }
+
+  runSpring = (clock: any, toValue: any) => {
+    const state = {
+      finished: new Value(0),
+      velocity: new Value(0),
+      position: this.dx,
+      time: new Value(0),
+    };
+
+    const config = {
+      stiffness: 1000,
+      damping: 500,
+      mass: 3,
+      overshootClamping: false,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+      toValue: new Value(0),
+    };
+
+    return block([
+      cond(
+        clockRunning(clock),
+        [
+          cond(neq(config.toValue, toValue), [
+            set(config.toValue, toValue),
+            set(state.time, 0),
+            set(state.finished, 0),
+          ]),
+        ],
+        [
+          [
+            set(state.finished, 0),
+            set(state.time, 0),
+            set(config.toValue, toValue),
+            startClock(clock),
+          ],
+        ]
+      ),
+
+      spring(clock, state, config),
+
+      cond(state.finished, [set(this.dx, config.toValue), stopClock(clock)]),
+    ]);
+  };
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <Animated.View
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX: this.translateX as any }],
+        }}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
 }
 
 export { Pager };
diff --git a/src/screen.tsx b/src/screen.tsx
index 2d664bb..d663ca2 100644
--- a/src/screen.tsx
+++ b/src/screen.tsx
@@ -1,4 +1,4 @@
-import React, { Component, cloneElement } from 'react';
+import React, { Component, cloneElement, Children } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
 
 interface ScreenProps {
@@ -8,15 +8,39 @@ interface ScreenProps {
 }
 
 class Screen extends Component<ScreenProps> {
-  shouldComponentUpdate(nextProps: ScreenProps) {
-    return this.props.active || nextProps.active;
+  state = {
+    alive: this.props.active,
+  };
+
+  timerRef: any = null;
+
+  child = Children.only(this.props.children);
+
+  componentDidUpdate() {
+    if (!this.state.alive && this.props.active) {
+      this.setState({ alive: true });
+    }
+
+    if (!this.props.active && this.child.props.unmountOnExit) {
+      if (this.state.alive) {
+        this.timerRef = setTimeout(() => {
+          this.setState({ alive: false });
+        }, 500);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timerRef);
   }
 
   render() {
-    const { children, active, style } = this.props;
+    const { active } = this.props;
+    const { alive } = this.state;
+
     return (
-      <View style={[style || { flex: 1 }]}>
-        {cloneElement(children, { active })}
+      <View style={[{ flex: 1 }, this.child.props.style]}>
+        {alive ? cloneElement(this.child, { active }) : null}
       </View>
     );
   }
diff --git a/src/stack.tsx b/src/stack.tsx
index b0de0e3..f432e99 100644
--- a/src/stack.tsx
+++ b/src/stack.tsx
@@ -1,15 +1,29 @@
 import React, { Component, Children } from 'react';
-import { Stacker } from './stacker';
 import { NavigatorContext, NavigatorState } from './navigator';
 import { createScreen } from './create-screen';
 import { Screen } from './screen';
 import { PanGestureHandlerProperties } from 'react-native-gesture-handler';
 import { StyleProp, ViewStyle, View } from 'react-native';
+import { Pager } from './pager';
 
-type Props = StackProps & NavigatorState;
+interface ScreenContainerProps {
+  onChange: (index: number) => void;
+  index: number;
+  defaultIndex: number;
+  children: any;
+  width?: number;
+  pan: Partial<PanGestureHandlerProperties>;
+  style?: StyleProp<ViewStyle>;
+}
+class StackImpl extends React.Component<ScreenContainerProps & NavigatorState> {
+  static defaultProps = {
+    defaultIndex: 0,
+    pan: {
+      enabled: true,
+    },
+  };
 
-class StackImpl extends Component<Props> {
-  constructor(props: Props) {
+  constructor(props: ScreenContainerProps & NavigatorState) {
     super(props);
 
     const routes = Children.map(
@@ -20,7 +34,24 @@ class StackImpl extends Component<Props> {
     props.setRoutes(routes);
   }
 
-  componentDidUpdate(prevProps: Props) {
+  state = {
+    rendered: [this.props.defaultIndex],
+  };
+
+  componentDidUpdate(prevProps: ScreenContainerProps) {
+    if (prevProps.index !== this.props.index) {
+      if (this.props.index !== -1) {
+        this.setState((state: any) => {
+          return {
+            rendered: [
+              ...state.rendered.filter(i => i !== this.props.index),
+              this.props.index,
+            ],
+          };
+        });
+      }
+    }
+
     if (prevProps.children.length !== this.props.children.length) {
       const routes = Children.map(
         this.props.children,
@@ -32,31 +63,34 @@ class StackImpl extends Component<Props> {
   }
 
   render() {
-    const {
-      children,
-      activeIndex,
-      handleChange,
-      routes,
-      defaultIndex = 0,
-      style,
-      ...rest
-    } = this.props;
+    const { children, index, style, pan, ...rest } = this.props;
+
+    if (children.length === 0) {
+      return null;
+    }
 
-    const index = activeIndex < 0 ? defaultIndex : activeIndex;
+    const { rendered } = this.state;
+    const lastMatch = rendered[rendered.length - 1];
+    const match = index > -1 ? index : lastMatch;
 
     return (
-      <View style={[style || { flex: 1 }]}>
-        <Stacker index={index} onChange={handleChange} {...rest}>
-          {Children.map(children, (element: any, index: number) => {
-            const active = index === activeIndex;
-
-            return (
-              <Screen active={active}>
-                {createScreen(element, active, element.props.path)}
-              </Screen>
-            );
+      <View style={[{ flex: 1 }, style]}>
+        <Pager
+          {...rest}
+          pan={{
+            ...pan,
+            enabled: pan.enabled && match !== 0,
+          }}
+          index={match}
+          type="stack"
+          max={Children.count(children) - 1}
+        >
+          {Children.map(children, (element: any, i: number) => {
+            const active = i <= match;
+            const screen = createScreen(element, active, element.props.path);
+            return <Screen active={active}>{screen}</Screen>;
           })}
-        </Stacker>
+        </Pager>
       </View>
     );
   }
@@ -66,6 +100,8 @@ interface StackProps extends PanGestureHandlerProperties {
   children: any;
   defaultIndex?: number;
   style?: StyleProp<ViewStyle>;
+  pan?: Partial<PanGestureHandlerProperties>;
+  width?: number;
 }
 
 function Stack({ children, ...rest }: StackProps) {
diff --git a/src/stacker.tsx b/src/stacker.tsx
deleted file mode 100644
index ec93fd5..0000000
--- a/src/stacker.tsx
+++ /dev/null
@@ -1,342 +0,0 @@
-import React, { Component, Children } from 'react';
-import { StyleSheet, Dimensions } from 'react-native';
-import Animated from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  State,
-  PanGestureHandlerProperties,
-} from 'react-native-gesture-handler';
-
-const {
-  event,
-  block,
-  Value,
-  divide,
-  lessOrEq,
-  greaterOrEq,
-  cond,
-  eq,
-  add,
-  stopClock,
-  Clock,
-  set,
-  clockRunning,
-  spring,
-  startClock,
-  multiply,
-  lessThan,
-  onChange,
-  debug,
-  neq,
-  sub,
-  greaterThan,
-  call,
-  and,
-} = Animated;
-
-const { width: screenWidth } = Dimensions.get('window');
-
-interface StackerProps {
-  index: number;
-  onChange: (nextIndex: number) => void;
-  width: number;
-}
-
-class Stacker extends Component<StackerProps & PanGestureHandlerProperties> {
-  dragX = new Value(0);
-  vx = new Value(0);
-  gesture = new Value(0);
-  dx = new Value(0);
-  clock = new Clock();
-
-  nextIndex = new Value(-1);
-
-  index = new Value(this.props.index);
-  translateX = new Value(0) as Animated.Node<number>;
-
-  static defaultProps = {
-    width: screenWidth,
-    enabled: true,
-  };
-
-  runSpring = (index: any) => {
-    const state = {
-      finished: new Value(0),
-      velocity: new Value(0),
-      position: this.dragX,
-      time: new Value(0),
-    };
-
-    const config = {
-      stiffness: 1000,
-      damping: 500,
-      mass: 3,
-      overshootClamping: false,
-      restDisplacementThreshold: 0.01,
-      restSpeedThreshold: 0.01,
-      toValue: new Value(0),
-    };
-
-    return block([
-      cond(
-        clockRunning(this.clock),
-        [0],
-        [
-          [
-            set(state.finished, 0),
-            set(state.time, 0),
-            set(state.velocity, this.vx),
-            set(config.toValue, 0),
-            set(this.index, index),
-            startClock(this.clock),
-          ],
-        ]
-      ),
-      spring(this.clock, state, config),
-      cond(state.finished, [
-        set(this.dragX, 0),
-        set(this.vx, 0),
-        stopClock(this.clock),
-      ]),
-
-      state.position,
-    ]);
-  };
-
-  constructor(props) {
-    super(props);
-
-    const percentDragged = divide(this.dragX, props.width);
-    const threshold = 0.2;
-
-    const isRight = lessOrEq(percentDragged, -threshold);
-    const isLeft = greaterOrEq(percentDragged, threshold);
-
-    const snapIndex = new Value(this.props.index);
-
-    this.translateX = block([
-      onChange(this.index, [
-        call([this.index], ([index]) => this.props.onChange(index)),
-      ]),
-
-      onChange(this.nextIndex, [
-        cond(and(neq(this.nextIndex, -1), neq(this.nextIndex, this.index)), [
-          cond(clockRunning(this.clock), stopClock(this.clock)),
-          set(this.dragX, 0),
-          set(this.index, this.nextIndex),
-          set(this.nextIndex, -1),
-          set(snapIndex, this.index),
-        ]),
-      ]),
-
-      cond(
-        eq(this.gesture, State.ACTIVE),
-        [
-          cond(
-            greaterThan(this.dragX, 0),
-            [
-              set(this.dx, this.dragX),
-              set(
-                snapIndex,
-                add(this.index, cond(isRight, 1, cond(isLeft, -1, 0)))
-              ),
-              stopClock(this.clock),
-            ],
-            [set(this.dragX, 0)]
-          ),
-        ],
-
-        set(this.dx, this.runSpring(snapIndex))
-      ),
-
-      this.dx,
-    ]);
-  }
-
-  handlePan = event(
-    [
-      {
-        nativeEvent: {
-          translationX: (x: any) =>
-            block([cond(greaterThan(x, 0), set(this.dragX, x))]),
-          velocityX: this.vx,
-        },
-      },
-    ],
-    { useNativeDriver: true }
-  );
-
-  handleStateChange = event(
-    [
-      {
-        nativeEvent: {
-          state: this.gesture,
-        },
-      },
-    ],
-    { useNativeDriver: true }
-  );
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.index !== this.props.index) {
-      requestAnimationFrame(() => {
-        this.nextIndex.setValue(this.props.index as any);
-      });
-    }
-  }
-
-  render() {
-    const { index, children, width, enabled, ...rest } = this.props;
-
-    return (
-      <PanGestureHandler
-        {...rest}
-        enabled={enabled && index > 0}
-        onGestureEvent={this.handlePan}
-        onHandlerStateChange={this.handleStateChange}
-      >
-        <Animated.View style={{ flex: 1, overflow: 'hidden' }}>
-          <Animated.View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              transform: [{ translateX: this.translateX }] as any,
-            }}
-          >
-            {Children.map(children, (element: any, index: number) => {
-              return (
-                <StackScreen
-                  activeIndex={this.index}
-                  index={index}
-                  width={width}
-                  dx={this.translateX}
-                >
-                  {element}
-                </StackScreen>
-              );
-            })}
-          </Animated.View>
-        </Animated.View>
-      </PanGestureHandler>
-    );
-  }
-}
-
-function getOffset(index: any, activeIndex: any) {
-  if (index < activeIndex) {
-    return -0.3;
-  }
-
-  if (index === activeIndex) {
-    return 0;
-  }
-
-  return 1;
-}
-
-interface StackScreenProps {
-  activeIndex: Animated.Value<number>;
-  index: number;
-  width: number;
-  dx: Animated.Node<number>;
-}
-
-class StackScreen extends Component<StackScreenProps> {
-  translateX = new Value(0);
-  index = new Value(this.props.index);
-  clock = new Clock();
-  offset = new Value(
-    getOffset(this.props.index, this.props.activeIndex) * this.props.width
-  );
-
-  left = new Value(-0.3);
-  right = new Value(1);
-
-  constructor(props) {
-    super(props);
-
-    this.translateX = this.computeTranslateX(
-      props.activeIndex,
-      props.dx
-    ) as any;
-  }
-
-  computeTranslateX = (activeIndex: any, dx: any) => {
-    const delta = sub(this.index, activeIndex);
-
-    const clamped = cond(
-      lessThan(delta, 0),
-      this.left,
-      cond(eq(delta, 0), 0, this.right)
-    );
-
-    const offset = multiply(clamped, this.props.width);
-
-    const state = {
-      finished: new Value(0),
-      velocity: new Value(0),
-      position: new Value(0),
-      time: new Value(0),
-    };
-
-    const config = {
-      stiffness: 1000,
-      damping: 500,
-      mass: 3,
-      overshootClamping: false,
-      restDisplacementThreshold: 0.01,
-      restSpeedThreshold: 0.01,
-      toValue: new Value(0),
-    };
-
-    return block([
-      cond(
-        clockRunning(this.clock),
-        [
-          cond(neq(config.toValue, offset), [
-            set(state.finished, 0),
-            set(state.time, 0),
-            set(config.toValue, offset),
-          ]),
-        ],
-        [
-          set(state.finished, 0),
-          set(state.time, 0),
-          set(state.position, this.offset),
-          set(config.toValue, offset),
-          startClock(this.clock),
-        ]
-      ),
-
-      spring(this.clock, state, config),
-
-      cond(state.finished, [
-        set(this.offset, state.position),
-        stopClock(this.clock),
-      ]),
-
-      // required to compute offsets from change in activeIndex
-      onChange(dx, []),
-
-      cond(
-        lessThan(this.offset, 0),
-        sub(state.position, this.props.dx),
-        state.position
-      ),
-    ]);
-  };
-
-  render() {
-    return (
-      <Animated.View
-        style={{
-          ...StyleSheet.absoluteFillObject,
-          transform: [{ translateX: this.translateX }] as any,
-        }}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-}
-
-export { Stacker };
diff --git a/src/tabs.tsx b/src/tabs.tsx
index fa0b7e0..c5d766a 100644
--- a/src/tabs.tsx
+++ b/src/tabs.tsx
@@ -1,15 +1,34 @@
 import React, { Component, Children } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
-import { Pager, PagerProps } from './pager';
 import { NavigatorContext, NavigatorState } from './navigator';
 import { createScreen } from './create-screen';
 import { Screen } from './screen';
 import { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import { Pager } from './pager';
 
-type Props = TabsProps & Partial<PagerProps> & NavigatorState;
+interface ScreenContainerProps {
+  onChange: (index: number) => void;
+  index: number;
+  defaultIndex: number;
+  children: any;
+  width?: number;
+  pan: Partial<PanGestureHandlerProperties>;
+  style?: StyleProp<ViewStyle>;
+}
+
+class TabsImpl extends React.Component<ScreenContainerProps & NavigatorState> {
+  static defaultProps = {
+    defaultIndex: 0,
+    pan: {
+      enabled: true,
+    },
+  };
+
+  state = {
+    rendered: [this.props.defaultIndex],
+  };
 
-class TabsImpl extends Component<Props> {
-  constructor(props: Props) {
+  constructor(props: ScreenContainerProps & NavigatorState) {
     super(props);
 
     const routes = Children.map(
@@ -20,7 +39,20 @@ class TabsImpl extends Component<Props> {
     props.setRoutes(routes);
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: ScreenContainerProps) {
+    if (prevProps.index !== this.props.index) {
+      if (this.props.index !== -1) {
+        this.setState((state: any) => {
+          return {
+            rendered: [
+              ...state.rendered.filter(i => i !== this.props.index),
+              this.props.index,
+            ],
+          };
+        });
+      }
+    }
+
     if (prevProps.children.length !== this.props.children.length) {
       const routes = Children.map(
         this.props.children,
@@ -32,32 +64,29 @@ class TabsImpl extends Component<Props> {
   }
 
   render() {
-    const {
-      style,
-      children,
-      activeIndex,
-      handleChange,
-      routes,
-      defaultIndex = 0,
-      ...rest
-    } = this.props;
-
-    const index = activeIndex < 0 ? defaultIndex : activeIndex;
+    const { children, index, ...rest } = this.props;
+    if (children.length === 0) {
+      return null;
+    }
+
+    const { rendered } = this.state;
+    const lastMatch = rendered[rendered.length - 1];
+    const match = index > -1 ? index : lastMatch;
 
     return (
-      <View style={[style || { flex: 1 }]}>
-        <Pager {...rest} index={index} onChange={handleChange}>
-          {Children.map(children, (element: any, index: number) => {
-            const active = index === activeIndex;
-
-            return (
-              <Screen active={active}>
-                {createScreen(element, active, element.props.path || '/')}
-              </Screen>
-            );
-          })}
-        </Pager>
-      </View>
+      <Pager
+        {...rest}
+        index={match}
+        type="tabs"
+        max={Children.count(children) - 1}
+      >
+        {Children.map(children, (element: any, i: number) => {
+          const active = i === match;
+
+          const screen = createScreen(element, active, element.props.path);
+          return <Screen active={active}>{screen}</Screen>;
+        })}
+      </Pager>
     );
   }
 }
@@ -66,6 +95,8 @@ interface TabsProps extends PanGestureHandlerProperties {
   children: any;
   defaultIndex?: number;
   style?: StyleProp<ViewStyle>;
+  pan?: Partial<PanGestureHandlerProperties>;
+  width?: number;
 }
 
 function Tabs({ children, ...rest }: TabsProps) {
diff --git a/src/views.tsx b/src/views.tsx
index 6703e10..524777f 100644
--- a/src/views.tsx
+++ b/src/views.tsx
@@ -21,9 +21,7 @@ function HeadersImpl({ activeIndex, children }: HeadersProps) {
 function Headers({ children }: { children: any }) {
   return (
     <NavigatorContext.Consumer>
-      {({ activeIndex }) => (
-        <HeadersImpl activeIndex={activeIndex}>{children}</HeadersImpl>
-      )}
+      {({ index }) => <HeadersImpl activeIndex={index}>{children}</HeadersImpl>}
     </NavigatorContext.Consumer>
   );
 }
@@ -58,8 +56,8 @@ function TabbarImpl({ activeIndex, style, children }: any) {
 function Tabbar({ children, ...rest }: HeaderProps) {
   return (
     <NavigatorContext.Consumer>
-      {({ activeIndex }) => (
-        <TabbarImpl activeIndex={activeIndex} {...rest}>
+      {({ index }) => (
+        <TabbarImpl activeIndex={index} {...rest}>
           {children}
         </TabbarImpl>
       )}
diff --git a/todo.txt b/todo.txt
index b1909fb..2683e26 100644
--- a/todo.txt
+++ b/todo.txt
@@ -39,8 +39,10 @@
 -- finding most recent match w/ tabs as default behaviour -- optional?
 -- route component for dynamic matches (e.g a header) -- or match component with a path as a prop 
 -- relative links in a navigator should be more intuitive 
--- shouldn't animate to initial route, just directly set offset values, same goes for intermediate screens
--- navigation consumer component to set screens and whatnot -- repeated code in tabs / stack
--- shared pager component 
--- stack animation bug
--- control mounting -- render ajacent, last match if unmounting / -1
\ No newline at end of file
+-- restore routes api to navigator?
+-- control mounting by screen and tabs/stack -- render ajacent, last match if unmounting / -1
+-- fix styles on tabbar / header, tabbar is in header sometimes, link component style
+-- intermediate screens should not animate
+-- turn off animations?
+-- navigator should have its own state shared between child screens 
+-- basepath / navigate fn  should be scoped by navigator 
\ No newline at end of file