478e2435a94b88adf23df678c37eada1.json 37.3 KB
{"ast":null,"code":"var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectSpread2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectSpread\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var React=_interopRequireWildcard(require(\"react\"));var _StyleSheet=_interopRequireDefault(require(\"react-native-web/dist/exports/StyleSheet\"));var _View=_interopRequireDefault(require(\"react-native-web/dist/exports/View\"));var _I18nManager=_interopRequireDefault(require(\"react-native-web/dist/exports/I18nManager\"));var _Platform=_interopRequireDefault(require(\"react-native-web/dist/exports/Platform\"));var _reactNativeReanimated=_interopRequireDefault(require(\"react-native-reanimated\"));var _TabBarItem=_interopRequireDefault(require(\"./TabBarItem\"));var _TabBarIndicator=_interopRequireDefault(require(\"./TabBarIndicator\"));var _memoize=_interopRequireDefault(require(\"./memoize\"));var _jsxFileName=\"/Users/satya/Workspace/Projects/react-native-tab-view/src/TabBar.tsx\";var TabBar=function(_React$Component){(0,_inherits2.default)(TabBar,_React$Component);function TabBar(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TabBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(TabBar)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.state={layout:{width:0,height:0},tabWidths:{}};_this.measuredTabWidths={};_this.scrollAmount=new _reactNativeReanimated.default.Value(0);_this.getFlattenedTabWidth=function(style){var tabStyle=_StyleSheet.default.flatten(style);return tabStyle?tabStyle.width:undefined;};_this.getComputedTabWidth=function(index,layout,routes,scrollEnabled,tabWidths,flattenedWidth){if(flattenedWidth==='auto'){return tabWidths[routes[index].key]||0;}switch(typeof flattenedWidth){case'number':return flattenedWidth;case'string':if(flattenedWidth.endsWith('%')){var width=parseFloat(flattenedWidth);if(Number.isFinite(width)){return layout.width*(width/100);}}}if(scrollEnabled){return layout.width/5*2;}return layout.width/routes.length;};_this.getMemoizedTabWidthGettter=(0,_memoize.default)(function(layout,routes,scrollEnabled,tabWidths,flattenedWidth){return function(i){return _this.getComputedTabWidth(i,layout,routes,scrollEnabled,tabWidths,flattenedWidth);};});_this.getMaxScrollDistance=function(tabBarWidth,layoutWidth){return tabBarWidth-layoutWidth;};_this.getTabBarWidth=function(props,state){var layout=state.layout,tabWidths=state.tabWidths;var scrollEnabled=props.scrollEnabled,tabStyle=props.tabStyle;var routes=props.navigationState.routes;return routes.reduce(function(acc,_,i){return acc+_this.getComputedTabWidth(i,layout,routes,scrollEnabled,tabWidths,_this.getFlattenedTabWidth(tabStyle));},0);};_this.normalizeScrollValue=function(props,state,value){var layout=state.layout;var tabBarWidth=_this.getTabBarWidth(props,state);var maxDistance=_this.getMaxScrollDistance(tabBarWidth,layout.width);var scrollValue=Math.max(Math.min(value,maxDistance),0);if(_Platform.default.OS==='android'&&_I18nManager.default.isRTL){return maxDistance-scrollValue;}return scrollValue;};_this.getScrollAmount=function(props,state,index){var layout=state.layout,tabWidths=state.tabWidths;var scrollEnabled=props.scrollEnabled,tabStyle=props.tabStyle;var routes=props.navigationState.routes;var centerDistance=Array.from({length:index+1}).reduce(function(total,_,i){var tabWidth=_this.getComputedTabWidth(i,layout,routes,scrollEnabled,tabWidths,_this.getFlattenedTabWidth(tabStyle));return total+(index===i?tabWidth/2:tabWidth);},0);var scrollAmount=centerDistance-layout.width/2;return _this.normalizeScrollValue(props,state,scrollAmount);};_this.resetScroll=function(index){if(_this.props.scrollEnabled){_this.scrollView&&_this.scrollView.scrollTo({x:_this.getScrollAmount(_this.props,_this.state,index),animated:true});}};_this.handleLayout=function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,height=_e$nativeEvent$layout.height,width=_e$nativeEvent$layout.width;if(_this.state.layout.width===width&&_this.state.layout.height===height){return;}_this.setState({layout:{height:height,width:width}});};_this.getTranslateX=(0,_memoize.default)(function(scrollAmount,maxScrollDistance){return _reactNativeReanimated.default.multiply(_Platform.default.OS==='android'&&_I18nManager.default.isRTL?_reactNativeReanimated.default.sub(maxScrollDistance,scrollAmount):scrollAmount,_I18nManager.default.isRTL?1:-1);});return _this;}(0,_createClass2.default)(TabBar,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps,prevState){var navigationState=this.props.navigationState;var _this$state=this.state,layout=_this$state.layout,tabWidths=_this$state.tabWidths;if(prevProps.navigationState.routes.length!==navigationState.routes.length||prevProps.navigationState.index!==navigationState.index||prevState.layout.width!==layout.width||prevState.tabWidths!==tabWidths){if(this.getFlattenedTabWidth(this.props.tabStyle)==='auto'&&!(layout.width&&navigationState.routes.every(function(r){return typeof tabWidths[r.key]==='number';}))){return;}this.resetScroll(navigationState.index);}}},{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,position=_this$props.position,navigationState=_this$props.navigationState,jumpTo=_this$props.jumpTo,scrollEnabled=_this$props.scrollEnabled,bounces=_this$props.bounces,getAccessibilityLabel=_this$props.getAccessibilityLabel,getAccessible=_this$props.getAccessible,getLabelText=_this$props.getLabelText,getTestID=_this$props.getTestID,renderBadge=_this$props.renderBadge,renderIcon=_this$props.renderIcon,renderLabel=_this$props.renderLabel,activeColor=_this$props.activeColor,inactiveColor=_this$props.inactiveColor,pressColor=_this$props.pressColor,pressOpacity=_this$props.pressOpacity,onTabPress=_this$props.onTabPress,onTabLongPress=_this$props.onTabLongPress,tabStyle=_this$props.tabStyle,labelStyle=_this$props.labelStyle,indicatorStyle=_this$props.indicatorStyle,contentContainerStyle=_this$props.contentContainerStyle,style=_this$props.style,indicatorContainerStyle=_this$props.indicatorContainerStyle;var _this$state2=this.state,layout=_this$state2.layout,tabWidths=_this$state2.tabWidths;var routes=navigationState.routes;var isWidthDynamic=this.getFlattenedTabWidth(tabStyle)==='auto';var tabBarWidth=this.getTabBarWidth(this.props,this.state);var tabBarWidthPercent=routes.length*40+\"%\";var translateX=this.getTranslateX(this.scrollAmount,this.getMaxScrollDistance(tabBarWidth,layout.width));return React.createElement(_reactNativeReanimated.default.View,{onLayout:this.handleLayout,style:[styles.tabBar,style],__source:{fileName:_jsxFileName,lineNumber:331}},React.createElement(_reactNativeReanimated.default.View,{pointerEvents:\"none\",style:[styles.indicatorContainer,scrollEnabled?{transform:[{translateX:translateX}]}:null,tabBarWidth?{width:tabBarWidth}:scrollEnabled?{width:tabBarWidthPercent}:null,indicatorContainerStyle],__source:{fileName:_jsxFileName,lineNumber:335}},this.props.renderIndicator({position:position,layout:layout,navigationState:navigationState,jumpTo:jumpTo,width:isWidthDynamic?'auto':100/routes.length+\"%\",style:indicatorStyle,getTabWidth:this.getMemoizedTabWidthGettter(layout,routes,scrollEnabled,tabWidths,this.getFlattenedTabWidth(tabStyle))})),React.createElement(_View.default,{style:styles.scroll,__source:{fileName:_jsxFileName,lineNumber:364}},React.createElement(_reactNativeReanimated.default.ScrollView,{horizontal:true,keyboardShouldPersistTaps:\"handled\",scrollEnabled:scrollEnabled,bounces:bounces,alwaysBounceHorizontal:false,scrollsToTop:false,showsHorizontalScrollIndicator:false,automaticallyAdjustContentInsets:false,overScrollMode:\"never\",contentContainerStyle:[styles.tabContent,scrollEnabled?{width:tabBarWidth||tabBarWidthPercent}:styles.container,contentContainerStyle],scrollEventThrottle:16,onScroll:_reactNativeReanimated.default.event([{nativeEvent:{contentOffset:{x:this.scrollAmount}}}]),ref:function ref(el){_this2.scrollView=el&&el.getNode();},__source:{fileName:_jsxFileName,lineNumber:365}},routes.map(function(route){return React.createElement(_TabBarItem.default,{onLayout:isWidthDynamic?function(e){_this2.measuredTabWidths[route.key]=e.nativeEvent.layout.width;if(routes.every(function(r){return typeof _this2.measuredTabWidths[r.key]==='number';})){_this2.setState({tabWidths:(0,_objectSpread2.default)({},_this2.measuredTabWidths)});}}:undefined,key:route.key,position:position,route:route,navigationState:navigationState,getAccessibilityLabel:getAccessibilityLabel,getAccessible:getAccessible,getLabelText:getLabelText,getTestID:getTestID,renderBadge:renderBadge,renderIcon:renderIcon,renderLabel:renderLabel,activeColor:activeColor,inactiveColor:inactiveColor,pressColor:pressColor,pressOpacity:pressOpacity,onPress:function onPress(){var event={route:route,defaultPrevented:false,preventDefault:function preventDefault(){event.defaultPrevented=true;}};onTabPress&&onTabPress(event);if(event.defaultPrevented){return;}_this2.props.jumpTo(route.key);},onLongPress:function onLongPress(){return onTabLongPress&&onTabLongPress({route:route});},labelStyle:labelStyle,style:tabStyle,__source:{fileName:_jsxFileName,lineNumber:396}});}))));}}]);return TabBar;}(React.Component);exports.default=TabBar;TabBar.defaultProps={getLabelText:function getLabelText(_ref){var route=_ref.route;return typeof route.title==='string'?route.title.toUpperCase():route.title;},getAccessible:function getAccessible(_ref2){var route=_ref2.route;return typeof route.accessible!=='undefined'?route.accessible:true;},getAccessibilityLabel:function getAccessibilityLabel(_ref3){var route=_ref3.route;return typeof route.accessibilityLabel==='string'?route.accessibilityLabel:typeof route.title==='string'?route.title:undefined;},getTestID:function getTestID(_ref4){var route=_ref4.route;return route.testID;},renderIndicator:function renderIndicator(props){return React.createElement(_TabBarIndicator.default,(0,_extends2.default)({},props,{__source:{fileName:_jsxFileName,lineNumber:84}}));}};var styles=_StyleSheet.default.create({container:{flex:1},scroll:{overflow:'scroll'},tabBar:{backgroundColor:'#2196f3',elevation:4,shadowColor:'black',shadowOpacity:0.1,shadowRadius:_StyleSheet.default.hairlineWidth,shadowOffset:{height:_StyleSheet.default.hairlineWidth,width:0},zIndex:1},tabContent:{flexDirection:'row',flexWrap:'nowrap'},indicatorContainer:{position:'absolute',top:0,left:0,right:0,bottom:0}});","map":{"version":3,"sources":["TabBar.tsx"],"names":["TabBar","React","Component","defaultProps","getLabelText","route","getAccessible","getAccessibilityLabel","getTestID","renderIndicator","state","layout","width","height","tabWidths","prevProps","prevState","navigationState","r","measuredTabWidths","scrollAmount","Animated","getFlattenedTabWidth","tabStyle","StyleSheet","getComputedTabWidth","flattenedWidth","routes","parseFloat","Number","getMemoizedTabWidthGettter","memoize","getMaxScrollDistance","tabBarWidth","getTabBarWidth","scrollEnabled","props","acc","normalizeScrollValue","maxDistance","scrollValue","Math","Platform","I18nManager","getScrollAmount","centerDistance","Array","length","index","tabWidth","total","resetScroll","x","animated","handleLayout","e","getTranslateX","position","jumpTo","bounces","renderBadge","renderIcon","renderLabel","activeColor","inactiveColor","pressColor","pressOpacity","onTabPress","onTabLongPress","labelStyle","indicatorStyle","contentContainerStyle","style","indicatorContainerStyle","isWidthDynamic","tabBarWidthPercent","translateX","styles","transform","getTabWidth","nativeEvent","contentOffset","el","event","defaultPrevented","preventDefault","container","flex","scroll","overflow","tabBar","backgroundColor","elevation","shadowColor","shadowOpacity","shadowRadius","shadowOffset","zIndex","tabContent","flexDirection","flexWrap","indicatorContainer","top","left","right","bottom"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  StyleSheet,\n  View,\n  ScrollView,\n  StyleProp,\n  ViewStyle,\n  TextStyle,\n  LayoutChangeEvent,\n  I18nManager,\n  Platform,\n} from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport TabBarItem from './TabBarItem';\nimport TabBarIndicator, { Props as IndicatorProps } from './TabBarIndicator';\nimport memoize from './memoize';\nimport {\n  Route,\n  Scene,\n  SceneRendererProps,\n  NavigationState,\n  Layout,\n  Event,\n} from './types';\n\nexport type Props<T extends Route> = SceneRendererProps & {\n  navigationState: NavigationState<T>;\n  scrollEnabled?: boolean;\n  bounces?: boolean;\n  activeColor?: string;\n  inactiveColor?: string;\n  pressColor?: string;\n  pressOpacity?: number;\n  getLabelText: (scene: Scene<T>) => string | undefined;\n  getAccessible: (scene: Scene<T>) => boolean | undefined;\n  getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n  getTestID: (scene: Scene<T>) => string | undefined;\n  renderLabel?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderIcon?: (\n    scene: Scene<T> & {\n      focused: boolean;\n      color: string;\n    }\n  ) => React.ReactNode;\n  renderBadge?: (scene: Scene<T>) => React.ReactNode;\n  renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;\n  onTabPress?: (scene: Scene<T> & Event) => void;\n  onTabLongPress?: (scene: Scene<T>) => void;\n  tabStyle?: StyleProp<ViewStyle>;\n  indicatorStyle?: StyleProp<ViewStyle>;\n  indicatorContainerStyle?: StyleProp<ViewStyle>;\n  labelStyle?: StyleProp<TextStyle>;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n};\n\ntype State = {\n  layout: Layout;\n  tabWidths: { [key: string]: number };\n};\n\nexport default class TabBar<T extends Route> extends React.Component<\n  Props<T>,\n  State\n> {\n  static defaultProps = {\n    getLabelText: ({ route }: Scene<Route>) =>\n      typeof route.title === 'string' ? route.title.toUpperCase() : route.title,\n    getAccessible: ({ route }: Scene<Route>) =>\n      typeof route.accessible !== 'undefined' ? route.accessible : true,\n    getAccessibilityLabel: ({ route }: Scene<Route>) =>\n      typeof route.accessibilityLabel === 'string'\n        ? route.accessibilityLabel\n        : typeof route.title === 'string'\n        ? route.title\n        : undefined,\n    getTestID: ({ route }: Scene<Route>) => route.testID,\n    renderIndicator: (props: IndicatorProps<Route>) => (\n      <TabBarIndicator {...props} />\n    ),\n  };\n\n  state: State = {\n    layout: { width: 0, height: 0 },\n    tabWidths: {},\n  };\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    const { navigationState } = this.props;\n    const { layout, tabWidths } = this.state;\n\n    if (\n      prevProps.navigationState.routes.length !==\n        navigationState.routes.length ||\n      prevProps.navigationState.index !== navigationState.index ||\n      prevState.layout.width !== layout.width ||\n      prevState.tabWidths !== tabWidths\n    ) {\n      if (\n        this.getFlattenedTabWidth(this.props.tabStyle) === 'auto' &&\n        !(\n          layout.width &&\n          navigationState.routes.every(\n            r => typeof tabWidths[r.key] === 'number'\n          )\n        )\n      ) {\n        // When tab width is dynamic, only adjust the scroll once we have all tab widths and layout\n        return;\n      }\n\n      this.resetScroll(navigationState.index);\n    }\n  }\n\n  // to store the layout.width of each tab\n  // when all onLayout's are fired, this would be set in state\n  private measuredTabWidths: { [key: string]: number } = {};\n\n  private scrollAmount = new Animated.Value(0);\n\n  private scrollView: ScrollView | undefined;\n\n  private getFlattenedTabWidth = (style: StyleProp<ViewStyle>) => {\n    const tabStyle = StyleSheet.flatten(style);\n\n    return tabStyle ? tabStyle.width : undefined;\n  };\n\n  private getComputedTabWidth = (\n    index: number,\n    layout: Layout,\n    routes: Route[],\n    scrollEnabled: boolean | undefined,\n    tabWidths: { [key: string]: number },\n    flattenedWidth: string | number | undefined\n  ) => {\n    if (flattenedWidth === 'auto') {\n      return tabWidths[routes[index].key] || 0;\n    }\n\n    switch (typeof flattenedWidth) {\n      case 'number':\n        return flattenedWidth;\n      case 'string':\n        if (flattenedWidth.endsWith('%')) {\n          const width = parseFloat(flattenedWidth);\n          if (Number.isFinite(width)) {\n            return layout.width * (width / 100);\n          }\n        }\n    }\n\n    if (scrollEnabled) {\n      return (layout.width / 5) * 2;\n    }\n\n    return layout.width / routes.length;\n  };\n\n  private getMemoizedTabWidthGettter = memoize(\n    (\n      layout: Layout,\n      routes: Route[],\n      scrollEnabled: boolean | undefined,\n      tabWidths: { [key: string]: number },\n      flattenedWidth: string | number | undefined\n    ) => (i: number) =>\n      this.getComputedTabWidth(\n        i,\n        layout,\n        routes,\n        scrollEnabled,\n        tabWidths,\n        flattenedWidth\n      )\n  );\n\n  private getMaxScrollDistance = (tabBarWidth: number, layoutWidth: number) =>\n    tabBarWidth - layoutWidth;\n\n  private getTabBarWidth = (props: Props<T>, state: State) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    return routes.reduce<number>(\n      (acc, _, i) =>\n        acc +\n        this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        ),\n      0\n    );\n  };\n\n  private normalizeScrollValue = (\n    props: Props<T>,\n    state: State,\n    value: number\n  ) => {\n    const { layout } = state;\n    const tabBarWidth = this.getTabBarWidth(props, state);\n    const maxDistance = this.getMaxScrollDistance(tabBarWidth, layout.width);\n    const scrollValue = Math.max(Math.min(value, maxDistance), 0);\n\n    if (Platform.OS === 'android' && I18nManager.isRTL) {\n      // On Android, scroll value is not applied in reverse in RTL\n      // so we need to manually adjust it to apply correct value\n      return maxDistance - scrollValue;\n    }\n\n    return scrollValue;\n  };\n\n  private getScrollAmount = (props: Props<T>, state: State, index: number) => {\n    const { layout, tabWidths } = state;\n    const { scrollEnabled, tabStyle } = props;\n    const { routes } = props.navigationState;\n\n    const centerDistance = Array.from({ length: index + 1 }).reduce<number>(\n      (total, _, i) => {\n        const tabWidth = this.getComputedTabWidth(\n          i,\n          layout,\n          routes,\n          scrollEnabled,\n          tabWidths,\n          this.getFlattenedTabWidth(tabStyle)\n        );\n\n        // To get the current index centered we adjust scroll amount by width of indexes\n        // 0 through (i - 1) and add half the width of current index i\n        return total + (index === i ? tabWidth / 2 : tabWidth);\n      },\n      0\n    );\n\n    const scrollAmount = centerDistance - layout.width / 2;\n\n    return this.normalizeScrollValue(props, state, scrollAmount);\n  };\n\n  private resetScroll = (index: number) => {\n    if (this.props.scrollEnabled) {\n      this.scrollView &&\n        this.scrollView.scrollTo({\n          x: this.getScrollAmount(this.props, this.state, index),\n          animated: true,\n        });\n    }\n  };\n\n  private handleLayout = (e: LayoutChangeEvent) => {\n    const { height, width } = e.nativeEvent.layout;\n\n    if (\n      this.state.layout.width === width &&\n      this.state.layout.height === height\n    ) {\n      return;\n    }\n\n    this.setState({\n      layout: {\n        height,\n        width,\n      },\n    });\n  };\n\n  private getTranslateX = memoize(\n    (scrollAmount: Animated.Node<number>, maxScrollDistance: number) =>\n      Animated.multiply(\n        Platform.OS === 'android' && I18nManager.isRTL\n          ? Animated.sub(maxScrollDistance, scrollAmount)\n          : scrollAmount,\n        I18nManager.isRTL ? 1 : -1\n      )\n  );\n\n  render() {\n    const {\n      position,\n      navigationState,\n      jumpTo,\n      scrollEnabled,\n      bounces,\n      getAccessibilityLabel,\n      getAccessible,\n      getLabelText,\n      getTestID,\n      renderBadge,\n      renderIcon,\n      renderLabel,\n      activeColor,\n      inactiveColor,\n      pressColor,\n      pressOpacity,\n      onTabPress,\n      onTabLongPress,\n      tabStyle,\n      labelStyle,\n      indicatorStyle,\n      contentContainerStyle,\n      style,\n      indicatorContainerStyle,\n    } = this.props;\n    const { layout, tabWidths } = this.state;\n    const { routes } = navigationState;\n\n    const isWidthDynamic = this.getFlattenedTabWidth(tabStyle) === 'auto';\n    const tabBarWidth = this.getTabBarWidth(this.props, this.state);\n    const tabBarWidthPercent = `${routes.length * 40}%`;\n    const translateX = this.getTranslateX(\n      this.scrollAmount,\n      this.getMaxScrollDistance(tabBarWidth, layout.width)\n    );\n\n    return (\n      <Animated.View\n        onLayout={this.handleLayout}\n        style={[styles.tabBar, style]}\n      >\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[\n            styles.indicatorContainer,\n            scrollEnabled ? { transform: [{ translateX }] as any } : null,\n            tabBarWidth\n              ? { width: tabBarWidth }\n              : scrollEnabled\n              ? { width: tabBarWidthPercent }\n              : null,\n            indicatorContainerStyle,\n          ]}\n        >\n          {this.props.renderIndicator({\n            position,\n            layout,\n            navigationState,\n            jumpTo,\n            width: isWidthDynamic ? 'auto' : `${100 / routes.length}%`,\n            style: indicatorStyle,\n            getTabWidth: this.getMemoizedTabWidthGettter(\n              layout,\n              routes,\n              scrollEnabled,\n              tabWidths,\n              this.getFlattenedTabWidth(tabStyle)\n            ),\n          })}\n        </Animated.View>\n        <View style={styles.scroll}>\n          <Animated.ScrollView\n            horizontal\n            keyboardShouldPersistTaps=\"handled\"\n            scrollEnabled={scrollEnabled}\n            bounces={bounces}\n            alwaysBounceHorizontal={false}\n            scrollsToTop={false}\n            showsHorizontalScrollIndicator={false}\n            automaticallyAdjustContentInsets={false}\n            overScrollMode=\"never\"\n            contentContainerStyle={[\n              styles.tabContent,\n              scrollEnabled\n                ? { width: tabBarWidth || tabBarWidthPercent }\n                : styles.container,\n              contentContainerStyle,\n            ]}\n            scrollEventThrottle={16}\n            onScroll={Animated.event([\n              {\n                nativeEvent: {\n                  contentOffset: { x: this.scrollAmount },\n                },\n              },\n            ])}\n            ref={el => {\n              // @ts-ignore\n              this.scrollView = el && el.getNode();\n            }}\n          >\n            {routes.map((route: T) => (\n              <TabBarItem\n                onLayout={\n                  isWidthDynamic\n                    ? e => {\n                        this.measuredTabWidths[route.key] =\n                          e.nativeEvent.layout.width;\n\n                        // When we have measured widths for all of the tabs, we should updates the state\n                        // We avoid doing separate setState for each layout since it triggers multiple renders and slows down app\n                        if (\n                          routes.every(\n                            r =>\n                              typeof this.measuredTabWidths[r.key] === 'number'\n                          )\n                        ) {\n                          this.setState({\n                            tabWidths: { ...this.measuredTabWidths },\n                          });\n                        }\n                      }\n                    : undefined\n                }\n                key={route.key}\n                position={position}\n                route={route}\n                navigationState={navigationState}\n                getAccessibilityLabel={getAccessibilityLabel}\n                getAccessible={getAccessible}\n                getLabelText={getLabelText}\n                getTestID={getTestID}\n                renderBadge={renderBadge}\n                renderIcon={renderIcon}\n                renderLabel={renderLabel}\n                activeColor={activeColor}\n                inactiveColor={inactiveColor}\n                pressColor={pressColor}\n                pressOpacity={pressOpacity}\n                onPress={() => {\n                  const event: Scene<T> & Event = {\n                    route,\n                    defaultPrevented: false,\n                    preventDefault: () => {\n                      event.defaultPrevented = true;\n                    },\n                  };\n\n                  onTabPress && onTabPress(event);\n\n                  if (event.defaultPrevented) {\n                    return;\n                  }\n\n                  this.props.jumpTo(route.key);\n                }}\n                onLongPress={() => onTabLongPress && onTabLongPress({ route })}\n                labelStyle={labelStyle}\n                style={tabStyle}\n              />\n            ))}\n          </Animated.ScrollView>\n        </View>\n      </Animated.View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  scroll: {\n    overflow: 'scroll',\n  },\n  tabBar: {\n    backgroundColor: '#2196f3',\n    elevation: 4,\n    shadowColor: 'black',\n    shadowOpacity: 0.1,\n    shadowRadius: StyleSheet.hairlineWidth,\n    shadowOffset: {\n      height: StyleSheet.hairlineWidth,\n      width: 0,\n    },\n    zIndex: 1,\n  },\n  tabContent: {\n    flexDirection: 'row',\n    flexWrap: 'nowrap',\n  },\n  indicatorContainer: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n});\n"]},"metadata":{},"sourceType":"script"}