diff --git a/types/react-native-scrollable-tab-view/index.d.ts b/types/react-native-scrollable-tab-view/index.d.ts index 5844e31c90..b18ee374a9 100644 --- a/types/react-native-scrollable-tab-view/index.d.ts +++ b/types/react-native-scrollable-tab-view/index.d.ts @@ -1,107 +1,154 @@ -// Type definitions for react-native-scrollable-tab-view 0.7 -// Project: https://github.com/brentvatne/react-native-scrollable-tab-view#readme +// Type definitions for react-native-scrollable-tab-view 0.8 +// Project: https://github.com/skv-headless/react-native-scrollable-tab-view // Definitions by: CaiHuan +// Egor Shulga // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.6 import * as React from 'react'; -import { - Animated, - ViewStyle, - ScrollViewProperties -} from 'react-native'; - -export interface onChangeTabProperties { - // currentPage - i: number; - - // currentPage object - ref: JSX.Element; - - // previousPage - from: number; -} - -export interface renderTabBarProperties { - goToPage(pageNumber: number): void; - - tabs: JSX.Element; - - activeTab: number; - - scrollValue: Animated.Value; - - containerWidth: number; -} +import { Animated, ScrollViewProperties, ViewStyle, TextStyle } from 'react-native'; export interface ScrollableTabViewProperties extends React.Props { - /** - * tabBarPosition (String) Defaults to "top". - * "bottom" to position the tab bar below content. - * "overlayTop" or "overlayBottom" for a semitransparent tab bar that overlays content. Custom - * tab bars must consume a style prop on their outer element to support this feature: style={this.props.style}. - */ - tabBarPosition?: 'top' | 'bottom' | 'overlayTop' | 'overlayBottom'; + /** + * accept 1 argument props and should return a component + * to use as the tab bar. The component has goToPage, tabs, activeTab and ref added to the props, + * and should implement setAnimationValue to be able to animate itself along with the tab content. + * You can manually pass the props to the TabBar component. + */ + renderTabBar?: ((props: TabBarProps) => JSX.Element) | false; - /** - * (Integer) - the index of the initially selected tab, defaults to 0 === first tab - */ - initialPage?: number; + /** + * Defaults to "top". + * "bottom" to position the tab bar below content. + * "overlayTop" or "overlayBottom" for a semitransparent tab bar that overlays content. Custom + * tab bars must consume a style prop on their outer element to support this feature: style={this.props.style}. + */ + tabBarPosition?: 'top' | 'bottom' | 'overlayTop' | 'overlayBottom'; - /** - * (Integer) - set selected tab(can be buggy see - * https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126 - */ - page?: number; + /** + * function to call when tab changes, should accept 1 argument which is + * an Object containing two keys: i: the index of the tab that is selected, ref: the ref of the + * tab that is selected + */ + onChangeTab?(value: ChangeTabProperties): void; - /** - * onChangeTab (Function) - function to call when tab changes, should accept 1 argument which is - * an Object containing two keys: i: the index of the tab that is selected, ref: the ref of the - * tab that is selected - */ - onChangeTab?(value: onChangeTabProperties): void; + /** + * function to call when the pages are sliding, + * should accept 1 argument which is an Float number representing the page position in the slide frame. + */ + onScroll?(value: number): void; - /** - * onScroll (Function) - function to call when the pages are sliding, - * should accept 1 argument which is an Float number representing the page position in the slide frame. - */ - onScroll?(value: number): void; + /** + * disables horizontal dragging to scroll between tabs, default is false. + */ + locked?: boolean; - /** - * renderTabBar (Function:ReactComponent) - accept 1 argument props and should return a component - * to use as the tab bar. The component has goToPage, tabs, activeTab and ref added to the props, - * and should implement setAnimationValue to be able to animate itself along with the tab content. - * You can manually pass the props to the TabBar component. - */ - renderTabBar?(value: JSX.Element): JSX.Element; + /** + * the index of the initially selected tab, defaults to 0 === first tab + */ + initialPage?: number; - /** - * style (View.propTypes.style) - */ - style?: ViewStyle; + /** + * set selected tab(can be buggy see + * https://github.com/skv-headless/react-native-scrollable-tab-view/issues/126 + */ + page?: number; - /** - * contentProps (Object) - props that are applied to root ScrollView/ViewPagerAndroid. - * Note that overriding defaults set by the library may break functionality; see the source for details. - */ - contentProps?: ScrollViewProperties; + /** + * style of the default tab bar's underline + */ + tabBarUnderlineStyle?: ViewStyle; - /** - * scrollWithoutAnimation (Bool) - on tab press change tab without animation. - */ - scrollWithoutAnimation?: boolean; + /** + * color of the default tab bar's background, defaults to white + */ + tabBarBackgroundColor?: string; - /** - * locked (Bool) - disables horizontal dragging to scroll between tabs, default is false. - */ - locked?: boolean; + /** + * color of the default tab bar's text when active, defaults to navy + */ + tabBarActiveTextColor?: string; - /** - * prerenderingSiblingsNumber (Integer) - pre-render nearby # sibling, Infinity === render all - * the siblings, default to 0 === render current page. - */ - prerenderingSiblingsNumber?: number; + /** + * color of the default tab bar's text when inactive, defaults to black + */ + tabBarInactiveTextColor?: string; + + /** + * additional styles to the tab bar's text + */ + tabBarTextStyle?: TextStyle; + + /** + * style (View.propTypes.style) + */ + style?: ViewStyle; + + /** + * props that are applied to root ScrollView/ViewPagerAndroid. + * Note that overriding defaults set by the library may break functionality; see the source for details. + */ + contentProps?: ScrollViewProperties; + + /** + * on tab press change tab without animation. + */ + scrollWithoutAnimation?: boolean; + + /** + * pre-render nearby # sibling, Infinity === render all + * the siblings, default to 0 === render current page. + */ + prerenderingSiblingsNumber?: number; +} + +export type TabBarProps = T & { + goToPage?: (pageNumber: number) => void; + tabs?: JSX.Element[]; + activeTab?: number; + scrollValue?: Animated.Value; + containerWidth?: number; +}; + +export interface ChangeTabProperties { + // currentPage + i: number; + // currentPage object + ref: JSX.Element; + // previousPage + from: number; } export default class ScrollableTabView extends React.Component { } + +// Each top-level child component should have a tabLabel prop +// that can be used by the tab bar component to render out the labels. +export type TabProps = T & { + tabLabel: React.ReactType; +}; + +export interface DefaultTabBarProps { + backgroundColor?: string; + activeTextColor?: string; + inactiveTextColor?: string; + textStyle?: TextStyle; + tabStyle?: ViewStyle; + renderTab?: RenderTabProperties; + underlineStyle?: ViewStyle; +} + +export type RenderTabProperties = + (name: string, pageIndex: number, isTabActive: boolean, goToPage: (pageNumber: number) => void) => JSX.Element; + +export class DefaultTabBar extends React.Component> { +} + +export interface ScrollableTabBarProps extends DefaultTabBarProps { + scrollOffset?: number; + style?: ViewStyle; + tabsContainerStyle?: ViewStyle; +} + +export class ScrollableTabBar extends React.Component> { +} diff --git a/types/react-native-scrollable-tab-view/react-native-scrollable-tab-view-tests.tsx b/types/react-native-scrollable-tab-view/react-native-scrollable-tab-view-tests.tsx index 8463a7849c..3c5aecc379 100644 --- a/types/react-native-scrollable-tab-view/react-native-scrollable-tab-view-tests.tsx +++ b/types/react-native-scrollable-tab-view/react-native-scrollable-tab-view-tests.tsx @@ -1,44 +1,37 @@ import * as React from 'react'; -import { - Text -} from 'react-native'; -import ScrollableTabView from 'react-native-scrollable-tab-view'; +import { Text, TextStyle, View, ViewStyle } from 'react-native'; +import ScrollableTabView, { ScrollableTabBar, TabProps } from 'react-native-scrollable-tab-view'; -interface MyTextProperties extends React.Props { - tabLabel: string; - - text: string; -} -class MyText extends React.Component { - constructor(props: MyTextProperties) { - super(props); - } - - render(): JSX.Element { - return( - this.props.text - ); - } +interface MyTextProps { + style?: TextStyle; } -class ScrollableTabViewDemo extends React.Component { - constructor(props: ScrollableTabViewDemo) { - super(props); - } +const MyText: React.SFC> = (props) => ( + {props.children} +); - render(): JSX.Element { - return ( - - - - - - ); - } - - componentWillMount?(): void { - } - - componentWillUnmount?(): void { - } +interface MyViewProps { + style?: ViewStyle; } + +class MyView extends React.Component> { + render() { + return ( + {this.props.children} + ); + } +} + +const TabView1 = () => ( + } + > + My + favorite + project + favorite + project + +);