Carousel - fix counter flickering between numbers (#1591)

Author: M-i-k-e-l

generatedTypes/src/components/carousel/CarouselPresenter.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { CarouselProps, CarouselState } from './types';
 export declare function getChildrenLength(props: PropsWithChildren<CarouselProps>): number;
-export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>): {
+export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps' | 'currentStandingPage'>): {
     x: number;
     y: number;
 };

generatedTypes/src/components/carousel/types.d.ts

@@ -98,7 +98,7 @@ export interface CarouselProps extends ScrollViewProps {
 export interface CarouselState {
     containerWidth?: number;
     currentPage: number;
-    currentStandingPage?: number;
+    currentStandingPage: number;
     pageWidth: number;
     pageHeight: number;
     initialOffset: PointPropType;

src/components/carousel/CarouselPresenter.ts

@@ -6,7 +6,7 @@ export function getChildrenLength(props: PropsWithChildren<CarouselProps>): numb
   return React.Children.count(props.children);
 }
 
-export function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps'>) {
+export function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps' | 'currentStandingPage'>) {
   const {currentPage, pageWidth, pageHeight} = state;
   const {loop, containerMarginHorizontal = 0} = props;
   const actualCurrentPage = loop ? currentPage + 1 : currentPage;

src/components/carousel/index.tsx

@@ -56,7 +56,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
       containerWidth: undefined,
       // @ts-ignore (defaultProps)
       currentPage: this.shouldUsePageWidth() ? this.getCalcIndex(props.initialPage) : props.initialPage,
-      currentStandingPage: props.initialPage,
+      currentStandingPage: props.initialPage || 0,
       pageWidth: defaultPageWidth,
       pageHeight,
       initialOffset: presenter.calcOffset(props, {
@@ -262,7 +262,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   onMomentumScrollEnd = () => {
     // finished full page scroll
-    const {currentStandingPage = 0, currentPage} = this.state;
+    const {currentStandingPage, currentPage} = this.state;
     const index = this.getCalcIndex(currentPage);
 
     const pagesCount = presenter.getChildrenLength(this.props);
@@ -420,14 +420,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderCounter() {
     const {pageWidth, showCounter, counterTextStyle} = this.props;
-    const {currentPage} = this.state;
+    const {currentStandingPage} = this.state;
     const pagesCount = presenter.getChildrenLength(this.props);
 
     if (showCounter && !pageWidth) {
       return (
         <View center style={styles.counter}>
           <Text grey80 text90 style={[{fontWeight: 'bold'}, counterTextStyle]}>
-            {currentPage + 1}/{pagesCount}
+            {currentStandingPage + 1}/{pagesCount}
           </Text>
         </View>
       );

src/components/carousel/types.tsx

@@ -101,7 +101,7 @@ export interface CarouselProps extends ScrollViewProps {
 export interface CarouselState {
   containerWidth?: number;
   currentPage: number;
-  currentStandingPage?: number;
+  currentStandingPage: number;
   pageWidth: number;
   pageHeight: number;
   initialOffset: PointPropType;