Fix adjacent views polishing

examples/components/HorizantalAdjacentViews/index.js

@@ -0,0 +1,73 @@
+import React, { useRef } from 'react'
+import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'
+import Swiper from 'react-native-swiper'
+
+const data = []
+for (let i = 1; i <= 10; i++) {
+  data.push(i)
+}
+export default function App() {
+  const ref = useRef()
+  return (
+    <View style={styles.container}>
+      <Swiper
+        ref={ref}
+        showsButtons={true}
+        horizontal={true}
+        loop={true}
+        onIndexChanged={i => {
+          console.log('painted ', i)
+        }}
+        loadMinimal={true}
+        loadMinimalSize={3}
+        loadMinimalLoader={<Loading />}
+        showAdjacentViews={true}
+        adjacentViewsWidth={40}
+        adjacentViewsPadding={2}
+        decelerationRate={0.7}
+      >
+        {data.map((item, index) => {
+          return (
+            <View
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'red',
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}
+              key={index}
+            >
+              <Text style={{ color: 'white', fontSize: 30 }}>{item}</Text>
+            </View>
+          )
+        })}
+      </Swiper>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+const Loading = () => (
+  <View
+    style={{
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'blue',
+      justifyContent: 'center',
+      alignItems: 'center',
+      elevation: 4
+    }}
+  >
+    <ActivityIndicator size="large" color="orange" />
+  </View>
+)

examples/components/VerticalAdjacentViews/index.js

@@ -0,0 +1,73 @@
+import React, { useRef } from 'react'
+import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'
+import Swiper from 'react-native-swiper'
+
+const data = []
+for (let i = 1; i <= 10; i++) {
+  data.push(i)
+}
+export default function App() {
+  const ref = useRef()
+  return (
+    <View style={styles.container}>
+      <Swiper
+        ref={ref}
+        showsButtons={true}
+        horizontal={false}
+        loop={true}
+        onIndexChanged={i => {
+          console.log('painted ', i)
+        }}
+        loadMinimal={true}
+        loadMinimalSize={3}
+        loadMinimalLoader={<Loading />}
+        showAdjacentViews={true}
+        adjacentViewsWidth={40}
+        adjacentViewsPadding={2}
+        decelerationRate={0.7}
+      >
+        {data.map((item, index) => {
+          return (
+            <View
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'red',
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}
+              key={index}
+            >
+              <Text style={{ color: 'white', fontSize: 30 }}>{item}</Text>
+            </View>
+          )
+        })}
+      </Swiper>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+const Loading = () => (
+  <View
+    style={{
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'blue',
+      justifyContent: 'center',
+      alignItems: 'center',
+      elevation: 4
+    }}
+  >
+    <ActivityIndicator size="large" color="orange" />
+  </View>
+)

examples/index.tsx

@@ -25,6 +25,8 @@ import Phone from './components/Phone'
 // import PhotoView from './components/PhotoView/'; // not working
 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
+import VerticalAdjacentViews from './components/VerticalAdjacentViews'
+import HorizantalAdjacentViews from './components/HorizantalAdjacentViews'
 import { createAppContainer } from 'react-navigation'
 
 const DATA = [
@@ -57,7 +59,13 @@ const DATA = [
   },
   {
     name: 'SwiperNumber'
-  }
+  },
+  {
+    name: 'HorizantalAdjacentViews'
+  },
+  {
+    name: 'VerticalAdjacentViews'
+  },
 ]
 
 function Item({ title, navigation }) {
@@ -96,7 +104,9 @@ const AppNavigator = createStackNavigator(
     NestSwiper,
     Phone,
     Swiper,
-    SwiperNumber
+    SwiperNumber,
+    VerticalAdjacentViews,
+    HorizantalAdjacentViews
   },
   {
     initialRouteName: 'Home'