edited

app/containers/Tutorial/tutorial.js

@@ -0,0 +1,230 @@
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Alert,
+  SafeAreaView,
+  Image
+} from "react-native";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react/native";
+import ScrollableTabView from "react-native-scrollable-tab-view";
+import { scale, verticalScale, moderateScale } from "react-native-size-matters";
+import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
+// function
+import { width, height } from "../../config/screen";
+import theme from "../../config/colors";
+import { Fonts } from "../../config/fonts";
+import Size from "../../config/size";
+import AsyncStorageHelper from "../../config/asyncStorageHelper";
+import language from "../../config/language";
+const asyncStorageHelper = new AsyncStorageHelper();
+import Swiper from "react-native-swiper";
+var size = new Size();
+@inject(["menuStore"], ["userStore"])
+@observer
+export default class Tutorial extends Component {
+  constructor(props) {
+    super(props);
+    this.store = this.props.userStore;
+    this.menuStore = this.props.menuStore;
+  }
+  componentWillMount() {
+    const { navigation } = this.props;
+    this.data = navigation.getParam("data", {});
+    console.log(this.data);
+  }
+
+  init() {
+    console.log(this.store.logined);
+    if (!this.store.logined) {
+      //   this.props.navigation.navigate("Login");
+    } else {
+    }
+  }
+
+  navigatieAction(page, Param) {
+    this.props.navigation.navigate(page, Param);
+  }
+
+  closeButton() {
+    return (
+      <Icon
+        name="close-circle"
+        size={size.getSize(30)}
+        color={'white'}
+        style={{ position: "absolute", top: 15,left:10 }}
+        onPress={() => this.finish()}
+      />
+    );
+  }
+
+  swiper(){
+    if(this.store.languageSelection === 'english'){
+     return(
+      <Swiper
+      style={styles.wrapper}
+      activeDot={
+        <View
+          style={{
+            backgroundColor: "white",
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            marginLeft: 3,
+            marginRight: 3,
+            marginTop: 3,
+            marginBottom: 3
+          }}
+        />
+      }
+    >
+      <View style={styles.slide1}>
+        <Image
+          source={require("../../images/apppreview_en1.jpg")}
+          style={styles.image}
+        />
+        {this.closeButton()}
+      </View>
+      <View style={styles.slide1}>
+        <Image
+          source={require("../../images/apppreview_en2.jpg")}
+          style={styles.image}
+        />
+        {this.closeButton()}
+      </View>
+      <View style={styles.slide1}>
+        <Image
+          source={require("../../images/apppreview_en3.jpg")}
+          style={styles.image}
+        />
+        {this.closeButton()}
+      </View>
+      <View style={styles.slide1}>
+        <Image
+          source={require("../../images/apppreview_en4.jpg")}
+          style={styles.image}
+        />
+        {this.closeButton()}
+      </View>
+    </Swiper>
+     )
+    }else{
+   return(
+    <Swiper
+    style={styles.wrapper}
+    activeDot={
+      <View
+        style={{
+          backgroundColor: "white",
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          marginLeft: 3,
+          marginRight: 3,
+          marginTop: 3,
+          marginBottom: 3
+        }}
+      />
+    }
+  >
+    <View style={styles.slide1}>
+      <Image
+        source={require("../../images/apppreview_ch1.jpg")}
+        style={styles.image}
+      />
+      {this.closeButton()}
+    </View>
+    <View style={styles.slide1}>
+      <Image
+        source={require("../../images/apppreview_ch2.jpg")}
+        style={styles.image}
+      />
+      {this.closeButton()}
+    </View>
+    <View style={styles.slide1}>
+      <Image
+        source={require("../../images/apppreview_ch3.jpg")}
+        style={styles.image}
+      />
+      {this.closeButton()}
+    </View>
+    <View style={styles.slide1}>
+      <Image
+        source={require("../../images/apppreview_ch4.jpg")}
+        style={styles.image}
+      />
+      {this.closeButton()}
+    </View>
+  </Swiper>
+   )
+    }
+  }
+
+  finish() {
+    const { navigation } = this.props;
+    var data = navigation.getParam("data", {});
+    if (data == "store") {
+      this.navigatieAction("LocationRequest");
+    } else {
+      this.props.navigation.goBack();
+    }
+  }
+  render() {
+    return (
+      <SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
+        <View style={styles.container}>
+        
+         {this.swiper()}
+        </View>
+      </SafeAreaView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: height,
+    width: width
+  },
+  image: {
+    width: width,
+    height: height
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: "center",
+    margin: 10
+  },
+  instructions: {
+    textAlign: "center",
+    color: "#333333",
+    marginBottom: 5
+  },
+  slide1: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.mainColor
+  },
+  slide2: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#97CAE5"
+  },
+  slide3: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#92BBD9"
+  },
+  text: {
+    color: "#fff",
+    fontSize: 30,
+    fontWeight: "bold"
+  }
+});