Carousel - fix initial page offset (contentOffset) (#1991)

* Carousel - fix initial page offset (contentOffset)

* Add old code as comment

* Rename to getInitialContentOffset

Author: M-i-k-e-l

src/components/carousel/CarouselPresenter.ts

@@ -6,6 +6,7 @@ export function getChildrenLength(props: PropsWithChildren<CarouselProps>): numb
   return React.Children.count(props.children);
 }
 
+// TODO: This should probably be replaced with carousel.getContentOffset
 export function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps' | 'currentStandingPage'>) {
   const {currentPage, pageWidth, pageHeight} = state;
   const {loop, containerMarginHorizontal = 0} = props;

src/components/carousel/index.tsx

@@ -246,6 +246,21 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     }
   };
 
+  getInitialContentOffset = (snapToOffsets: number[] | undefined) => {
+    const {horizontal, initialPage} = this.props;
+    const {initialOffset} = this.state;
+    let contentOffset = initialOffset;
+    if (snapToOffsets && initialPage !== undefined) {
+      const offset = snapToOffsets[initialPage];
+      contentOffset = {
+        x: horizontal ? offset : 0,
+        y: horizontal ? 0 : offset
+      };
+    }
+
+    return contentOffset;
+  }
+
   shouldUsePageWidth() {
     const {loop, pageWidth} = this.props;
     return !loop && pageWidth;
@@ -477,13 +492,13 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderCarousel() {
     const {containerStyle, animated, horizontal, animatedScrollOffset, ...others} = this.props;
-    const {initialOffset} = this.state;
     const scrollContainerStyle = this.shouldUsePageWidth()
       ? {paddingRight: this.getItemSpacings(this.props)}
       : undefined;
     const snapToOffsets = this.getSnapToOffsets();
     const marginBottom = Math.max(0, this.getContainerPaddingVertical() - 16);
     const ScrollContainer = animatedScrollOffset ? Animated.ScrollView : ScrollView;
+    const contentOffset = this.getInitialContentOffset(snapToOffsets);
     return (
       <View
         animated={animated}
@@ -502,8 +517,8 @@ class Carousel extends Component<CarouselProps, CarouselState> {
           horizontal={horizontal}
           pagingEnabled={this.shouldEnablePagination()}
           snapToOffsets={snapToOffsets}
-          contentOffset={initialOffset} // iOS only
-          onContentSizeChange={this.onContentSizeChange}
+          contentOffset={contentOffset}
+          // onContentSizeChange={this.onContentSizeChange}
           onMomentumScrollEnd={this.onMomentumScrollEnd}
         >
           {this.renderChildren()}