allow passing custom page width to TabController carousel

Author: ethanshar

src/components/tabController/PageCarousel.js

@@ -32,9 +32,10 @@ class PageCarousel extends PureComponent {
   };
 
   scrollToPage = (pageIndex, animated) => {
+    const {pageWidth} = this.context;
     const node = _.invoke(this.carousel, 'current.getNode');
     if (node) {
-      node.scrollTo({x: pageIndex * Constants.screenWidth, animated: false});
+      node.scrollTo({x: pageIndex * pageWidth, animated: false});
     }
   };
 
@@ -44,7 +45,7 @@ class PageCarousel extends PureComponent {
   };
 
   render() {
-    const {selectedIndex} = this.context;
+    const {selectedIndex, pageWidth} = this.context;
     return (
       <>
         <Animated.ScrollView
@@ -55,7 +56,7 @@ class PageCarousel extends PureComponent {
           showsHorizontalScrollIndicator={false}
           onScroll={this.onScroll}
           scrollEventThrottle={16}
-          contentOffset={{x: selectedIndex * Constants.screenWidth}} // iOS only
+          contentOffset={{x: selectedIndex * pageWidth}} // iOS only
         />
 
         <Code>{this.renderCodeBlock}</Code>

src/components/tabController/TabPage.js

@@ -52,6 +52,7 @@ export default class TabPage extends PureComponent {
   _pageStyle = [
     {opacity: this._opacity},
     this.context.asCarousel ? styles.carouselPage : styles.page,
+    this.context.asCarousel ? {width: this.context.pageWidth} : undefined,
     {zIndex: this._zIndex}
   ];
 

src/components/tabController/index.js

@@ -59,7 +59,11 @@ class TabController extends Component {
     /**
      * When using TabController.PageCarousel this should be turned on
      */
-    asCarousel: PropTypes.bool
+    asCarousel: PropTypes.bool,
+    /**
+     * Pass for custom carousel page width
+     */
+    carouselPageWidth: PropTypes.number
   };
 
   static defaultProps = {
@@ -74,16 +78,21 @@ class TabController extends Component {
       selectedIndex: this.props.selectedIndex,
       asCarousel: this.props.asCarousel,
       itemStates: [],
+      pageWidth: this.pageWidth,
       // animated values
       targetPage: new Value(this.props.selectedIndex),
       currentPage: new Value(this.props.selectedIndex),
-      carouselOffset: new Value(this.props.selectedIndex * Math.round(Constants.screenWidth)),
+      carouselOffset: new Value(this.props.selectedIndex * Math.round(this.pageWidth)),
       // // callbacks
       registerTabItems: this.registerTabItems,
       onChangeIndex: this.props.onChangeIndex
     };
   }
 
+  get pageWidth() {
+    return this.props.carouselPageWidth || Constants.screenWidth;
+  }
+
   registerTabItems = (tabItemsCount, ignoredItems) => {
     const itemStates = _.times(tabItemsCount, () => new Value(State.UNDETERMINED));
     this.setState({itemStates, ignoredItems});
@@ -127,11 +136,11 @@ class TabController extends Component {
 
       /* Page change by Carousel scroll */
       onChange(carouselOffset, [
-        set(isScrolling, lessThan(round(abs(diff(carouselOffset))), round(Constants.screenWidth))),
+        set(isScrolling, lessThan(round(abs(diff(carouselOffset))), round(this.pageWidth))),
         cond(and(not(isAnimating)), [
           set(currentPage,
             interpolate(round(carouselOffset), {
-              inputRange: itemStates.map((v, i) => Math.round(i * Constants.screenWidth)),
+              inputRange: itemStates.map((v, i) => Math.round(i * this.pageWidth)),
               outputRange: itemStates.map((v, i) => i)
             })),
           set(toPage, currentPage)