feat: add prop to access position value outside the tabview. closes #781

 (#782)

README.md

@@ -193,6 +193,7 @@ Each scene receives the following props:
 
 - `route`: the current route rendered by the component
 - `jumpTo`: method to jump to other tabs, takes a `route.key` as it's argument
+- `position`: animated node which represents the current position
 
 The `jumpTo` method can be used to navigate to other tabs programmatically:
 
@@ -322,6 +323,23 @@ Object containing the initial height and width of the screens. Passing this will
 { width: Dimensions.get('window').width }}
 ```
 
+##### `position`
+
+Animated value to listen to the position updates. The passed position value will be kept in sync with the current position of the tabs. It's useful for accessing the animated value outside the tab view.
+
+```js
+position = new Animated.Value(0);
+
+render() {
+  return (
+    <TabView
+      position={this.position}
+      ...
+    />
+  );
+}
+```
+
 ##### `sceneContainerStyle`
 
 Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping:

src/SceneMap.tsx

@@ -12,12 +12,13 @@ class SceneComponent<
 export default function SceneMap<T extends any>(scenes: {
   [key: string]: React.ComponentType<T>;
 }) {
-  return ({ route, jumpTo }: T) => (
+  return ({ route, jumpTo, position }: T) => (
     <SceneComponent
       key={route.key}
       component={scenes[route.key]}
       route={route}
       jumpTo={jumpTo}
+      position={position}
     />
   );
 }

src/TabView.tsx

@@ -6,7 +6,7 @@ import {
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
-
+import Animated from 'react-native-reanimated';
 import TabBar, { Props as TabBarProps } from './TabBar';
 import Pager from './Pager';
 import SceneView from './SceneView';
@@ -19,6 +19,7 @@ import {
 } from './types';
 
 type Props<T extends Route> = PagerCommonProps & {
+  position?: Animated.Value<number>;
   onIndexChange: (index: number) => void;
   navigationState: NavigationState<T>;
   renderScene: (
@@ -92,6 +93,7 @@ export default class TabView<T extends Route> extends React.Component<
 
   render() {
     const {
+      position: positionListener,
       onSwipeStart,
       onSwipeEnd,
       navigationState,
@@ -139,6 +141,11 @@ export default class TabView<T extends Route> extends React.Component<
 
             return (
               <React.Fragment>
+                {positionListener ? (
+                  <Animated.Code
+                    exec={Animated.set(positionListener, position)}
+                  />
+                ) : null}
                 {tabBarPosition === 'top' &&
                   renderTabBar({
                     ...sceneRendererProps,