fix(ios): fix bad jumping when loadMinimal set true

examples/components/Basic/index.js

@@ -1,46 +1,44 @@
-import React from 'react'
-import {
-  Text,
-  View
-} from 'react-native'
-import Swiper from 'react-native-swiper'
+import React from 'react';
+import { Text, View } from 'react-native';
+import Swiper from 'react-native-swiper';
 
 var styles = {
-  wrapper: {
-  },
+  wrapper: {},
   slide1: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#9DD6EB'
+    backgroundColor: '#9DD6EB',
   },
   slide2: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#97CAE5'
+    backgroundColor: '#97CAE5',
   },
   slide3: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#92BBD9'
+    backgroundColor: '#92BBD9',
   },
   text: {
     color: '#fff',
     fontSize: 30,
-    fontWeight: 'bold'
-  }
-}
+    fontWeight: 'bold',
+  },
+};
 
-export default () => <Swiper style={styles.wrapper} showsButtons>
-  <View style={styles.slide1}>
-    <Text style={styles.text}>Hello Swiper</Text>
-  </View>
-  <View style={styles.slide2}>
-    <Text style={styles.text}>Beautiful</Text>
-  </View>
-  <View style={styles.slide3}>
-    <Text style={styles.text}>And simple</Text>
-  </View>
-</Swiper>
+export default () => (
+  <Swiper style={styles.wrapper} showsButtons loop={false}>
+    <View style={styles.slide1}>
+      <Text style={styles.text}>Hello Swiper</Text>
+    </View>
+    <View style={styles.slide2}>
+      <Text style={styles.text}>Beautiful</Text>
+    </View>
+    <View style={styles.slide3}>
+      <Text style={styles.text}>And simple</Text>
+    </View>
+  </Swiper>
+);

examples/components/LoadMinimal/index.tsx

@@ -65,18 +65,16 @@ const SlideSchema: ModelType<SlideState, SlideActions> = {
 };
 
 const Slide = props => {
-  const [loaded, setLoaded] = useState(false);
   return (
     <View style={styles.slide}>
       <Image
         onLoad={() => {
           props.loadHandle(props.i);
-          setLoaded(true);
         }}
         style={styles.image}
         source={{ uri: props.uri }}
       />
-      {!loaded && (
+      {!props.loaded && (
         <View style={styles.loadingView}>
           <Image style={styles.loadingImage} source={loading} />
         </View>
@@ -91,24 +89,29 @@ const Page = () => {
   const loadHandle = useCallback((i: number) => {
     actions.loaded(i);
   }, []);
-  // render() {
   return (
     <View style={{ flex: 1 }}>
       <Swiper
         loadMinimal
         loadMinimalSize={1}
+        // index={0}
         style={styles.wrapper}
-        loop={false}>
+        loop={true}>
         {state.imgList.map((item, i) => (
-          <Slide loadHandle={loadHandle} uri={item} i={i} key={i} />
+          <Slide
+            loadHandle={loadHandle}
+            uri={item}
+            i={i}
+            key={i}
+            loaded={state.loadQueue[i]}
+          />
         ))}
       </Swiper>
       <View>
         <Text>Current Loaded Images: {state.loadQueue}</Text>
       </View>
     </View>
   );
-  // }
 };
 
 export default Page;

examples/components/Loop/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, StyleSheet } from 'react-native';
 import Swiper from 'react-native-swiper';
 
-var styles = {
+var styles = StyleSheet.create({
   wrapper: {},
   slide1: {
     flex: 1,
@@ -27,10 +27,10 @@ var styles = {
     fontSize: 30,
     fontWeight: 'bold',
   },
-};
+});
 
 export default () => (
-  <Swiper style={styles.wrapper} loop={true} showsButtons>
+  <Swiper style={styles.wrapper} loop={true} index={0} showsButtons>
     <View style={styles.slide1}>
       <Text style={styles.text}>Hello Swiper</Text>
     </View>

examples/index.js

@@ -2,14 +2,15 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
 
 import Basic from './components/Basic'; // Only update index when scrollEnd
+import Loop from './components/Loop';
 import Dynamic from './components/Dynamic/';
-import LoadMinimal from './components/LoadMinimal/'; // not working
-import Phone from './components/Phone/'; // not working
+import LoadMinimal from './components/LoadMinimal/'; // flicker existing when shift from last to first (or last to first)
+import Phone from './components/Phone/';
 // import PhotoView from './components/PhotoView/'; // not working
-import Swiper from './components/Swiper/'; // working but no title displayed, direction not work well
+import Swiper from './components/Swiper/'; // working but no title displayed, direction vertical not work well on android
 import SwiperNumber from './components/SwiperNumber/'; // working but no title displayed
-AppRegistry.registerComponent(appName, () => LoadMinimal);
+AppRegistry.registerComponent(appName, () => Basic);

package.json

@@ -5,7 +5,7 @@
     "react-native",
     "ios"
   ],
-  "version": "1.6.0-nightly.4",
+  "version": "1.6.0-nightly.5",
   "description": "Swiper component for React Native.",
   "main": "index.js",
   "scripts": {

src/index.js

@@ -226,9 +226,13 @@ export default class extends Component {
       this.autoplay()
     }
     if (this.props.children !== prevProps.children) {
-      this.setState(
-        this.initState({ ...this.props, index: this.state.index }, true)
-      )
+      if (this.props.loadMinimal && Platform.OS === 'ios') {
+        this.setState({ ...this.props, index: this.state.index })
+      } else {
+        this.setState(
+          this.initState({ ...this.props, index: this.state.index }, true)
+        )
+      }
     }
   }
 
@@ -310,11 +314,7 @@ export default class extends Component {
 
     // only update the offset in state if needed, updating offset while swiping
     // causes some bad jumping / stuttering
-    if (
-      !this.state.offset ||
-      width !== this.state.width ||
-      height !== this.state.height
-    ) {
+    if (!this.state.offset) {
       state.offset = offset
     }
 
@@ -439,8 +439,7 @@ export default class extends Component {
     // Android ScrollView will not scrollTo certain offset when props change
     const callback = async () => {
       cb()
-      // TODO: support loadMinimal
-      if (Platform.OS === 'android' && !this.props.loadMinimal) {
+      if (Platform.OS === 'android' && this.props.loop) {
         if (this.state.index === 0) {
           this.props.horizontal
             ? this.scrollView.scrollTo({