license import React from 'react' ; import { StyleProp , StyleSheet , View , ViewProps , ViewStyle , } from 'react-native' ; import { ChildrenWithProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { styled , StyledComponentProps , StyleType , } from '../../theme' ; import { TabElement , TabProps , } from './tab.component' ; import { TabIndicator } from '../shared/tabIndicator.component' ; type TabBarStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' > ; } > ; export interface TabBarProps extends ViewProps , TabBarStyledProps { children ? : ChildrenWithProps < TabProps > ; selectedIndex ? : number ; onSelect ? : ( index : number ) => void ; indicatorStyle ? : StyleProp < ViewStyle > ; } export type TabBarElement = React . ReactElement < TabBarProps > ; extends React . Component property property property property property overview-example overview-example overview-example overview-example overview-example @ styled ( 'TabBar' ) export class TabBar extends React . Component < TabBarProps > { static defaultProps : Partial < TabBarProps > = { selectedIndex : 0 , } ; private tabIndicatorRef = React . createRef < TabIndicator > ( ) ; public scrollToIndex ( params ) { this . tabIndicatorRef . current ?. scrollToIndex ( params ) ; } public scrollToOffset ( params ) { this . tabIndicatorRef . current ?. scrollToOffset ( params ) ; } private onTabSelect = ( index ) : void => { this . props . onSelect && this . props . onSelect ( index ) ; } ; private getComponentStyle = ( source ) => { const { indicatorHeight , indicatorBorderRadius , indicatorBackgroundColor , ... containerParameters } = source ; return { container : containerParameters , item : { } , indicator : { height : indicatorHeight , borderRadius : indicatorBorderRadius , backgroundColor : indicatorBackgroundColor , } , } ; } ; private isTabSelected = ( index ) : boolean => { return index === this . props . selectedIndex ; } ; private renderTabElement = ( element , index ) : TabElement => { return React . cloneElement ( element , { key : index , style : [ styles . item , element . props . style ] , selected : this . isTabSelected ( index ) , onSelect : ( ) => this . onTabSelect ( index ) , } ) ; } ; private renderTabElements = ( source ) : TabElement [ ] => { return React . Children . map ( source , this . renderTabElement ) ; } ; public render ( ) { const { eva , style , testID , indicatorStyle , selectedIndex , children , ... viewProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; const tabElements = this . renderTabElements ( children ) ; return ( < View testID = { testID } > < View { ... viewProps } style = { [ evaStyle . container , styles . container , style ] } > { tabElements } < /View> < TabIndicator ref = { this . tabIndicatorRef } style = { [ evaStyle . indicator , styles . indicator , indicatorStyle ] } selectedPosition = { selectedIndex } positions = { tabElements . length } / > < /View>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , } , item : { flex : 1 , } , indicator : { } , } ) ;