Carousel - refactor and add support for orientation change; fix for Carousel-related components (ActionBar's demo screen, MainScreen)

Author: Inbal-Tish

demo/src/screens/MainScreen.js

@@ -336,7 +336,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   page: {
-    width: Constants.screenWidth,
     flex: 1,
     paddingLeft: 24,
   },

demo/src/screens/componentScreens/ActionBarScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
-import {Constants, Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, Typography, View, ActionBar, PageControl, Carousel} from 'react-native-ui-lib'; //eslint-disable-line
 import cameraSelected from '../../assets/icons/cameraSelected.png';
 import video from '../../assets/icons/video.png';
 import tags from '../../assets/icons/tags.png';
@@ -90,12 +90,10 @@ export default class ActionBarScreen extends Component {
 
 const styles = StyleSheet.create({
   page: {
-    width: Constants.screenWidth,
-    flex: 1,
+    flex: 1
   },
   pageControl: {
-    zIndex: 1,
-    width: Constants.screenWidth,
+    zIndex: 1
   },
   absoluteContainer: {
     position: 'absolute',

src/components/carousel/CarouselPresenter.js

@@ -1,26 +1,15 @@
 import _ from 'lodash';
 import {Constants} from '../../helpers';
 
-export function getDirectionOffset(offset, props) {
-  let fixedOffset = offset;
-
-  if (Constants.isRTL && Constants.isAndroid) {
-    const {loop, pageWidth} = props;
-    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
-    fixedOffset = Math.abs(totalWidth - offset);
-  }
-
-  return fixedOffset;
-}
 
 export function getChildrenLength(props) {
   const length = _.get(props, 'children.length') || 0;
   return length;
 }
 
 export function calcOffset(props, state) {
-  const {currentPage} = state;
-  const {pageWidth, loop} = props;
+  const {currentPage, pageWidth} = state;
+  const {loop} = props;
 
   const actualCurrentPage = loop ? currentPage + 1 : currentPage;
 
@@ -30,9 +19,21 @@ export function calcOffset(props, state) {
   return offset;
 }
 
-export function calcPageIndex(offset, props) {
+export function getDirectionOffset(offset, props, pageWidth) {
+  let fixedOffset = offset;
+
+  if (Constants.isRTL && Constants.isAndroid) {
+    const {loop} = props;
+    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
+    fixedOffset = Math.abs(totalWidth - offset);
+  }
+
+  return fixedOffset;
+}
+
+export function calcPageIndex(offset, props, pageWidth) {
   const pagesCount = getChildrenLength(props);
-  const {pageWidth, loop} = props;
+  const {loop} = props;
   const pageIndexIncludingClonedPages = Math.round(offset / pageWidth);
 
   let actualPageIndex;
@@ -45,16 +46,15 @@ export function calcPageIndex(offset, props) {
   return actualPageIndex;
 }
 
-export function isOutOfBounds(offset, props) {
-  const {pageWidth} = props;
+export function isOutOfBounds(offset, props, pageWidth) {
   const length = getChildrenLength(props);
   const minLimit = 1;
   const maxLimit = ((length + 1) * pageWidth) - 1;
 
   return !_.inRange(offset, minLimit, maxLimit);
 }
 
-// todo: need to support more cases of page width in loop mode
+// TODO: need to support more cases of page width in loop mode
 export function calcCarouselWidth(props) {
   const {pageWidth, loop} = props;
   let length = getChildrenLength(props);

src/components/carousel/index.js

@@ -1,9 +1,10 @@
 import _ from 'lodash';
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {Constants} from '../../helpers';
 import {BaseComponent} from '../../commons';
+import View from '../view';
 import * as presenter from './CarouselPresenter';
 
 
@@ -42,26 +43,41 @@ export default class Carousel extends BaseComponent {
   };
 
   static defaultProps = {
-    initialPage: 0,
-    pageWidth: Constants.screenWidth
+    initialPage: 0
   };
 
   constructor(props) {
     super(props);
 
+    const defaultPageWidth = props.pageWidth || Constants.screenWidth;
+    
     this.state = {
       currentPage: props.initialPage,
       currentStandingPage: props.initialPage,
-      initialOffset: {x: presenter.calcOffset(props, {currentPage: props.initialPage})}
+      pageWidth: defaultPageWidth,
+      initialOffset: {x: presenter.calcOffset(props, {currentPage: props.initialPage, pageWidth: defaultPageWidth})}
     };
   }
 
-  generateStyles() {
-    this.styles = createStyles(this.props);
+  componentDidMount() {
+    Constants.addDimensionsEventListener(this.onOrientationChanged);
   }
 
-  get pageWidth() {
-    return Math.floor(this.props.pageWidth);
+  componentWillUnmount() {
+    Constants.removeDimensionsEventListener(this.onOrientationChanged);
+  }
+
+  onOrientationChanged = () => {
+    if (!this.props.pageWidth) {
+      this.setState({
+        pageWidth: Constants.screenWidth, 
+        initialOffset: {x: presenter.calcOffset(this.props, {currentPage: this.state.currentPage, pageWidth: Constants.screenWidth})}
+      });
+    }
+  }
+
+  generateStyles() {
+    this.styles = createStyles(this.props);
   }
 
   updateOffset = (animated = false) => {
@@ -104,40 +120,42 @@ export default class Carousel extends BaseComponent {
     }
 
     const {loop} = this.props;
-    const offsetX = presenter.getDirectionOffset(event.nativeEvent.contentOffset.x, this.props);
+    const {pageWidth} = this.state;
+    const offsetX = presenter.getDirectionOffset(event.nativeEvent.contentOffset.x, this.props, pageWidth);
 
     if (offsetX >= 0) {
-      const newPage = presenter.calcPageIndex(offsetX, this.props);
-
+      const newPage = presenter.calcPageIndex(offsetX, this.props, pageWidth);
       this.setState({currentPage: newPage});
     }
 
-    if (loop && presenter.isOutOfBounds(offsetX, this.props)) {
+    if (loop && presenter.isOutOfBounds(offsetX, this.props, pageWidth)) {
       this.updateOffset();
     }
 
     _.invoke(this.props, 'onScroll', event);
   }
 
-  cloneChild(child) {
-    if (!child.key) {
-      return child;
-    }
-    
-    return React.cloneElement(child, {
-      key: `${child.key}-clone`,
-    });
+  renderChild = (child, key) => {
+    return (
+      <View style={{width: this.state.pageWidth}} key={key}>
+        {child}
+      </View>
+    );
   }
 
   renderChildren() {
     const {children, loop} = this.props;
     const length = presenter.getChildrenLength(this.props);
-    const childrenArray = React.Children.toArray(children);
+    
+    const childrenArray = React.Children.map(children, (child, index) => {
+      return this.renderChild(child, `${index}`);
+    });
 
     if (loop) {
-      childrenArray.unshift(this.cloneChild(children[length - 1]));
-      childrenArray.push(this.cloneChild(children[0]));
+      childrenArray.unshift(this.renderChild(children[length - 1], `${length - 1}-clone`));
+      childrenArray.push(this.renderChild(children[0], `${0}-clone`));
     }
+    
     return childrenArray;
   }