react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/button/__tests__/index.spec.js

@@ -0,0 +1,287 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Button from '../index';
+import View from '../../view';
+import {Colors, ThemeManager} from '../../../style';
+import {Constants} from '../../../commons';
+
+describe('Button', () => {
+  beforeEach(() => {
+    ThemeManager.setComponentTheme('Button', {});
+    mockIOS();
+  });
+
+  it('should render default button', () => {
+    const tree = renderer.create(<Button label="Button"/>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('outline', () => {
+    it('should render button with an outline', () => {
+      const tree = renderer.create(<Button label="Button" outline/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render button with an outlineColor', () => {
+      const tree = renderer.create(<Button label="Button" outlineColor={'blue'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render button with outline and outlineColor', () => {
+      const tree = renderer.create(<Button label="Button" outline outlineColor={'blue'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    ///
+
+    it('should return undefined when link is true, even when outline is true', () => {
+      const tree = renderer.create(<Button label="Button" outline link/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return disabled color for outline if button is disabled', () => {
+      const tree = renderer.create(<Button label="Button" outline disabled/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return custom borderWidth according to outlineWidth passed', () => {
+      const tree = renderer.create(<Button label="Button" outline outlineWidth={3}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('link', () => {
+    it('should render button as a link', () => {
+      const tree = renderer.create(<Button label="Button" link/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('hyperlink', () => {
+    it('should render button as a hyperlink', () => {
+      const tree = renderer.create(<Button label="Button" hyperlink/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('backgroundColor', () => {
+    it('should return defined theme backgroundColor', () => {
+      ThemeManager.setComponentTheme('Button', {
+        backgroundColor: Colors.purple40
+      });
+      const tree = renderer.create(<Button label="Button"/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return backgroundColor according to prop value', () => {
+      const tree = renderer.create(<Button label="Button" backgroundColor={'red'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return backgroundColor according to modifier', () => {
+      const tree = renderer.create(<Button label="Button" bg-orange30/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return undefined if this button is outline', () => {
+      const tree = renderer.create(<Button label="Button" backgroundColor="blue" outline/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return undefined if this button is link', () => {
+      const tree = renderer.create(<Button label="Button" bg-orange30 link/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return theme disabled color if button is disabled', () => {
+      const tree = renderer.create(<Button label="Button" bg-orange30 disabled/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  // describe('activeBackgroundColor', () => {
+  //   it('should return undefined by default', () => {
+  //     const uut = new Button({});
+  //     expect(uut.getActiveBackgroundColor()).toBe(undefined);
+  //   });
+
+  //   it('should return value according to getActiveBackgroundColor callback prop', () => {
+  //     const getActiveBackgroundColor = () => 'red';
+  //     const uut = new Button({getActiveBackgroundColor});
+  //     expect(uut.getActiveBackgroundColor()).toBe('red');
+  //   });
+  // });
+
+  describe('labelColor', () => {
+    it('should return Theme linkColor color for link', () => {
+      ThemeManager.setComponentTheme('Button', {
+        linkColor: Colors.yellow40
+      });
+      const tree = renderer.create(<Button label="Button" link/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return linkColor color for link', () => {
+      const tree = renderer.create(<Button label="Button" link linkColor={Colors.orange50}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return color according to color modifier', () => {
+      const tree = renderer.create(<Button label="Button" red10/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return color according to color prop', () => {
+      const tree = renderer.create(<Button label="Button" red30 color="green"/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return disabled text color according to theme for link/outline button', () => {
+      const tree = renderer.create(<Button label="Button" color="green" link disabled/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return undefined color if this is an icon button (without label)', () => {
+      const tree = renderer.create(<Button iconSource={12}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('label size', () => {
+    it('should return style for large button', () => {
+      const tree = renderer.create(<Button label="Button" size={'large'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return style for medium button', () => {
+      const tree = renderer.create(<Button label="Button" size={'medium'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return style for small button', () => {
+      const tree = renderer.create(<Button label="Button" size={'small'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return style for xSmall button', () => {
+      const tree = renderer.create(<Button label="Button" size={'xSmall'}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('border radius', () => {
+    it('should return given border radius when use plain number', () => {
+      const tree = renderer.create(<Button label="Button" borderRadius={12}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return 0 border radius when border radius prop is 0', () => {
+      const tree = renderer.create(<Button label="Button" borderRadius={0}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should return 0 border radius when button is full width', () => {
+      const tree = renderer.create(<Button label="Button" fullWidth/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('container size', () => {
+    it('should return style for large button', () => {
+      expect(renderer.create(<Button label="Button" size="large"/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="large" outline/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should return style for medium button', () => {
+      expect(renderer.create(<Button label="Button" size="medium"/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="medium" outline/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should return style for small button', () => {
+      expect(renderer.create(<Button label="Button" size="small"/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="small" outline/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should return style for xSmall button', () => {
+      expect(renderer.create(<Button label="Button" size="xSmall"/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="xSmall" outline/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should reduce padding by outlineWidth in case of outline button', () => {
+      expect(renderer.create(<Button label="Button" size="large" outline outlineWidth={2}/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should avoid minWidth limitation if avoidMinWidth was sent', () => {
+      expect(renderer.create(<Button label="Button" size="medium" avoidMinWidth/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should have no padding of button is a link nor min width', () => {
+      expect(renderer.create(<Button label="Button" size="medium" link/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should have no padding of button is an icon button', () => {
+      expect(renderer.create(<Button label="Button" size="medium" iconSource={14}/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should have no padding if avoidInnerPadding prop was sent', () => {
+      expect(renderer.create(<Button label="Button" size="medium" avoidInnerPadding/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should return style for round button', () => {
+      expect(renderer.create(<Button label="Button" round/>).toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('customBackground', () => {
+    it('should render button with custom background element', () => {
+      const CustomBackground = () => <View flex style={{backgroundColor: 'red'}}/>;
+      const tree = renderer.create(<Button label="Button" customBackground={<CustomBackground/>}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render custom background element with transparent backgroundColor when provided', () => {
+      const CustomBackground = () => <View flex style={{backgroundColor: 'blue'}}/>;
+      const tree = renderer.create(<Button label="Button" backgroundColor="green" customBackground={<CustomBackground/>}/>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('icon', () => {
+    it('should return the right spacing according to button size when label exists and icon on the right', () => {
+      expect(renderer.create(<Button label="Button" size="large" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="medium" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="small" iconOnRight/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button label="Button" size="xSmall" iconOnRight/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should apply color on icon', () => {
+      expect(renderer.create(<Button iconSource={12} color={'green'}/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button iconSource={12} red30/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should return icon style according to different variations', () => {
+      expect(renderer.create(<Button iconSource={12} outline/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button iconSource={12} link/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button iconSource={12} disabled/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should include custom iconStyle provided as a prop', () => {
+      expect(renderer.create(<Button iconSource={12} iconStyle={{marginRight: 9, tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
+    });
+
+    it('should apply the right icon color', () => {
+      expect(renderer.create(<Button iconSource={12} iconProps={{tintColor: 'red'}}/>).toJSON()).toMatchSnapshot();
+      expect(renderer.create(<Button iconSource={12} iconStyle={{tintColor: '#ffee22'}}/>).toJSON()).toMatchSnapshot();
+      expect(renderer
+        .create(<Button iconSource={12} iconProps={{tintColor: 'red'}} iconStyle={{tintColor: '#ffee22'}}/>)
+        .toJSON()).toMatchSnapshot();
+    });
+  });
+
+  function mockIOS() {
+    Constants.isIOS = true;
+    Constants.isAndroid = false;
+  }
+});
+
+

package/src/components/button/index.js

@@ -22,7 +22,9 @@ class Button extends PureComponent {
     super(props);
   }
   state = {
-    size: undefined
+    size: undefined,
+    measuredSize: undefined,
+    borderRadius: undefined
   };
   styles = createStyles();
   componentDidUpdate(prevProps) {
@@ -33,20 +35,38 @@ class Button extends PureComponent {
 
   // This method will be called more than once in case of layout change!
   onLayout = event => {
-    const height = event.nativeEvent.layout.height;
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
     if (this.props.round) {
-      const width = event.nativeEvent.layout.width;
       const size = height >= width ? height : width;
       this.setState({
         size
       });
     }
+    if (this.needsHitslopMeasurement()) {
+      this.setState({
+        measuredSize: {
+          width,
+          height
+        }
+      });
+    }
     if (Constants.isAndroid && Platform.Version <= 17) {
       this.setState({
         borderRadius: height / 2
       });
     }
   };
+  needsHitslopMeasurement() {
+    const {
+      avoidMinWidth,
+      avoidInnerPadding,
+      round
+    } = this.props;
+    return this.isLink || this.isIconButton && !round || avoidMinWidth || avoidInnerPadding;
+  }
   get isLink() {
     const {
       link,
@@ -346,12 +366,14 @@ class Button extends PureComponent {
     return null;
   }
   getAccessibleHitSlop() {
+    const {
+      measuredSize
+    } = this.state;
     const containerStyle = this.getContainerSizeStyle();
-    const isWidthSet = containerStyle.width !== undefined || containerStyle.minWidth !== undefined;
-    const width = containerStyle.width || containerStyle.minWidth || 0;
-    const widthWithPadding = width + (containerStyle.paddingHorizontal || containerStyle.padding || 0) * 2;
-    const horizontalHitslop = isWidthSet ? Math.max(0, (48 - widthWithPadding) / 2) : 10;
-    const verticalHitslop = (containerStyle.height ? Math.max(0, 48 - containerStyle.height) : SIZE_TO_VERTICAL_HITSLOP[this.props.size || DEFAULT_SIZE]) / 2;
+    const buttonWidth = measuredSize?.width ?? containerStyle.width ?? containerStyle.minWidth ?? 0;
+    const buttonHeight = measuredSize?.height ?? containerStyle.height ?? 0;
+    const horizontalHitslop = Math.max(0, (48 - buttonWidth) / 2);
+    const verticalHitslop = buttonHeight ? Math.max(0, (48 - buttonHeight) / 2) : SIZE_TO_VERTICAL_HITSLOP[this.props.size || DEFAULT_SIZE] / 2;
     return {
       top: verticalHitslop,
       bottom: verticalHitslop,

package/src/components/card/__tests__/CardPresenter.spec.js

@@ -0,0 +1,35 @@
+import * as uut from '../CardPresenter';
+
+describe('CardPresenter', () => {
+  describe('extractPositionValues', () => {
+    it('should work with basic string value', () => {
+      expect(uut.extractPositionValues('top')).toEqual({top: true, right: false, bottom: false, left: false});
+      expect(uut.extractPositionValues('bottom')).toEqual({top: false, right: false, bottom: true, left: false});
+      expect(uut.extractPositionValues('left')).toEqual({top: false, right: false, bottom: false, left: true});
+      expect(uut.extractPositionValues('right')).toEqual({top: false, right: true, bottom: false, left: false});
+      expect(uut.extractPositionValues('')).toEqual({top: false, right: false, bottom: false, left: false});
+    });
+
+    it('should work with basic array of positions', () => {
+      expect(uut.extractPositionValues(['top', 'bottom'])).toEqual({
+        top: true,
+        right: false,
+        bottom: true,
+        left: false
+      });
+      expect(uut.extractPositionValues(['left', 'right'])).toEqual({
+        top: false,
+        right: true,
+        bottom: false,
+        left: true
+      });
+      expect(uut.extractPositionValues(['top', 'left', 'bottom', 'right'])).toEqual({
+        top: true,
+        right: true,
+        bottom: true,
+        left: true
+      });
+      expect(uut.extractPositionValues([])).toEqual({top: false, right: false, bottom: false, left: false});
+    });
+  });
+});

package/src/components/carousel/__tests__/CarouselPresenter.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import * as uut from '../CarouselPresenter';
+
+describe('Carousel presenter', () => {
+  it('should getChildrenLength', () => {
+    expect(uut.getChildrenLength({children: [<></>, <></>, <></>]})).toBe(3);
+    expect(uut.getChildrenLength({children: [<></>]})).toBe(1);
+    expect(uut.getChildrenLength({children: [[], <></>]})).toBe(1);
+    expect(uut.getChildrenLength(<></>)).toBe(0);
+  });
+
+  describe('calcOffset', () => {
+    it('should calcOffset (default mode)', () => {
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 0, y: 0});
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 120, y: 0});
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 240, y: 0});
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 0})).toStrictEqual({x: 0, y: 0});
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 1})).toStrictEqual({x: 0, y: 150});
+      expect(uut.calcOffset({children: [<></>, <></>, <></>], horizontal: false}, {pageWidth: 80, pageHeight: 150, currentPage: 2})).toStrictEqual({x: 0, y: 300});
+    });
+
+    it('should calcOffset (loop mode)', () => {
+      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 0})).toStrictEqual({x: 120, y: 0});
+      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 1})).toStrictEqual({x: 240, y: 0});
+      expect(uut.calcOffset({loop: true, children: [<></>, <></>, <></>], horizontal: true}, {pageWidth: 120, pageHeight: 100, currentPage: 2})).toStrictEqual({x: 360, y: 0});
+    });
+  });
+
+  describe('calcPageIndex', () => {
+    it('should calcPageIndex', () => {
+      expect(uut.calcPageIndex(120, {children: [<></>, <></>, <></>]}, 120)).toBe(1);
+      expect(uut.calcPageIndex(245, {children: [<></>, <></>, <></>]}, 120)).toBe(2);
+      expect(uut.calcPageIndex(481, {children: [<></>, <></>, <></>]}, 120)).toBe(2);
+      expect(uut.calcPageIndex(5, {children: [<></>, <></>, <></>]}, 120)).toBe(0);
+    });
+
+    it('should calcPageIndex (loop mode)', () => {
+      expect(uut.calcPageIndex(120, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(0);
+      expect(uut.calcPageIndex(245, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(1);
+      expect(uut.calcPageIndex(481, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(0);
+      expect(uut.calcPageIndex(5, {loop: true, children: [<></>, <></>, <></>]}, 120)).toBe(2);
+    });
+  });
+
+  it('should return isOutsideLimits', () => {
+    expect(uut.isOutOfBounds(120, {children: [<></>, <></>, <></>]}, 120)).toBe(false);
+    expect(uut.isOutOfBounds(1125, {children: [<></>, <></>, <></>, <></>]}, 375)).toBe(false);
+    expect(uut.isOutOfBounds(0, {children: [<></>, <></>, <></>]}, 120)).toBe(true);
+    expect(uut.isOutOfBounds(481, {children: [<></>, <></>, <></>]}, 120)).toBe(true);
+    expect(uut.isOutOfBounds(1875, {children: [<></>, <></>, <></>, <></>]}, 375)).toBe(true);
+  });
+});

package/src/components/carousel/__tests__/index.spec.js

@@ -0,0 +1,89 @@
+import _map from "lodash/map";
+import React from 'react';
+import { Text, View } from 'react-native';
+import { fireOnMomentumScrollEnd } from "../../../uilib-test-renderer";
+import { render } from '@testing-library/react-native';
+import Carousel from "../index";
+import { Constants } from "../../../commons/new";
+import { CarouselDriver } from "../Carousel.driver.new";
+const numberOfPagesShown = 5;
+const onChangePageMock = jest.fn();
+const onScrollMock = jest.fn();
+const testID = 'carousel';
+const TestCase = props => {
+  return <Carousel testID={testID} onChangePage={onChangePageMock} onScroll={onScrollMock} {...props}>
+      {_map([...Array(numberOfPagesShown)], (_, index) => <Page key={index}>
+          <Text testID={`page-${index}`}>Page #{index}</Text>
+        </Page>)}
+    </Carousel>;
+};
+const Page = ({
+  children,
+  ...others
+}) => {
+  return <View {...others} style={{
+    flex: 1
+  }}>
+      {children}
+    </View>;
+};
+describe('Carousel render tests', () => {
+  describe('initialPage', () => {
+    it('should be set to default initialPage', async () => {
+      const renderTree = render(<TestCase />);
+      const driver = CarouselDriver({
+        renderTree,
+        testID
+      });
+      expect((await driver.getContentOffset()).x).toBe(0);
+    });
+    it('should be set to initialPage = 2', async () => {
+      const renderTree = render(<TestCase initialPage={2} />);
+      const driver = CarouselDriver({
+        renderTree,
+        testID
+      });
+      expect((await driver.getContentOffset()).x).toBe(Constants.screenWidth * 2);
+    });
+  });
+  describe('onScroll', () => {
+    it('should trigger onScroll from the second scroll', async () => {
+      const renderTree = render(<TestCase />);
+      const driver = CarouselDriver({
+        renderTree,
+        testID
+      });
+      await driver.scroll({
+        x: Constants.screenWidth
+      }); //NOTE: first scroll doesn't fire onScroll
+      expect(onScrollMock).not.toHaveBeenCalled();
+      await driver.scroll({
+        x: Constants.screenWidth
+      });
+      expect(onScrollMock).toHaveBeenCalled();
+    });
+  });
+  describe('onChangePage', () => {
+    it('should trigger onChangePage with current page', async () => {
+      const renderTree = render(<TestCase />);
+      const driver = CarouselDriver({
+        renderTree,
+        testID
+      });
+      const scrollView = await driver.getElement();
+      await driver.scroll({
+        x: Constants.screenWidth
+      }); //NOTE: first scroll doesn't fire onScroll
+      await driver.scroll({
+        x: Constants.screenWidth
+      });
+      expect(onChangePageMock).not.toHaveBeenCalled();
+      fireOnMomentumScrollEnd(scrollView, {
+        x: Constants.screenWidth
+      });
+      expect(onChangePageMock).toHaveBeenCalledWith(1, 0, {
+        isAutoScrolled: false
+      });
+    });
+  });
+});

package/src/components/carousel/index.js

@@ -499,7 +499,8 @@ class Carousel extends Component {
     return <View animated={animated} style={[{
       marginBottom
     }, containerStyle]} onLayout={this.onContainerLayout}>
-        <ScrollContainer showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={200} {...others} ref={this.carousel} onScroll={animatedScrollOffset ? this.onScrollEvent : this.onScroll} contentContainerStyle={scrollContainerStyle} horizontal={horizontal} pagingEnabled={this.shouldEnablePagination()} snapToOffsets={snapToOffsets} contentOffset={contentOffset}
+        <ScrollContainer showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} decelerationRate="fast" scrollEventThrottle={Constants.isAndroid ? 16 : 200} // Android needs 16ms throttle to reliably catch loop boundary during fast swipes (Ticket 4885)
+      {...others} ref={this.carousel} onScroll={animatedScrollOffset ? this.onScrollEvent : this.onScroll} contentContainerStyle={scrollContainerStyle} horizontal={horizontal} pagingEnabled={this.shouldEnablePagination()} snapToOffsets={snapToOffsets} contentOffset={contentOffset}
       // onContentSizeChange={this.onContentSizeChange}
       onMomentumScrollEnd={this.onMomentumScrollEnd} style={_style}>
           {this.renderChildren()}