Fix #181

Author: Jacse

src/index.tsx

@@ -14,6 +14,7 @@ import {
   GestureResponderEvent,
   LayoutChangeEvent,
 } from 'react-native';
+import mergeExtraData from './merge-extradata';
 
 const isAndroidRTL = I18nManager.isRTL && Platform.OS === 'android';
 
@@ -267,10 +268,14 @@ export default class AppIntroSlider<ItemT> extends React.Component<
       prevLabel,
       renderItem,
       data,
+      extraData,
       ...otherProps
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
+    // Merge component width and user-defined extraData
+    const extra = mergeExtraData(extraData, this.state.width);
+
     return (
       <View style={styles.flexOne}>
         <FlatList
@@ -283,7 +288,7 @@ export default class AppIntroSlider<ItemT> extends React.Component<
           style={styles.flatList}
           renderItem={this._renderItem}
           onMomentumScrollEnd={this._onMomentumScrollEnd}
-          extraData={this.state.width}
+          extraData={extra}
           onLayout={this._onLayout}
           // make sure all slides are rendered so we can use dots to navigate to them
           initialNumToRender={data.length}

src/merge-extradata.tsx

@@ -0,0 +1,27 @@
+function areInputsEqual(
+  newInputs: readonly unknown[],
+  lastInputs: readonly unknown[],
+): boolean {
+  // Using for loop for speed. It generally performs better than array.every
+  // https://github.com/alexreardon/memoize-one/pull/59
+  for (let i = 0; i < newInputs.length; i++) {
+    // using shallow equality check
+    if (newInputs[i] !== lastInputs[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+let lastArgs: unknown[] = [];
+let lastResult = 0;
+
+export default function mergeExtraData(...newArgs: unknown[]): number {
+  if (areInputsEqual(newArgs, lastArgs)) {
+    return lastResult;
+  }
+  // Something shallowly changed - return a new number from [0-10]
+  lastResult = lastResult === 10 ? 0 : lastResult + 1;
+  lastArgs = newArgs;
+  return lastResult;
+}