Support interaction method to swiper (#962)

* support method for Swiper component

* add interaction swiper example

* update swiper example

Author: sieu-db

example/src/SwiperExample.js renamed to example/src/SwiperExample.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image, Text, StyleSheet, View } from "react-native";
-import { Swiper, SwiperItem } from "@draftbit/ui";
+import { Swiper, SwiperItem, Button } from "@draftbit/ui";
 import Section, { Container } from "./Section";
 
 const style = StyleSheet.create({
@@ -10,8 +10,9 @@ const style = StyleSheet.create({
   },
 });
 
-function SwiperExample({ theme }) {
+function SwiperExample() {
   const [data, setData] = React.useState();
+  const swiperRef = React.useRef(null);
 
   React.useEffect(() => {
     fetch("https://example-data.draftbit.com/properties?_limit=10")
@@ -22,22 +23,26 @@ function SwiperExample({ theme }) {
   }, []);
 
   if (!data) {
-    return <Text>"Loading..."</Text>;
+    return <Text>Loading...</Text>;
   }
 
   return (
-    <Container>
-      <Section title="Horizontal Example">
+    <Container style={undefined}>
+      <Section title="Horizontal Example" style={undefined}>
         <Swiper
           vertical={false}
           loop={true}
           prevTitle="Previous"
           nextTitle="Next"
           style={{ width: "100%", height: 300 }}
-          onSwipe={(index) => console.log("Swiped", index)}
-          onSwipedNext={(index) => console.log("Swiped next", index)}
-          onSwipedPrevious={(index) => console.log("Swiped previous", index)}
-          onIndexChanged={(index) => console.log("onIndexChanged: ", index)}
+          onSwipe={(index: number) => console.log("Swiped", index)}
+          onSwipedNext={(index: number) => console.log("Swiped next", index)}
+          onSwipedPrevious={(index: number) =>
+            console.log("Swiped previous", index)
+          }
+          onIndexChanged={(index: number) =>
+            console.log("onIndexChanged: ", index)
+          }
         >
           <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
             <Text>Test Slide 1</Text>
@@ -50,7 +55,7 @@ function SwiperExample({ theme }) {
           </SwiperItem>
         </Swiper>
       </Section>
-      <Section title="Vertical Example">
+      <Section title="Vertical Example" style={undefined}>
         <Swiper
           vertical={true}
           style={{ width: "100%", height: 300 }}
@@ -64,11 +69,11 @@ function SwiperExample({ theme }) {
             <Text>Test Slide 2</Text>
           </SwiperItem>
           <SwiperItem style={[style.item, { backgroundColor: "#c9fdd9" }]}>
-            <Text>Test Slide 2</Text>
+            <Text>Test Slide 3</Text>
           </SwiperItem>
         </Swiper>
       </Section>
-      <Section title="Data-Driven Example">
+      <Section title="Data-Driven Example" style={undefined}>
         <Swiper
           vertical={false}
           loop={true}
@@ -80,8 +85,8 @@ function SwiperExample({ theme }) {
           dotActiveColor="black"
           style={{ width: "100%", height: 300 }}
           data={data}
-          keyExtractor={(item) => item.id}
-          renderItem={({ item }) => (
+          keyExtractor={(item: any) => item.id}
+          renderItem={({ item }: { item: any }) => (
             <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
               <View style={{ alignItems: "center", justifyContent: "center" }}>
                 <Image
@@ -95,6 +100,53 @@ function SwiperExample({ theme }) {
           )}
         />
       </Section>
+      <Section title="Interaction Example" style={undefined}>
+        <Swiper
+          ref={swiperRef}
+          vertical={false}
+          loop={true}
+          style={{ width: "100%", height: 300 }}
+          onSwipe={(index: number) => console.log("Swiped", index)}
+          onSwipedNext={(index: number) => console.log("Swiped next", index)}
+          onSwipedPrevious={(index: number) =>
+            console.log("Swiped previous", index)
+          }
+          onIndexChanged={(index: number) =>
+            console.log("onIndexChanged: ", index)
+          }
+        >
+          <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
+            <Text>Test Slide 1</Text>
+          </SwiperItem>
+          <SwiperItem style={[style.item, { backgroundColor: "#d6d3fd" }]}>
+            <Text>Test Slide 2</Text>
+          </SwiperItem>
+          <SwiperItem style={[style.item, { backgroundColor: "#c9fdd9" }]}>
+            <Text>Test Slide 3</Text>
+          </SwiperItem>
+        </Swiper>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-around",
+            marginTop: 10,
+          }}
+        >
+          <Button
+            title="Swipe Prev"
+            onPress={() => swiperRef.current?.swipePrev()}
+          />
+          <Button
+            title="Swipe To 1"
+            onPress={() => swiperRef.current?.swipeTo(1)}
+          />
+          <Button
+            title="Swipe Next"
+            onPress={() => swiperRef.current?.swipeNext()}
+          />
+        </View>
+      </Section>
     </Container>
   );
 }