diff --git a/dist/src/basic/Switch.js b/dist/src/basic/Switch.js index c26bb519c..36e7c2925 100644 --- a/dist/src/basic/Switch.js +++ b/dist/src/basic/Switch.js @@ -12,7 +12,7 @@ return _react2.default.createElement(_reactNative.Switch,_extends({ref:function Switch.propTypes=_extends({}, -Switch.propTypes); +_reactNative.Switch.propTypes); var StyledSwitch=(0,_nativeBaseShoutemTheme.connectStyle)("NativeBase.Switch",{},_mapPropsToStyleNames2.default)(Switch);exports. diff --git a/dist/src/basic/Switch.js.map b/dist/src/basic/Switch.js.map index 458eec221..4831eb431 100644 --- a/dist/src/basic/Switch.js.map +++ b/dist/src/basic/Switch.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../../src/basic/Switch.js"],"names":["Switch","_root","c","props","Component","propTypes","StyledSwitch","mapPropsToStyleNames"],"mappings":"u1BAAA,4B;AACA,qC;AACA;;AAEA;AACA,mE;;AAEMA,M;AACI;AACR,MAAO,+BAAC,mBAAD,WAAU,IAAK,sBAAM,QAAKC,KAAL,CAAaC,CAAnB,EAAf,EAA0C,KAAKC,KAA/C,mDAAP;AACA,C,oBAHmBC,gB;;;AAMrBJ,OAAOK,SAAP;AACIL,OAAOK,SADX;;;AAIA,GAAMC,cAAe,yCAAa,mBAAb,CAAkC,EAAlC,CAAsCC,8BAAtC,EAA4DP,MAA5D,CAArB,C;;AAEyBA,M,CAAhBM,Y","file":"Switch.js","sourcesContent":["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Switch as SwitchNB } from \"react-native\";\n\nimport { connectStyle } from \"native-base-shoutem-theme\";\nimport mapPropsToStyleNames from \"../utils/mapPropsToStyleNames\";\n\nclass Switch extends Component {\n\trender() {\n\t\treturn (this._root = c)} {...this.props} />;\n\t}\n}\n\nSwitch.propTypes = {\n\t...Switch.propTypes,\n};\n\nconst StyledSwitch = connectStyle(\"NativeBase.Switch\", {}, mapPropsToStyleNames)(Switch);\n\nexport { StyledSwitch as Switch };\n"]} \ No newline at end of file +{"version":3,"sources":["../../../src/basic/Switch.js"],"names":["Switch","_root","c","props","Component","propTypes","SwitchNB","StyledSwitch","mapPropsToStyleNames"],"mappings":"u1BAAA,4B;AACA,qC;AACA;;AAEA;AACA,mE;;AAEMA,M;AACI;AACR,MAAO,+BAAC,mBAAD,WAAU,IAAK,sBAAM,QAAKC,KAAL,CAAaC,CAAnB,EAAf,EAA0C,KAAKC,KAA/C,mDAAP;AACA,C,oBAHmBC,gB;;;AAMrBJ,OAAOK,SAAP;AACIC,oBAASD,SADb;;;AAIA,GAAME,cAAe,yCAAa,mBAAb,CAAkC,EAAlC,CAAsCC,8BAAtC,EAA4DR,MAA5D,CAArB,C;;AAEyBA,M,CAAhBO,Y","file":"Switch.js","sourcesContent":["import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Switch as SwitchNB } from \"react-native\";\n\nimport { connectStyle } from \"native-base-shoutem-theme\";\nimport mapPropsToStyleNames from \"../utils/mapPropsToStyleNames\";\n\nclass Switch extends Component {\n\trender() {\n\t\treturn (this._root = c)} {...this.props} />;\n\t}\n}\n\nSwitch.propTypes = {\n\t...SwitchNB.propTypes,\n};\n\nconst StyledSwitch = connectStyle(\"NativeBase.Switch\", {}, mapPropsToStyleNames)(Switch);\n\nexport { StyledSwitch as Switch };\n"]} \ No newline at end of file diff --git a/dist/src/utils/computeProps.d.ts b/dist/src/utils/computeProps.d.ts new file mode 100644 index 000000000..61fcb6709 --- /dev/null +++ b/dist/src/utils/computeProps.d.ts @@ -0,0 +1,3 @@ +declare module 'native-base/dist/src/utils/computeProps' { + export default function (incomingProps: PT, defaultProps: Partial): PT; +} \ No newline at end of file diff --git a/index.d.ts b/index.d.ts index 01bcb055d..b722c6bfe 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,49 +1,82 @@ declare module "native-base" { import * as React from "react"; import * as ReactNative from "react-native"; - - namespace NativeBase { - interface Text extends ReactNative.TextProperties { + import * as RNVIcon from "react-native-vector-icons/Icon"; + import RNDrawer, { DrawerProperties } from "react-native-drawer"; + import { KeyboardAwareScrollViewProps } from "react-native-keyboard-aware-scroll-view"; + import { HeaderBackButton } from "react-navigation"; + export * from 'react-native-easy-grid'; + + export namespace NativeBase { + interface Text extends ReactNative.TextProps { note?: boolean; uppercase?: boolean; } - interface Switch extends ReactNative.SwitchProperties {} + interface Switch extends ReactNative.SwitchProps { } - interface View extends ReactNative.ViewProperties { + interface View extends ReactNative.ViewProps { padder?: boolean; } - interface Picker extends ReactNative.PickerProperties { + interface PickerButtonRenderConfig { + onPress(): void; + text: string; + picker: Picker; + selectedItem: any; + } + interface Picker extends ReactNative.PickerProps, ReactNative.ViewProps { + /** ios only */ iosHeader?: string; - inlineLabel?: boolean; + /** ios only */ headerBackButtonText?: string; + /** ios only */ placeholder?: string; - placeholderStyle?: ReactNative.TextStyle; - textStyle?: ReactNative.TextStyle; - style?: ReactNative.TextStyle; + /** ios only */ + placeholderStyle?: ReactNative.StyleProp; + /** ios only */ + textStyle?: ReactNative.StyleProp; + /** ios only */ iosIcon?: React.ReactElement; + /** ios only */ note?: boolean; + /** ios only */ placeholderIconColor?: string; - itemTextStyle?: ReactNative.TextStyle; - headerStyle?: ReactNative.ViewStyle; - headerTitleStyle?: ReactNative.TextStyle; - headerBackButtonTextStyle?: ReactNative.TextStyle; - renderHeader?: (backAction: any) => React.ReactElement; + /** ios only */ + itemTextStyle?: ReactNative.StyleProp; + /** ios only */ + headerStyle?: ReactNative.StyleProp; + /** ios only */ + headerTitleStyle?: ReactNative.StyleProp; + /** ios only */ + headerBackButtonTextStyle?: ReactNative.StyleProp; + /** ios only */ + renderHeader?: (backAction: () => void) => React.ReactElement; + /** ios only */ + renderButton?: (config: PickerButtonRenderConfig) => React.ReactElement; + /** ios only */ + headerBackButtonStyle?: ReactNative.StyleProp; + /** ios only - for ReactNative.ModalProps */ + supportedOrientations?: ( + | "portrait" + | "portrait-upside-down" + | "landscape" + | "landscape-left" + | "landscape-right")[]; } - interface H1 extends ReactNative.TextProperties {} + interface H1 extends ReactNative.TextProps { } /** - * see Widget Text.js - */ - interface H2 extends ReactNative.TextProperties {} + * see Widget Text.js + */ + interface H2 extends ReactNative.TextProps { } /** - * see Widget Text.js - */ - interface H3 extends ReactNative.TextProperties {} + * see Widget Text.js + */ + interface H3 extends ReactNative.TextProps { } /** - * see Widget Text.js - */ + * see Widget Text.js + */ interface BsStyle { success?: boolean; primary?: boolean; @@ -52,51 +85,53 @@ declare module "native-base" { info?: boolean; } - interface Badge extends ReactNative.ViewProperties, BsStyle {} - /** - * see Widget CardSwiper.js - */ - interface CardSwiper {} + interface Badge extends ReactNative.ViewProps, BsStyle { + textStyle?: ReactNative.StyleProp; + } /** - * see Widget DeckSwiper.js - */ - interface DeckSwiper { + * see Widget DeckSwiper.js + */ + interface DeckSwiper extends ReactNative.ViewProps { /** - * Array - */ - dataSource?: Array; + * Array + */ + dataSource?: Array; /** - * Direction of iteration for elements - * Default: iterates in backward direction - */ - onSwipeLeft?: Function; + * Direction of iteration for elements + * Default: iterates in backward direction + */ + onSwipeLeft?: (rowData: RowData) => void; /** - * Direction of iteration for elements - * Default: iterates in forward direction - */ - onSwipeRight?: Function; + * Direction of iteration for elements + * Default: iterates in forward direction + */ + onSwipeRight?: (rowData: RowData) => void; /** - * Takes a data entry from the data source and should return a renderable component to be rendered as the row. - */ - renderItem?: Function; + * Takes a data entry from the data source and should return a renderable component to be rendered as the row. + */ + renderItem?: (rowData: RowData) => React.ReactElement; + looping?: boolean; + onSwiping?: (direction: "left" | "right" | null, distance: number) => void; + renderEmpty?: () => React.ReactElement; + renderBottom?: (rowData: RowData) => React.ReactElement; + renderTop?: (rowData: RowData) => React.ReactElement; } /** - * see Widget Header.js - */ - interface Header { + * see Widget Header.js + */ + interface Header extends ReactNative.ViewProps { /** - * Prop to be used with
component to have Search bar onto the Header section of your screen. - */ + * Prop to be used with
component to have Search bar onto the Header section of your screen. + */ searchBar?: boolean; /** - * Wraps the search bar with predefined border options. - * Default: regular - */ + * Wraps the search bar with predefined border options. + * Default: regular + */ rounded?: boolean; - style?: ReactNative.ViewStyle | Array; /** - * It is advisable to use hasTabs prop with Header while using Tab - */ + * It is advisable to use hasTabs prop with Header while using Tab + */ hasTabs?: boolean; noShadow?: boolean; hasSubtitle?: boolean; @@ -106,156 +141,110 @@ declare module "native-base" { hasSegment?: boolean; } - interface Left { - style?: ReactNative.ViewStyle | Array; - } + interface Left extends ReactNative.ViewProps { } - interface Body { - style?: ReactNative.ViewStyle | Array; - } + interface Body extends ReactNative.ViewProps { } - interface Right { - style?: ReactNative.ViewStyle | Array; - } + interface Right extends ReactNative.ViewProps { } /** - * see Widget FooterTab.js - */ - interface FooterTab { - style?: ReactNative.ViewStyle | Array; - } + * see Widget FooterTab.js + */ + interface FooterTab extends ReactNative.ViewProps { } /** - * see Widget Footer.js - */ - interface Footer { - style?: ReactNative.ViewStyle | Array; - } + * see Widget Footer.js + */ + interface Footer extends ReactNative.ViewProps { } /** - * see Widget Title.js - */ - interface Title { - style?: ReactNative.TextStyle; - } + * see Widget Title.js + */ + interface Title extends ReactNative.TextProps { } /** - * see Widget Subtitle/index.js - */ - interface Subtitle { - style?: ReactNative.ViewStyle | Array; - } + * see Widget Subtitle/index.js + */ + interface Subtitle extends ReactNative.TextProps { } /** - * see Widget Container.js - */ - interface Container { - /** - * The theme prop can be applied to any component of NativeBase. - */ - theme?: Object; - style?: ReactNative.ViewStyle | Array; - } + * see Widget Container.js + */ + interface Container extends ReactNative.ViewProps { } /** - * see Widget Content.js - */ - interface Content { - /** - * The theme prop can be applied to any component of NativeBase. - */ - refreshing?: boolean; - refreshControl?: object; - theme?: Object; + * see Widget Content.js + */ + interface Content extends KeyboardAwareScrollViewProps { padder?: boolean; disableKBDismissScroll?: boolean; - enableResetScrollToCoords?: boolean; - contentOffset?: Object; - scrollEnabled?: boolean; - style?: ReactNative.ViewStyle | Array; - contentContainerStyle?: ReactNative.ViewStyle | Array; } /** - * see Widget Button.js - */ - interface Button extends ReactNative.TouchableOpacityProperties, BsStyle { - /** - * Defines button style - */ - style?: ReactNative.ViewStyle | Array; - /** - * Defines button text style - */ - textStyle?: ReactNative.TextStyle; + * see Widget Button.js + */ + interface Button extends ReactNative.TouchableOpacityProps, BsStyle { /** - * Block level button - */ + * Block level button + */ block?: boolean; /** - * Vertical button - */ + * Vertical button (changes flex-direction to column for contents) + */ vertical?: boolean; /** - * Button with badges + * Button with badges (as used in Footer with Badge) */ badge?: boolean; - //primary?: boolean, /** - * Gives you effect of Icon-buttons. - * To have button with transparent background, include this prop. - */ + * Gives you effect of Icon-buttons. + * To have button with transparent background, include this prop. + */ transparent?: boolean; - //success?: boolean, - //danger?: boolean, - // warning?: boolean, - //info?: boolean, color?: string; /** - * Applies outline button style. - */ + * Applies outline button style. + */ bordered?: boolean; /** - * Renders button with slightly round shaped edges. - */ + * Renders button with slightly round shaped edges. + */ rounded?: boolean; /** - * For large size button - */ + * For large size button + */ large?: boolean; /** - * For small size button - */ + * For small size button + */ small?: boolean; /** - * Used for Icon alignment. - * Aligns icon to the left in button. - * By default, icons are aligned to the left in button. - */ + * Used for Icon alignment. + * Aligns icon to the left in button. + * By default, icons are aligned to the left in button. + */ iconLeft?: boolean; /** - * Used for Icon alignment. - * Aligns icon to the right in button. - */ + * Used for Icon alignment. + * Aligns icon to the right in button. + */ iconRight?: boolean; /** - * Disables onPress option for button - */ + * Disables onPress option for button + */ disabled?: boolean; active?: boolean; - inputButton?: boolean; full?: boolean; light?: boolean; dark?: boolean; /** - * [android] colored ripple effect - */ + * [android] colored ripple effect + */ androidRippleColor?: string; /** - * Segments - */ + * Used for styling when buttons are part of a Segment + */ first?: boolean; last?: boolean; } /** - - * see Widget List.js - */ - interface List extends ReactListViewProperties { + * see Widget List.js + */ + interface List extends ReactListViewProperties { listBorderColor?: string; listDividerBg?: string; listNoteColor?: string; @@ -263,67 +252,73 @@ declare module "native-base" { listNoteSize?: number; inset?: boolean; /** - * Array of data chunks to render iteratively. - */ - dataArray?: Array; + * Array of data chunks to render iteratively. + */ + dataArray?: Array; renderRow?: ( - rowData: any, + rowData: RowData, sectionID: string | number, rowID: string | number, highlightRow?: boolean ) => React.ReactElement; - dataSource?:ReactNative.ListViewDataSource; - disableLeftSwipe?:boolean; - disableRightSwipe?:boolean; - rightOpenValue?:number; - leftOpenValue?: number; - renderRightHiddenRow?:( - rowData: any, - sectionID: string | number, - rowID: string | number, - rowMap?: any - ) => React.ReactElement; - renderLeftHiddenRow?:( - rowData: any, - sectionID: string | number, - rowID: string | number, - rowMap?: any - ) => React.ReactElement; - rowHasChanged?: (r1: any, r2: any) => boolean; - onRowOpen?: Function; - onRowClose?: Function; - onRowDidOpen?: Function; - onRowDidClose?: Function; - swipeToOpenPercent?: number; - closeOnRowBeginSwipe?: boolean; + dataSource?: ReactNative.ListViewDataSource; + disableLeftSwipe?: boolean; + disableRightSwipe?: boolean; + rightOpenValue?: number; + leftOpenValue?: number; + renderRightHiddenRow?: ( + rowData: RowData, + sectionID: string | number, + rowID: string | number, + rowMap?: any + ) => React.ReactElement; + renderLeftHiddenRow?: ( + rowData: RowData, + sectionID: string | number, + rowID: string | number, + rowMap?: any + ) => React.ReactElement; + rowHasChanged?: (r1: any, r2: any) => boolean; + onRowOpen?: (secId: string | number, rowId: string | number, rowMap: { [key: string]: any }) => void; + onRowClose?: (secId: string | number, rowId: string | number, rowMap: { [key: string]: any }) => void; + onRowDidOpen?: (secId: string | number, rowId: string | number, rowMap: { [key: string]: any }) => void; + onRowDidClose?: (secId: string | number, rowId: string | number, rowMap: { [key: string]: any }) => void; + swipeToOpenPercent?: number; + closeOnRowBeginSwipe?: boolean; + closeOnScroll?: boolean; + closeOnRowPress?: boolean; + recalculateHiddenLayout?: boolean; + previewFirstRow?: boolean; + directionalDistanceChangeThreshold?: number; + listViewRef?: (ref: ReactNative.ListView | null) => void; } /** - * see Widget ListItem.js - */ - interface ListItem extends ReactNative.TouchableOpacityProperties { + * see Widget ListItem.js + */ + interface ListItem extends ReactNative.TouchableHighlightProps { header?: boolean; noBorder?: boolean; /** - * Aligns icon to the right of ListItem. - * Default: false - */ + * Aligns icon to the right of ListItem. + * Default: false + */ iconRight?: boolean; /** - * Aligns icon to the left of ListItem. - * Default: true - */ + * Aligns icon to the left of ListItem. + * Default: true + */ iconLeft?: boolean; icon?: boolean; avatar?: boolean; thumbnail?: boolean; button?: boolean; /** - * Helps to organize and group the list items. - */ + * Helps to organize and group the list items. + */ itemDivider?: boolean; /** - * Sub caption for List Item. - */ + * Sub caption for List Item. + */ note?: string; itemHeader?: boolean; @@ -331,113 +326,123 @@ declare module "native-base" { last?: boolean; selected?: boolean; /** - * [android] colored ripple effect - */ + * [android] colored ripple effect + */ androidRippleColor?: string; + searchBar?: boolean; } - interface Separator { + interface Separator extends ReactNative.ViewProps { bordered?: boolean; - style?: ReactNative.ViewStyle | Array; + noTopBorder?: boolean; + group?: boolean; + noBottomBorder?: boolean; } /** - * see Widget CardItem.js - */ - interface CardItem extends ReactNative.TouchableOpacityProperties { + * see Widget CardItem.js + */ + interface CardItemSharedProps { header?: boolean; footer?: boolean; cardBody?: boolean; - button?: boolean; bordered?: boolean; } + interface CardItemWithButton extends CardItemSharedProps, ReactNative.TouchableOpacityProps { + button: true; + } + interface CardItemWithoutButton extends CardItemSharedProps, ReactNative.ViewProps { + button?: false; + } + type CardItem = CardItemWithButton | CardItemWithoutButton; + /** - * Override React ListViewProperties - */ + * Override React ListViewProperties + */ interface ReactListViewProperties - extends ReactNative.ScrollViewProperties, - React.Props { + extends ReactNative.ScrollViewProps, + React.Props { /** - * Flag indicating whether empty section headers should be rendered. - * In the future release empty section headers will be rendered by - * default, and the flag will be deprecated. If empty sections are not - * desired to be rendered their indices should be excluded from - * sectionID object. - */ + * Flag indicating whether empty section headers should be rendered. + * In the future release empty section headers will be rendered by + * default, and the flag will be deprecated. If empty sections are not + * desired to be rendered their indices should be excluded from + * sectionID object. + */ enableEmptySections?: boolean; /** - * How many rows to render on initial component mount. Use this to make - * it so that the first screen worth of data apears at one time instead of - * over the course of multiple frames. - */ + * How many rows to render on initial component mount. Use this to make + * it so that the first screen worth of data apears at one time instead of + * over the course of multiple frames. + */ initialListSize?: number; /** - * (visibleRows, changedRows) => void - * - * Called when the set of visible rows changes. `visibleRows` maps - * { sectionID: { rowID: true }} for all the visible rows, and - * `changedRows` maps { sectionID: { rowID: true | false }} for the rows - * that have changed their visibility, with true indicating visible, and - * false indicating the view has moved out of view. - */ + * (visibleRows, changedRows) => void + * + * Called when the set of visible rows changes. `visibleRows` maps + * { sectionID: { rowID: true }} for all the visible rows, and + * `changedRows` maps { sectionID: { rowID: true | false }} for the rows + * that have changed their visibility, with true indicating visible, and + * false indicating the view has moved out of view. + */ onChangeVisibleRows?: ( visibleRows: Array<{ [sectionId: string]: { [rowID: string]: boolean } }>, changedRows: Array<{ [sectionId: string]: { [rowID: string]: boolean } }> ) => void; /** - * Called when all rows have been rendered and the list has been scrolled - * to within onEndReachedThreshold of the bottom. The native scroll - * event is provided. - */ + * Called when all rows have been rendered and the list has been scrolled + * to within onEndReachedThreshold of the bottom. The native scroll + * event is provided. + */ onEndReached?: () => void; /** - * Threshold in pixels for onEndReached. - */ + * Threshold in pixels for onEndReached. + */ onEndReachedThreshold?: number; /** - * Number of rows to render per event loop. - */ + * Number of rows to render per event loop. + */ pageSize?: number; /** - * A performance optimization for improving scroll perf of - * large lists, used in conjunction with overflow: 'hidden' on the row - * containers. Use at your own risk. - */ + * A performance optimization for improving scroll perf of + * large lists, used in conjunction with overflow: 'hidden' on the row + * containers. Use at your own risk. + */ removeClippedSubviews?: boolean; /** - * () => renderable - * - * The header and footer are always rendered (if these props are provided) - * on every render pass. If they are expensive to re-render, wrap them - * in StaticContainer or other mechanism as appropriate. Footer is always - * at the bottom of the list, and header at the top, on every render pass. - */ + * () => renderable + * + * The header and footer are always rendered (if these props are provided) + * on every render pass. If they are expensive to re-render, wrap them + * in StaticContainer or other mechanism as appropriate. Footer is always + * at the bottom of the list, and header at the top, on every render pass. + */ renderFooter?: () => React.ReactElement; /** - * () => renderable - * - * The header and footer are always rendered (if these props are provided) - * on every render pass. If they are expensive to re-render, wrap them - * in StaticContainer or other mechanism as appropriate. Footer is always - * at the bottom of the list, and header at the top, on every render pass. - */ + * () => renderable + * + * The header and footer are always rendered (if these props are provided) + * on every render pass. If they are expensive to re-render, wrap them + * in StaticContainer or other mechanism as appropriate. Footer is always + * at the bottom of the list, and header at the top, on every render pass. + */ renderHeader?: () => React.ReactElement; /** - * (rowData, sectionID, rowID) => renderable - * Takes a data entry from the data source and its ids and should return - * a renderable component to be rendered as the row. By default the data - * is exactly what was put into the data source, but it's also possible to - * provide custom extractors. - */ + * (rowData, sectionID, rowID) => renderable + * Takes a data entry from the data source and its ids and should return + * a renderable component to be rendered as the row. By default the data + * is exactly what was put into the data source, but it's also possible to + * provide custom extractors. + */ renderRow?: ( rowData: any, sectionID: string | number, @@ -446,30 +451,30 @@ declare module "native-base" { ) => React.ReactElement; /** - * A function that returns the scrollable component in which the list rows are rendered. - * Defaults to returning a ScrollView with the given props. - */ + * A function that returns the scrollable component in which the list rows are rendered. + * Defaults to returning a ScrollView with the given props. + */ renderScrollComponent?: ( - props: ReactNative.ScrollViewProperties - ) => React.ReactElement; + props: ReactNative.ScrollViewProps + ) => React.ReactElement; /** - * (sectionData, sectionID) => renderable - * - * If provided, a sticky header is rendered for this section. The sticky - * behavior means that it will scroll with the content at the top of the - * section until it reaches the top of the screen, at which point it will - * stick to the top until it is pushed off the screen by the next section - * header. - */ + * (sectionData, sectionID) => renderable + * + * If provided, a sticky header is rendered for this section. The sticky + * behavior means that it will scroll with the content at the top of the + * section until it reaches the top of the screen, at which point it will + * stick to the top until it is pushed off the screen by the next section + * header. + */ renderSectionHeader?: (sectionData: any, sectionId: string | number) => React.ReactElement; /** - * (sectionID, rowID, adjacentRowHighlighted) => renderable - * If provided, a renderable component to be rendered as the separator below each row - * but not the last row if there is a section header below. - * Take a sectionID and rowID of the row above and whether its adjacent row is highlighted. - */ + * (sectionID, rowID, adjacentRowHighlighted) => renderable + * If provided, a renderable component to be rendered as the separator below each row + * but not the last row if there is a section header below. + * Take a sectionID and rowID of the row above and whether its adjacent row is highlighted. + */ renderSeparator?: ( sectionID: string | number, rowID: string | number, @@ -477,298 +482,253 @@ declare module "native-base" { ) => React.ReactElement; /** - * How early to start rendering rows before they come on screen, in - * pixels. - */ + * How early to start rendering rows before they come on screen, in + * pixels. + */ scrollRenderAheadDistance?: number; /** - * An array of child indices determining which children get docked to the - * top of the screen when scrolling. For example, passing - * `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the - * top of the scroll view. This property is not supported in conjunction - * with `horizontal={true}`. - * @platform ios - */ + * An array of child indices determining which children get docked to the + * top of the screen when scrolling. For example, passing + * `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the + * top of the scroll view. This property is not supported in conjunction + * with `horizontal={true}`. + * @platform ios + */ stickyHeaderIndices?: number[]; - ref?: React.Ref; + ref?: React.Ref; } /** - * see Widget Card.js - */ - interface Card extends ReactNative.ViewProperties { - dataArray?: Array; - style?: ReactNative.ViewStyle | Array; - ref?: React.Ref; + * see Widget Card.js + */ + interface Card + extends Pick> { + dataArray?: Array; transparent?: boolean; noShadow?: boolean; - - // Adding ListView properties - // dataSource?: ReactNative.ListViewDataSource; - enableEmptySections?: boolean; - initialListSize?: number; - onChangeVisibleRows?: ( - visibleRows: Array<{ [sectionId: string]: { [rowID: string]: boolean } }>, - changedRows: Array<{ [sectionId: string]: { [rowID: string]: boolean } }> - ) => void; - onEndReached?: () => void; - onEndReachedThreshold?: number; - pageSize?: number; - removeClippedSubviews?: boolean; - renderFooter?: () => React.ReactElement; - renderHeader?: () => React.ReactElement; renderRow?: ( - rowData: any, + rowData: RowData, sectionID: string | number, rowID: string | number, highlightRow?: boolean ) => React.ReactElement; - renderScrollComponent?: (props: ReactNative.ScrollViewProperties) => React.ReactElement; - renderSectionHeader?: (sectionData: any, sectionId: string | number) => React.ReactElement; - renderSeparator?: ( - sectionID: string | number, - rowID: string | number, - adjacentRowHighlighted?: boolean - ) => React.ReactElement; - scrollRenderAheadDistance?: number; - stickyHeaderIndices?: number[]; - stickySectionHeadersEnabled?: boolean; - } - /** - * react-native-easy-grid - */ - interface Grid extends ReactNative.ViewProperties {} - interface Row extends ReactNative.ViewProperties { - size?: number; - } - interface Col extends ReactNative.ViewProperties { - size?: number; } /** - * see Widget InputGroup.js - */ - interface InputGroup extends ReactNative.ViewProperties { - /** - * Wraps the textbox with predefined border options. - * Default: underline - */ - borderType?: "rounded" | "regular" | "underline"; - toolbar?: boolean; - atoolbar?: boolean; - /** - * If true, the icon in the input text box appears to the right. - * Default: true - */ - iconRight?: boolean; + * see Widget InputGroup.js + */ + interface InputGroup extends ReactNative.ViewProps { /** - * The border color of textbox for valid input. - */ + * The border color of textbox for valid input. + */ success?: boolean; /** - * The border color of textbox for invalid input. - */ + * The border color of textbox for invalid input. + */ error?: boolean; /** - * Disables inputting data. - */ + * Disables inputting data. + */ disabled?: boolean; regular?: boolean; underline?: boolean; rounded?: boolean; } /** - * see Widget Input.js - */ - interface Input extends ReactNative.TextInputProperties { - label?: string; + * see Widget Input.js + */ + interface Input extends ReactNative.TextInputProps { /** - * Label placed to the left of the input element. - * When the user enters text, the label does not hide. - * This can also be used along with placeholder. - */ - inlineLabel?: boolean; - /** - * Places the label on top of the input element which appears like a stack. - * This can also be used along with placeholder. - */ - stackedLabel?: boolean; - /** - * Disables inputting data. - */ + * Disables inputting data. + */ disabled?: boolean; getRef?: React.Ref; } /** - * see Widget Textarea.js - */ - interface Textarea extends ReactNative.TextInputProperties { + * see Widget Textarea.js + */ + interface Textarea extends ReactNative.TextInputProps { rowSpan: number; + bordered?: boolean; + underline?: boolean; } - interface Label { - style?: ReactNative.TextStyle; + interface Label extends ReactNative.TextProps { } + + type IconType = "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"; + interface IconNB extends RNVIcon.IconProps { + type?: IconType; } /** - * see Widget Icon.js - */ - interface Icon { - name: string; - type?: "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial" ; - // TODO position attribute of ReactNative.FlexStyle hasn't another position values without "absolute" and "relative" - style?: any; - onPress?: (e?: any) => any; + * see Widget Icon/index.js + */ + type Icon = Pick> & { + type?: IconType; active?: boolean; + name?: string; ios?: string; android?: string; - color?: string; - fontSize?: number; - } + }; + /** - * see Widget Icon.js - */ - interface Thumbnail extends ReactNative.ImageProperties { + * see Widget Icon.js + */ + interface Thumbnail extends ReactNative.ImageProps { /** - * Dimension of thumbnail. - * Default: 30 - */ + * Dimension of thumbnail. + * Default: 30 + */ size?: number; /** - * Represents shape of thumbnail. - * By default thumbnail is circle in shape. - */ + * Represents shape of thumbnail. + * By default thumbnail is circle in shape. + */ circular?: boolean; /** - * Represents shape of thumbnail. - * By default thumbnail is circle in shape. - */ + * Represents shape of thumbnail. + * By default thumbnail is circle in shape. + */ square?: boolean; small?: boolean; large?: boolean; } /** - * see Widget Spinner.js - */ - interface Spinner extends ReactNative.ActivityIndicatorProperties { + * see Widget Spinner.js + */ + type Spinner = (ReactNative.ActivityIndicatorProps | ReactNative.ActivityIndicatorIOSProps) & { + /** + * Use the inverseSpinnerColor instead of the defaultSpinnerColor + */ inverse?: boolean; - } + }; /** - * see Widget CheckBox.js - */ - interface CheckBox { + * see Widget CheckBox.js + */ + interface CheckBox extends ReactNative.TouchableOpacityProps { checked?: boolean; color?: string; - onPress?: Function; - style?: ReactNative.ViewStyle | Array; } /** - * see Widget CheckBox.js - */ - interface Radio extends ReactNative.TouchableOpacityProperties { + * see Widget CheckBox.js + */ + interface Radio extends ReactNative.TouchableOpacityProps { selected?: boolean; + standardStyle?: boolean; } /** - * see Widget ProgressBar.js - */ - interface ProgressBar { - progress?: number; - color?: string; - inverse?: boolean; - } - /** - * vendor react-native-drawer - */ - interface DrawerStyles { - drawer?: ReactNative.ViewStyle | Array; - main?: ReactNative.ViewStyle | Array; - drawerOverlay?: ReactNative.ViewStyle | Array; - mainOverlay?: ReactNative.ViewStyle | Array; + * vendor react-native-drawer + */ + interface Drawer extends DrawerProperties { } + interface ScrollableTab { + goToPage?: (pageNumber: number) => void; + activeTab?: number; + tabs?: Array; + backgroundColor?: string; + activeTextColor?: string; + inactiveTextColor?: string; + scrollOffset?: number; + style?: ReactNative.StyleProp; + tabStyle?: ReactNative.StyleProp[]; + tabsContainerStyle?: ReactNative.StyleProp; + renderTab?: ( + name: string, + page: number, + isTabActive: boolean, + goToPage: ((pageNumber: number) => void) | undefined, + measureTab: (page: number, event: ReactNative.LayoutChangeEvent) => void, + tabStyle: ReactNative.StyleProp, + activeTabStyle: ReactNative.StyleProp, + textStyle: ReactNative.StyleProp, + activeTextStyle: ReactNative.StyleProp, + tabHeaderStyle: ReactNative.StyleProp + ) => React.ReactElement; + underlineStyle?: ReactNative.StyleProp; + onScroll?: (event?: ReactNative.NativeSyntheticEvent) => void; + activeTabStyle?: ReactNative.StyleProp[]; + tabHeaderStyle?: ReactNative.StyleProp[]; + scrollValue?: ReactNative.Animated.Value; } - interface Drawer { - acceptDoubleTap?: boolean; - acceptPan?: boolean; - acceptTap?: boolean; - captureGestures?: boolean; - children?: any; - open?: boolean; - closedDrawerOffset?: number; - content?: any; - deviceScreen?: ReactNative.ScaledSize; - disabled?: boolean; - initializeOpen?: boolean; - negotiatePan?: boolean; - onClose?: Function; - onCloseStart?: Function; - onOpen?: Function; - onOpenStart?: Function; - openDrawerOffset?: number; - openDrawerThreshold?: number; - panCloseMask?: number; - panOpenMask?: number; - panStartCompensation?: boolean; - relativeDrag?: boolean; - side?: "left" | "right"; - styles?: DrawerStyles; - tapToClose?: boolean; - tweenDuration?: number; - tweenEasing?: string; - tweenHandler?: Function; - type?: "overlay" | "static" | "displace"; + + interface RenderTabBarProps { + goToPage: (pageNumber: number) => void; + /** + * Items coming from Tab children + */ + tabs: React.ReactChild[]; + tabStyle: ReactNative.StyleProp[]; + activeTabStyle: ReactNative.StyleProp[]; + textStyle: ReactNative.StyleProp[]; + activeTextStyle: ReactNative.StyleProp[]; + tabHeaderStyle: ReactNative.StyleProp[]; + activeTab: number; + scrollValue: ReactNative.Animated.Value; + containerWidth: number; } - interface ScrollableTab { - goToPage?: Function; - activeTab?: number; - tabs?: Array; - backgroundColor?: string; - activeTextColor?: string; - inactiveTextColor?: string; - scrollOffset?: number; - style?: ReactNative.ViewStyle; - tabStyle?: ReactNative.ViewStyle; - tabsContainerStyle?: ReactNative.ViewStyle; - renderTab?: Function; - underlineStyle?: ReactNative.ViewStyle; - onScroll?: Function; - } /** - * see Widget Tabs.js - */ + * see Widget Tabs.js + */ interface Tabs { - renderTabBar?: Function; - tabBarPosition?: "top" | "bottom"; - edgeHitWidth?: number; - springTension?: number; - springFriction?: number; - onChangeTab?: Function; + renderTabBar?: false | ((props: RenderTabBarProps) => React.ReactElement); + tabBarPosition?: "top" | "bottom" | "overlayTop" | "overlayBottom"; + onChangeTab?: (tab: { i: number; ref: Tab | null; from: number }) => void; + onScroll?: (value: number) => void; locked?: boolean; initialPage?: number; - tabBarUnderlineStyle?:ReactNative.ViewStyle | Array; - tabBarBackgroundColor?:string; - tabBarActiveTextColor?:string; - tabBarInactiveTextColor?:string; - tabBarTextStyle?:ReactNative.TextStyle; - tabContainerStyle?:ReactNative.ViewStyle | Array; - style?: ReactNative.ViewStyle | Array; - contentProps?: ReactNative.ScrollViewProperties; + page?: number; + tabBarUnderlineStyle?: ReactNative.StyleProp; + tabBarBackgroundColor?: string; + tabBarActiveTextColor?: string; + tabBarInactiveTextColor?: string; + tabBarTextStyle?: ReactNative.StyleProp; + tabContainerStyle?: ReactNative.StyleProp; + style?: ReactNative.StyleProp; + contentProps?: ReactNative.ScrollViewProps; + scrollWithoutAnimation?: boolean; + prerenderingSiblingsNumber?: number; } - interface Tab { - heading: React.ReactElement | string; - tabStyle?:ReactNative.ViewStyle | Array; - activeTabStyle?: ReactNative.ViewStyle | Array; - textStyle?: ReactNative.TextStyle; - activeTextStyle?: ReactNative.TextStyle; + interface Tab extends ReactNative.ViewProps { + heading: React.ReactChild; + tabStyle?: ReactNative.StyleProp; + activeTabStyle?: ReactNative.StyleProp; + textStyle?: ReactNative.StyleProp; + activeTextStyle?: ReactNative.StyleProp; } - interface TabHeading { - tabStyle?:ReactNative.ViewStyle | Array; - activeTabStyle?: ReactNative.ViewStyle | Array; - textStyle?: ReactNative.TextStyle; - activeTextStyle?: ReactNative.TextStyle; - style?: ReactNative.ViewStyle | Array; + + interface TabHeading extends ReactNative.ViewProps { + scrollable?: boolean; + active?: boolean; } - interface Item { + interface TabContainer extends ReactNative.ViewProps { } + + interface DefaultTabBar { + containerWidth?: number; + scrollValue: ReactNative.Animated.Value; + goToPage?: (pageNumber: number) => void; + activeTab?: number; + tabs: React.ReactChild[]; + backgroundColor?: string; + activeTextColor?: string; + inactiveTextColor?: string; + tabStyle?: ReactNative.StyleProp; + underlineStyle?: ReactNative.StyleProp; + tabContainerStyle?: ReactNative.StyleProp; + renderTab?: ( + name: string, + page: number, + isTabActive: boolean, + goToPage: ((pageNumber: number) => void) | undefined, + tabStyle: ReactNative.StyleProp, + activeTabStyle: ReactNative.StyleProp, + textStyle: ReactNative.StyleProp, + activeTextStyle: ReactNative.StyleProp, + tabHeaderStyle: ReactNative.StyleProp + ) => React.ReactElement; + } + + interface Item extends ReactNative.TouchableOpacityProps { fixedLabel?: boolean; floatingLabel?: boolean; inlineLabel?: boolean; @@ -781,343 +741,726 @@ declare module "native-base" { disabled?: boolean; error?: boolean; placeholder?: string; - secureTextEntry?: boolean; success?: boolean; last?: boolean; - style?: ReactNative.ViewStyle | Array; } - interface Form { - style?: ReactNative.ViewStyle | Array; - } + interface Form extends ReactNative.ViewProps { } - interface Fab { + interface Fab extends Pick> { active?: boolean; direction?: "down" | "up" | "left" | "right"; - containerStyle?: ReactNative.ViewStyle | Array; + containerStyle?: ReactNative.StyleProp; onPress?: () => void; position?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; - style?: ReactNative.ViewStyle; } - interface Image extends ReactNative.TextProperties {} - - interface Segment extends ReactNative.TextProperties {} + interface Segment extends ReactNative.ViewProps { } - interface Root extends ReactNative.TextProperties {} + interface Root extends ReactNative.TextProps { } interface StyleProvider { - style?: any; + /** + * This should be the output value from calling getTheme(variables). + */ + style?: object; } + + /** + * from react-native/Animated/TimingAnimationConfig.toValue + */ + type SwipeToValue = number | ReactNative.Animated.AnimatedValue | { x: number; y: number } | ReactNative.Animated.AnimatedValueXY; interface SwipeRow { - leftOpenValue?: number; - rightOpenValue?: number; - closeOnRowPress?: boolean; - disableLeftSwipe?: boolean; - disableRightSwipe?: boolean; - recalculateHiddenLayout?: boolean; - preview?: boolean; - previewDuration?: number; - directionalDistanceChangeThreshold?: number; + leftOpenValue?: number; + rightOpenValue?: number; + closeOnRowPress?: boolean; + disableLeftSwipe?: boolean; + disableRightSwipe?: boolean; + recalculateHiddenLayout?: boolean; + preview?: boolean; + previewDuration?: number; + directionalDistanceChangeThreshold?: number; swipeToOpenPercent?: number; stopLeftSwipe?: number; stopRightSwipe?: number; - onRowOpen?: Function; - onRowClose?: Function; + onRowOpen?: (toValue: SwipeToValue) => void; + onRowClose?: () => void; left?: React.ReactElement; body?: React.ReactElement; right?: React.ReactElement; style?: ReactNative.ViewStyle; - } + /** + * These additional properties are injected when SwipeRow is inside a List from ListProperties + */ + onRowDidClose?: () => void; + onRowDidOpen?: () => void; + /** + * from react-native/Animated/SpringAnimationConfig + */ + friction?: number; + /** + * from react-native/Animated/SpringAnimationConfig + */ + tension?: number; + /** + * from react-native/Animated/TimingAnimationConfig.toValue + */ + previewOpenValue?: SwipeToValue; + /** + * set false when user is moving horizontally (disable scrolling on the listView parent) + * set true when swipe action completed + */ + setScrollEnabled?: (enable: boolean) => void; + swipeGestureBegan?: () => void; + onRowPress?: () => void; + closeRow?: () => void; + } + + interface Variables { + platformStyle?: string; + platform: ReactNative.PlatformOSType; + + androidRipple: boolean; + androidRippleColor: string; + androidRippleColorDark: string; + btnUppercaseAndroidText: boolean; + + badgeBg: string; + badgeColor: string; + badgePadding: number; + + btnFontFamily: string; + btnDisabledBg: string; + buttonPadding: number; + btnPrimaryBg: string; + btnPrimaryColor: string; + btnInfoBg: string; + btnInfoColor: string; + btnSuccessBg: string; + btnSuccessColor: string; + btnDangerBg: string; + btnDangerColor: string; + btnWarningBg: string; + btnWarningColor: string; + btnTextSize: number; + btnTextSizeLarge: number; + btnTextSizeSmall: number; + borderRadiusLarge: number; + iconSizeLarge: number; + iconSizeSmall: number; + + cardDefaultBg: string; + cardBorderColor: string; + + CheckboxRadius: number; + CheckboxBorderWidth: number; + CheckboxPaddingLeft: number; + CheckboxPaddingBottom: number; + CheckboxIconSize: number; + CheckboxIconMarginTop?: number; + CheckboxFontSize: number; + DefaultFontSize: number; + checkboxBgColor: string; + checkboxSize: number; + checkboxTickColor: string; + + brandPrimary: string; + brandInfo: string; + brandSuccess: string; + brandDanger: string; + brandWarning: string; + brandDark: string; + brandLight: string; + + fontFamily: string; + fontSizeBase: number; + fontSizeH1: number; + fontSizeH2: number; + fontSizeH3: number; + + footerHeight: number; + footerDefaultBg: string; + footerPaddingBottom: number; + + tabBarTextColor: string; + tabBarTextSize: number; + activeTab: string; + sTabBarActiveTextColor: string; + tabBarActiveTextColor: string; + tabActiveBgColor: string; + + toolbarBtnColor: string; + toolbarDefaultBg: string; + toolbarHeight: number; + toolbarSearchIconSize: number; + toolbarInputColor: string; + searchBarHeight: number; + searchBarInputHeight: number; + toolbarBtnTextColor: string; + iosStatusbar: "dark-content" | "light-content"; + toolbarDefaultBorder: string; + statusBarColor: string; + darkenHeader: string; + + iconFamily: string; + iconFontSize: number; + iconHeaderSize: number; + + inputFontSize: number; + inputBorderColor: string; + inputSuccessBorderColor: string; + inputErrorBorderColor: string; + inputHeightBase: number; + inputColor: string; + inputColorPlaceholder: string; + + btnLineHeight: number; + lineHeightH1: number; + lineHeightH2: number; + lineHeightH3: number; + lineHeight: number; + + listBg: string; + listBorderColor: string; + listDividerBg: string; + listBtnUnderlayColor: string; + listItemPadding: number; + listNoteColor: string; + listNoteSize: number; + + defaultProgressColor: string; + inverseProgressColor: string; + + radioBtnSize: number; + radioSelectedColorAndroid: string; + radioBtnLineHeight: number; + radioColor: string; + + segmentBackgroundColor: string; + segmentActiveBackgroundColor: string; + segmentTextColor: string; + segmentActiveTextColor: string; + segmentBorderColor: string; + segmentBorderColorMain: string; + + defaultSpinnerColor: string; + inverseSpinnerColor: string; + + tabDefaultBg: string; + topTabBarTextColor: string; + topTabBarActiveTextColor: string; + topTabBarBorderColor: string; + topTabBarActiveBorderColor: string; + + tabBgColor: string; + tabFontSize: number; + + textColor: string; + inverseTextColor: string; + noteFontSize: number; + defaultTextColor: string; + + titleFontfamily: string; + titleFontSize: number; + subTitleFontSize: number; + subtitleColor: string; + titleFontColor: string; + + borderRadiusBase: number; + borderWidth: number; + contentPadding: number; + dropdownLinkColor: string; + inputLineHeight: number; + deviceWidth: number; + deviceHeight: number; + isIphoneX: boolean; + inputGroupRoundedBorderRadius: number; + } + + interface InjectedStyleProps { + style: ReactNative.StyleProp; + styleName: string; + virtual: boolean; + } + + interface ConnectStyleOptions { + virtual?: boolean; + withRef?: boolean; + } + + interface ToastProps extends ReactNative.ViewProps { } + + interface ActionSheet extends ReactNative.ViewProps { + autoHide?: boolean; + duration?: number; + } } // Export definitions /** - * NativeBase.Container - * - * Provides its own frame component, named after . - * All the components should be included within the Container. - * Container takes mainly two components:
and . - * Container comes with its predefined stylesheet, with an added advantage of accepting user-defined styles. - * Usage of Container's Header component is very similar to your HTML . - * The Content component of Container is nothing but the body section of your screen. - */ - export class Container extends React.Component {} + * NativeBase.Container + * + * Provides its own frame component, named after . + * All the components should be included within the Container. + * Container takes mainly two components:
and . + * Container comes with its predefined stylesheet, with an added advantage of accepting user-defined styles. + * Usage of Container's Header component is very similar to your HTML . + * The Content component of Container is nothing but the body section of your screen. + */ + export class Container extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Header - * - * NativeBase component that renders as Header (navbar) for your screen. - * There can be a single Header component into your Container. - * To have Header for your screen, include
component within . - * NativeBase gives you flexibility to define your Header component anywhere in the bounds of Container. - * Header takes input as: Button and Title (Text) - * The components those are defined within
will be rendered in the same order that you define them. - * Header provides you with stylesheet. - * User can add custom styles while defining
within their app. - * Replacing Component: React Native - */ - export class Header extends React.Component {} + * NativeBase.Header + * + * NativeBase component that renders as Header (navbar) for your screen. + * There can be a single Header component into your Container. + * To have Header for your screen, include
component within . + * NativeBase gives you flexibility to define your Header component anywhere in the bounds of Container. + * Header takes input as: Button and Title (Text) + * The components those are defined within
will be rendered in the same order that you define them. + * Header provides you with stylesheet. + * User can add custom styles while defining
within their app. + * Replacing Component: React Native + */ + export class Header extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Content - * - * This is a NativeBase component which renders as body element of your screen. - * Each screen can have only one component and can be defined anywhere within the Container. - * Content takes in the whole collection of React Native and NativeBase components. - * Content provides you with stylesheet. - * User can add custom styles while defining within their app. - * Replacing Component: React Native - */ + * NativeBase.Content + * + * This is a NativeBase component which renders as body element of your screen. + * Each screen can have only one component and can be defined anywhere within the Container. + * Content takes in the whole collection of React Native and NativeBase components. + * Content provides you with stylesheet. + * User can add custom styles while defining within their app. + * Replacing Component: React Native + */ + export class Content extends React.Component { + public _root: ReactNative.View | null; + } + /** - * NativeBase.Left - */ - export class Left extends React.Component {} + * NativeBase.Left + */ + export class Left extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Right - */ - export class Right extends React.Component {} + * NativeBase.Right + */ + export class Right extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Body - */ - export class Body extends React.Component {} + * NativeBase.Body + */ + export class Body extends React.Component { + public _root: ReactNative.View | null; + } - export class Content extends React.Component {} + export class TabContent extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.FooterTab - */ - export class FooterTab extends React.Component {} + * NativeBase.FooterTab + */ + export class FooterTab extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Footer - */ - export class Footer extends React.Component {} + * NativeBase.Footer + */ + export class Footer extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Title - */ - export class Title extends React.Component {} + * NativeBase.Title + */ + export class Title extends React.Component { + public _root: ReactNative.Text | null; + } - export class Subtitle extends React.Component {} + export class Subtitle extends React.Component { + public _root: ReactNative.Text | null; + } /** - * NativeBase.Button - * - * Provides Button component which is readily not available in React Native. - * Supports React Native app on both iOS and Android devices. - * Button component takes input such as: Text, Icon, Text with Icon. - * NativeBase gives you privilege to customize the props of this component. - * Example: To have custom style for button, include them in style prop of button. - * Intakes user-defined styles. - * NativeBase has provided its users with enormous list of props that can be used with Button. - * Replacing Component: React Native - */ - export class Button extends React.Component {} - /** - * NativeBase.View - */ - export class View extends React.Component {} - /** - * NativeBase.Text - */ - export class Text extends React.Component {} - /** - * NativeBase.Switch - */ - export class Switch extends React.Component {} + * NativeBase.Button + * + * Provides Button component which is readily not available in React Native. + * Supports React Native app on both iOS and Android devices. + * Button component takes input such as: Text, Icon, Text with Icon. + * NativeBase gives you privilege to customize the props of this component. + * Example: To have custom style for button, include them in style prop of button. + * Intakes user-defined styles. + * NativeBase has provided its users with enormous list of props that can be used with Button. + * Replacing Component: React Native + */ + export class Button extends React.Component { + /** + * (['ios', 'web'].contains(Platform.OS) || !variables.androidRipple || Platform.Version < 21) + * ? ReactNative.TouchableOpacity + * : ReactNative.TouchableNativeFeedback + */ + public _root: ReactNative.TouchableOpacity | ReactNative.TouchableNativeFeedback | null; + } /** - * NativeBase.Picker - */ - export class Picker extends React.Component {} - namespace Picker { - export class Item extends React.Component {} + * NativeBase.View + */ + export class View extends React.Component { + public _root: ReactNative.View | null; } /** - * NativeBase.List - * - * A base component for specifying lists of information. List must contain one or more list elements. - * Props provide configurability for several features. Provides a number of attributes that follows styling and interaction guidelines for each platform, so that they are intuitive for users to interact with. - */ - export class List extends React.Component {} + * NativeBase.Text + */ + export class Text extends React.Component { + public _root: ReactNative.Text | null; + } /** - * NativeBase.ListItem - * - * • This is the child component of List. - * • Defines a list item. - * • Adds border at bottom of each ListItem. - * • List takes any number of ListItem. - */ - export class ListItem extends React.Component {} + * NativeBase.Switch + */ + export class Switch extends React.Component { + public _root: ReactNative.Switch | null; + } /** - * NativeBase.H1 - */ - export class H1 extends React.Component {} + * NativeBase.Picker + */ + export class Picker extends React.Component { + public _root: ReactNative.Picker | null; + } + export namespace Picker { + export class Item extends React.Component { + public _root: ReactNative.PickerItem | null; + } + } /** - * NativeBase.H2 - */ - export class H2 extends React.Component {} + * NativeBase.List + * + * A base component for specifying lists of information. List must contain one or more list elements. + * Props provide configurability for several features. Provides a number of attributes that follows styling and + * interaction guidelines for each platform, so that they are intuitive for users to interact with. + * + * @deprecated: List is deprecated. Use of List for dynamic list generation is discouraged. Use Flatlist instead. + */ + export class List extends React.Component { + /** + * (props.dataArray.length > 0 || props.renderLeftHiddenRow || props.renderRightHiddenRow) + * ? ReactNative.ListView + * : ReactNative.View + */ + public _root: ReactNative.ListView | ReactNative.View | null; + /** + * (props.renderLeftHiddenRow || props.renderRightHiddenRow) ? ReactNative.ListView : undefined + */ + public _listView?: ReactNative.ListView | null; + } /** - * NativeBase.H3 - */ - export class H3 extends React.Component {} + * NativeBase.ListItem + * + * This is the child component of List. + * Defines a list item. + * Adds border at bottom of each ListItem. + * List takes any number of ListItem. + */ + export class ListItem extends React.Component { + /** + * (['ios', 'web'].contains(Platform.OS) || !variables.androidRipple || Platform.Version <= 21) + * ? ReactNative.TouchableOpacity + * : ReactNative.TouchableNativeFeedback + */ + public _root: ReactNative.TouchableHighlight | ReactNative.TouchableNativeFeedback | null; + } /** - * NativeBase.Row - */ - export class Row extends React.Component {} + * NativeBase.H1 + */ + export class H1 extends React.Component { + public _root: ReactNative.Text | null; + } /** - * NativeBase.Col - */ - export class Col extends React.Component {} + * NativeBase.H2 + */ + export class H2 extends React.Component { + public _root: ReactNative.Text | null; + } /** - * NativeBase.Grid - */ - export class Grid extends React.Component {} + * NativeBase.H3 + */ + export class H3 extends React.Component { + public _root: ReactNative.Text | null; + } /** - * NativeBase.InputGroup - * - * A foundational component for inputting text into the app via a keyboard. - * Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. - * Provides a number of attributes that follows styling and interaction guidelines for each platform, so that they are intuitive for users to interact with. - */ + * NativeBase.InputGroup + * + * A foundational component for inputting text into the app via a keyboard. + * Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. + * Provides a number of attributes that follows styling and interaction guidelines for each platform, so that they are intuitive for users to interact with. + */ export class InputGroup extends React.Component { public static propTypes: any; + public _root: ReactNative.View | null; } /** - * NativeBase.Input - */ - export class Input extends React.Component {} - /** - * NativeBase.Textarea - */ - export class Textarea extends React.Component {} + * NativeBase.Input + */ + export class Input extends React.Component { + public _root: ReactNative.TextInput | null; + } /** - * NativeBase.Icon - */ - export class Icon extends React.Component {} + * NativeBase.Textarea + */ + export class Textarea extends React.Component { + public _root: ReactNative.TextInput | null; + } /** - * NativeBase.Thumbnail - * - * Thumbnail component works very similar to Image. - * It helps you to showcase an image with variuos dimensions and shapes. - * By default, Thumbnail renders an image in circular shape. - */ - export class Thumbnail extends React.Component {} + * Styled NativeBase.Icon + */ + export class IconNB extends React.Component { + public _root: RNVIcon.Icon | null; + } /** - * NativeBase.Card - * - * Card is a flexible and extensible content container. - * It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. - * NativeBase Cards support a wide variety of content, including images, text, list groups, links, and more. - * Mix and match multiple content types to create the card you need. - */ - export class Card extends React.Component {} + * NativeBase.Icon + */ + export class Icon extends React.Component { + public _root: IconNB | null; + } /** - * NativeBase.CardItem - * - * This is the child component of Card. Works very similar to the list items of list. Card takes any number of CardItem. - * CardItem component takes input such as: Text, Button, Image, Thumbnail, Icon. - */ - export class CardItem extends React.Component {} + * NativeBase.Thumbnail + * + * Thumbnail component works very similar to Image. + * It helps you to showcase an image with variuos dimensions and shapes. + * By default, Thumbnail renders an image in circular shape. + */ + export class Thumbnail extends React.Component { + public _root: ReactNative.Image | null; + } /** - * NativeBase.CardSwiper - * - * Looking at data one piece at a time is more efficient when you consider people you might want to date, restaurants, streaming music, or local events you might want to check out. - * NativeBase Card Swiper helps you evaluate one option at a time, instead of selecting from a set of options. - */ - export class CardSwiper extends React.Component {} + * NativeBase.Card + * + * Card is a flexible and extensible content container. + * It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. + * NativeBase Cards support a wide variety of content, including images, text, list groups, links, and more. + * Mix and match multiple content types to create the card you need. + */ + export class Card extends React.Component { + /** + * (props.dataArray && props.renderRow) ? undefined : ReactNative.View + */ + public _root: ReactNative.View | Card | null; + } /** - * NativeBase.DeckSwiper - */ - export class DeckSwiper extends React.Component {} + * NativeBase.CardItem + * + * This is the child component of Card. Works very similar to the list items of list. Card takes any number of CardItem. + * CardItem component takes input such as: Text, Button, Image, Thumbnail, Icon. + */ + export class CardItem extends React.Component { + /** + * (props.button) ? ReactNative.TouchableOpacity | ReactNative.View + */ + public _root: ReactNative.TouchableOpacity | ReactNative.View | null; + } /** - * NativeBase.Badge - * - * All of us must have seen notification badges somewhere, such as on smart phones or facebook. - */ - export class Badge extends React.Component {} + * NativeBase.DeckSwiper + * + * Looking at data one piece at a time is more efficient when you consider people you might want to date, restaurants, streaming music, or local events you might want to check out. + * NativeBase Card Swiper helps you evaluate one option at a time, instead of selecting from a set of options. + */ + export class DeckSwiper extends React.Component { + public _root: DeckSwiper | null; + public swipeLeft: () => void; + public swipeRight: () => void; + } /** - * NativeBase.Spinner - */ - export class Spinner extends React.Component {} + * NativeBase.Badge + * + * All of us must have seen notification badges somewhere, such as on smart phones or facebook. + */ + export class Badge extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.CheckBox - */ - export class CheckBox extends React.Component {} + * NativeBase.Spinner + */ + export class Spinner extends React.Component { + public _root: ReactNative.ActivityIndicator | ReactNative.ActivityIndicatorIOS | null; + } /** - * NativeBase.Radio - */ - export class Radio extends React.Component {} + * NativeBase.CheckBox + */ + export class CheckBox extends React.Component { + public _root: ReactNative.TouchableOpacity | null; + } /** - * NativeBase.ProgressBar - */ - export class ProgressBar extends React.Component {} + * NativeBase.Radio + */ + export class Radio extends React.Component { + public _root: ReactNative.TouchableOpacity | null; + } /** - * NativeBase.Drawer - */ - export class Drawer extends React.Component {} + * NativeBase.Drawer + */ + export class Drawer extends React.Component { + public _root: RNDrawer | null; + } /** - * NativeBase.ScrollableTab - */ - export class ScrollableTab extends React.Component { } + * NativeBase.ScrollableTab + */ + export class ScrollableTab extends React.Component { + public _root: ScrollableTab | null; + public _scrollView: ReactNative.ScrollView | null; + } /** - * NativeBase.Tabs - * - * Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. - * It can contain any combination of text and icons, and is a popular method for enabling mobile navigation. - */ - export class Tabs extends React.Component {} + * NativeBase.Tabs + * + * Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. + * It can contain any combination of text and icons, and is a popular method for enabling mobile navigation. + */ + export class Tabs extends React.Component { + public _root: Tabs | null; + public scrollView: ReactNative.ScrollView | null; + } /** - * NativeBase.Tab - */ - export class Tab extends React.Component {} + * NativeBase.Tab + */ + export class Tab extends React.Component { + public _root: ReactNative.View | null; + } - export class TabHeading extends React.Component {} + export class TabHeading extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Item - */ - export class Item extends React.Component {} + * NativeBase.Item + */ + export class Item extends React.Component { + public _root: ReactNative.TouchableOpacity | null; + } /** - * NativeBase.Form - */ - export class Form extends React.Component {} + * NativeBase.Form + */ + export class Form extends React.Component { + public _root: ReactNative.View | null; + } /** - * NativeBase.Fab - */ - export class Fab extends React.Component {} + * NativeBase.Fab + */ + export class Fab extends React.Component { + public _root: Fab | null; + } - export class Separator extends React.Component {} + export class Separator extends React.Component { + public _root: ReactNative.View | null; + } - export class Label extends React.Component {} + export class Label extends React.Component { + public _root: ReactNative.Text | null; + } - export class StyleProvider extends React.Component {} + /** + * Comes from native-base-shoutem-theme + */ + export class StyleProvider extends React.Component { } - export class ActionSheet { + /** + * Inner container for NativeBase.ActionSheet + */ + export class ActionSheetContainer extends React.Component { } + /** + * NativeBase.ActionSheet + */ + export class ActionSheet extends React.Component { static show: ( configuration: { - options: string[] | Array<{text: string, icon?: string, iconColor?: string}>; + options: string[] | Array<{ text: string, icon?: string, iconColor?: string }>; cancelButtonIndex?: number; destructiveButtonIndex?: number; title?: string; }, onSelect: (index: number) => void ) => void; + public _root: ActionSheetContainer | null; + } + + /** + * NativeBase.Segment + */ + export class Segment extends React.Component { + public _root: ReactNative.View | null; + } + + /** + * NativeBase.Root component (required to wrap Toast or ActionSheet components). + */ + export class Root extends React.Component { + public _root: ReactNative.View | null; } - export class Image extends React.Component {} + /** + * Inner component for NativeBase.SwipeRow + */ + export class SwipeRowBase extends React.Component {} + /** + * NativeBase.SwipeRow + */ + export class SwipeRow extends React.Component { + public _root: SwipeRowBase | null; + } - export class Segment extends React.Component {} + /** + * NativeBase.ScrollableTabBar + */ + export class ScrollableTabBar extends React.Component { + public _root: ReactNative.ScrollView | null; + } - export class Root extends React.Component {} + /** + * NativeBase.TabContainer + */ + export class TabContainer extends React.Component { + public _root: ReactNative.View | null; + } - export class SwipeRow extends React.Component {} - - export class Toast { + /** + * Inner component for NativeBase.DefaultTabBar + */ + export class DefaultTabBarBase extends React.Component { } + /** + * NativeBase.DefaultTabBar + */ + export class DefaultTabBar extends React.Component { + public _root: DefaultTabBarBase | null; + } + + export class Toast extends React.Component { public static show(configuration: { text: string; buttonText?: string; position?: "top" | "bottom" | "center"; type?: "danger" | "success" | "warning"; duration?: number; - onClose?: Function; + onClose?: () => void; textStyle?: ReactNative.TextStyle; buttonTextStyle?: ReactNative.TextStyle; buttonStyle?: ReactNative.ViewStyle; + style?: ReactNative.ViewStyle; }): void; + public _root: ReactNative.View | null; } + + /** + * Returns the Native Base Theme for the specified variables. + */ + export function getTheme(variables: NativeBase.Variables): object; + + export function mapPropsToStyleNames(styleNames: string[], props: { [key: string]: any }): string[]; + + export const variables: NativeBase.Variables; + + export function connectStyle

( + componentStyleName: string, + componentStyle?: object, + mapPropsToStyleNames?: (styleNames: string[], props: { [key: string]: any }) => string[], + options?: NativeBase.ConnectStyleOptions + ): (component: React.ComponentType

) => React.ComponentType>>; } diff --git a/package.json b/package.json index 606a956ff..b190bc512 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ ], "scripts": { "compile": "rm -rf dist/* && babel . --out-dir dist --ignore node_modules,dist --source-maps", - "transpile": "npm run compile && cp src/basic/Icon/NBIcons.json dist/src/basic/Icon", + "transpile": "npm run compile && cp src/basic/Icon/NBIcons.json dist/src/basic/Icon && cp src/utils/computeProps.d.ts dist/src/utils", "test": "jest", "prepublish": "npm run transpile", "postinstall": "node addEjectScript.js", diff --git a/src/basic/Switch.js b/src/basic/Switch.js index b3076159c..75e284639 100644 --- a/src/basic/Switch.js +++ b/src/basic/Switch.js @@ -12,7 +12,7 @@ class Switch extends Component { } Switch.propTypes = { - ...Switch.propTypes, + ...SwitchNB.propTypes, }; const StyledSwitch = connectStyle("NativeBase.Switch", {}, mapPropsToStyleNames)(Switch); diff --git a/src/utils/computeProps.d.ts b/src/utils/computeProps.d.ts new file mode 100644 index 000000000..61fcb6709 --- /dev/null +++ b/src/utils/computeProps.d.ts @@ -0,0 +1,3 @@ +declare module 'native-base/dist/src/utils/computeProps' { + export default function (incomingProps: PT, defaultProps: Partial): PT; +} \ No newline at end of file