Merge pull request #26259 from iRoachie/react-native-tab-view

(react-native-tab-view) Update types for 1.0

types/react-native-tab-view/index.d.ts

@@ -1,9 +1,9 @@
-// Type definitions for react-native-tab-view 0.0
+// Type definitions for react-native-tab-view 1.0
 // Project: https://github.com/react-native-community/react-native-tab-view
 // Definitions by: Kalle Ott <https://github.com/kaoDev>
+//                 Kyle Roach <https://github.com/iRoachie>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.6
-
 import { PureComponent, ReactNode, ComponentType } from 'react'
 import {
   Animated,
@@ -39,7 +39,7 @@ export type SceneRendererProps<T extends RouteBase = RouteBase> = {
   }
   navigationState: NavigationState<T>
   position: Animated.Value
-  jumpToIndex: (index: number) => void
+  jumpTo: (key: string) => void
   getLastPosition: () => number
   subscribe: (
     event: SubscriptionName,
@@ -75,24 +75,24 @@ export type PagerProps = {
   children?: ReactNode
 }
 
-export type TabViewAnimatedProps<
+export type TabViewProps<
   T extends RouteBase = RouteBase
 > = PagerProps & {
   navigationState: NavigationState<T>
+  tabBarPosition?: 'bottom' | 'top'
   onIndexChange: (index: number) => void
   onPositionChange?: (props: { value: number }) => void
   initialLayout?: Layout
   canJumpToTab?: (route: T) => boolean
   renderPager?: (props: SceneRendererProps<T> & PagerProps) => ReactNode
   renderScene: (props: SceneRendererProps<T> & Scene<T>) => ReactNode
-  renderHeader?: (props: SceneRendererProps<T>) => ReactNode
-  renderFooter?: (props: SceneRendererProps<T>) => ReactNode
+  renderTabBar?: (props: SceneRendererProps<T>) => ReactNode
   lazy?: boolean
   style?: StyleProp<ViewStyle>
 }
 
-export class TabViewAnimated<T extends Route = Route> extends PureComponent<
-  TabViewAnimatedProps<T>,
+export class TabView<T extends Route = Route> extends PureComponent<
+  TabViewProps<T>,
   any
 > {}
 
@@ -125,7 +125,7 @@ export type GestureState = {
 
 export type GestureHandler = (event: GestureEvent, state: GestureState) => void
 
-export type TabViewPagerPanProps<
+export type PagerPanProps<
   T extends RouteBase = RouteBase
 > = SceneRendererProps<T> & {
   configureTransition?: TransitionConfigurator
@@ -144,8 +144,8 @@ export type DefaultTransitionSpec = {
   friction: 35
 }
 
-export class TabViewPagerPan<T extends Route = Route> extends PureComponent<
-  TabViewPagerPanProps<T>,
+export class PagerPan<T extends Route = Route> extends PureComponent<
+  PagerPanProps<T>,
   void
 > {
   static defaultProps: {
@@ -168,7 +168,7 @@ export type ScrollEvent = {
   }
 }
 
-export type TabViewPagerScrollProps<
+export type PagerScrollProps<
   T extends RouteBase = RouteBase
 > = SceneRendererProps<T> & {
   animationEnabled?: boolean
@@ -176,8 +176,8 @@ export type TabViewPagerScrollProps<
   children?: ReactNode
 }
 
-export class TabViewPagerScroll<T extends Route = Route> extends PureComponent<
-  TabViewPagerScrollProps<T>,
+export class PagerScroll<T extends Route = Route> extends PureComponent<
+PagerScrollProps<T>,
   any
 > {}
 
@@ -190,7 +190,7 @@ export type PageScrollEvent = {
 
 export type PageScrollState = 'dragging' | 'settling' | 'idle'
 
-export type TabViewPagerAndroidProps<
+export type PagerAndroidProps<
   T extends RouteBase = RouteBase
 > = SceneRendererProps<T> & {
   animationEnabled?: boolean
@@ -198,8 +198,8 @@ export type TabViewPagerAndroidProps<
   children?: ReactNode
 }
 
-export class TabViewPagerAndroid<T extends Route = Route> extends PureComponent<
-  TabViewPagerAndroidProps<T>,
+export class PagerAndroid<T extends Route = Route> extends PureComponent<
+  PagerAndroidProps<T>,
   void
 > {}
 

types/react-native-tab-view/react-native-tab-view-tests.tsx

@@ -1,7 +1,7 @@
 import { PureComponent, Component } from 'react'
 import { View, StyleSheet } from 'react-native'
 import {
-  TabViewAnimated,
+  TabView,
   TabBar,
   SceneMap,
   TabBarProps,
@@ -31,7 +31,7 @@ class TabViewExample extends PureComponent {
 
   _handleIndexChange = (index: number) => this.setState({ index })
 
-  _renderHeader = (props: TabBarProps) => <TabBar {...props} />
+  _renderTabBar = (props: TabBarProps) => <TabBar {...props} />
 
   _renderScene = SceneMap({
     first: FirstRoute,
@@ -40,11 +40,12 @@ class TabViewExample extends PureComponent {
 
   render() {
     return (
-      <TabViewAnimated
+      <TabView
         style={styles.container}
         navigationState={this.state}
         renderScene={this._renderScene}
-        renderHeader={this._renderHeader}
+        renderTabBar={this._renderTabBar}
+        tabBarPosition="top"
         onIndexChange={this._handleIndexChange}
       />
     )

types/react-router-navigation-core/react-router-navigation-core-tests.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { TabStack, renderSubView } from "react-router-navigation-core";
 import { TabBarProps, TabProps } from "react-router-navigation";
-import { TabViewAnimated } from "react-native-tab-view";
+import { TabView } from "react-native-tab-view";
 
 type Props = TabBarProps & {
     children?: Array<React.ReactElement<TabProps>>;
@@ -24,7 +24,7 @@ class BottomNavigation extends React.Component<Props, State> {
                 render={props => {
                     const ownProps = { ...this.props, ...props };
                     return (
-                        <TabViewAnimated
+                        <TabView
                             {...props}
                             key={`transitioner_${this.state.key}`}
                             animationEnabled={false}
@@ -32,10 +32,11 @@ class BottomNavigation extends React.Component<Props, State> {
                                 sceneProps => <View />,
                                 ownProps
                             )}
-                            renderFooter={renderSubView(
+                            renderTabBar={renderSubView(
                                 sceneProps => <View />,
                                 ownProps
                             )}
+                            tabBarPosition="bottom"
                             renderScene={renderSubView(
                                 sceneProps => <View />,
                                 ownProps

types/react-router-navigation/index.d.ts

@@ -6,7 +6,6 @@
 
 import { Component, ReactNode, ReactElement, ComponentClass } from "react";
 import { StyleProp, ViewProps, ViewStyle, TextStyle } from "react-native";
-import { TabViewAnimated, TabViewPagerPan } from "react-native-tab-view";
 import { RouteProps } from "react-router-navigation-core";
 import {
     NavigationTransitionProps,