From 9d94e0bc0b569fb2ffc0b97e3adec0f24cc43257 Mon Sep 17 00:00:00 2001
From: denisenricohasyim93 <denisenricohasyim93@gmail.com>
Date: Thu, 12 Oct 2017 10:39:51 +0700
Subject: [PATCH 1/3] add modal as a userguide

---
 app/containers/Main/index.js | 132 ++++++++++++++++++++++++++++++++++-
 1 file changed, 129 insertions(+), 3 deletions(-)

diff --git a/app/containers/Main/index.js b/app/containers/Main/index.js
index a386b7d3..548b9c64 100644
--- a/app/containers/Main/index.js
+++ b/app/containers/Main/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Content, Text, Spinner, Item, Input, Header } from 'native-base';
+import { Container, Content, Text, Spinner, Item, Input, Header, Card, CardItem, Left, Thumbnail, Body } from 'native-base';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   Image,
@@ -8,10 +8,13 @@ import {
   StatusBar,
   ActivityIndicator,
   KeyboardAvoidingView,
-  ScrollView
+  ScrollView,
+  Modal,
+  TouchableHighlight
 } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import AccountKit, { LoginButton } from 'react-native-facebook-account-kit';
+import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
 
 import { createTransition, Fade } from 'react-native-transition';
 import { getProfileEmail } from '../../helpers';
@@ -34,7 +37,7 @@ const background = require('./../../../assets/images/background.png');
 
 class Main extends Component {
   state = {
-    modalVisible: false
+    modalVisible: true
   };
 
   componentWillMount() {
@@ -110,6 +113,124 @@ class Main extends Component {
           <Content>
             <KeyboardAvoidingView>
               <ScrollView>
+                <View style={{marginTop: 22}}>
+                  <Modal
+                    animationType="slide"
+                    transparent={false}
+                    visible={this.state.modalVisible}
+                    onRequestClose={() => {this.setModalVisible(!this.state.modalVisible)}}
+                    >
+                    <ScrollView>
+                    <View style={{flex:1}}>
+                    <IndicatorViewPager
+                        style={{height:600}}
+                        indicator={this._renderDotIndicator()}
+                    >
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'http://media.nationalgeographic.co.id/daily/300/1:1/201609291242819/b/foto-planet-merkurius-kian-menyusut.jpg'}}
+                               style={{width: 400, height: 400}} />
+                            <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                            </Text>
+                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            alignItems: 'flex-end',
+                            }}>
+                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
+                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
+                              <Button 
+                              full 
+                              bordered 
+                              primary 
+                              style={{width: 350/3, height: 50}}
+                              onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'https://www.astronomiskungdom.se/wp-content/uploads/2017/01/venus-11022_960_720-300x300.jpg'}}
+                               style={{width: 400, height: 400}} />
+                               <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                            </Text>
+                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-end',
+                            }}>
+                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
+                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
+                              <Button 
+                                full 
+                                bordered 
+                                primary 
+                                style={{width: 350/3, height: 50}}
+                                onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                        <View style={{
+                          backgroundColor:'black',
+                          flex: 1,
+                          flexDirection: 'column',
+                          justifyContent: 'center',
+                          alignItems: 'center'}}>
+                            <Image source={{uri: 'http://www.commongroundgroup.net/wp-content/uploads/2011/10/earth-from-space-western-400x400.jpg'}}
+                               style={{width: 400, height: 400}} />
+                               <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
+                              Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                            </Text>
+                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
+                            <View style={{
+                            flex: 0,
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            alignItems: 'flex-end',
+                            }}>
+                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
+                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
+                              <Button 
+                              full 
+                              bordered 
+                              primary 
+                              style={{width: 350/3, height: 50}}
+                              onPress={() => {
+                                  this.setModalVisible(!this.state.modalVisible)
+                                }}
+                              ><Text style={{color: 'white', textAlign: 'center'}}> SKIP </Text></Button>
+                            </View>
+                        </View>
+                    </IndicatorViewPager>
+                  </View>
+                  </ScrollView>
+                  </Modal>
+
+                  {/* <TouchableHighlight onPress={() => {
+                    this.setModalVisible(true)
+                  }}>
+                    <Text>Show Modal</Text>
+                  </TouchableHighlight> */}
+                  
+                </View>
                 <View style={styles.formSection}>
                   <Item regular style={styles.item}>
                     <Input
@@ -217,6 +338,11 @@ class Main extends Component {
       </Image>
     );
   }
+
+_renderDotIndicator() {
+    return <PagerDotIndicator pageCount={3} />;
+}
+
 }
 
 Main.propTypes = {

From 1fe0dd306c8179c6b6928b620d1f246331abd8fe Mon Sep 17 00:00:00 2001
From: denisenricohasyim93 <denisenricohasyim93@gmail.com>
Date: Thu, 12 Oct 2017 10:40:38 +0700
Subject: [PATCH 2/3] add rn-viewpager

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3ff2710..b3e16b0e 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1",
+    "rn-viewpager": "^1.2.4",
     "socket.io-client": "^1.4.8"
   },
   "devDependencies": {
@@ -59,6 +60,8 @@
     "preset": "react-native"
   },
   "rnpm": {
-    "assets": ["./assets/fonts"]
+    "assets": [
+      "./assets/fonts"
+    ]
   }
 }

From f16b7af38d55e0ca3429028fdbf2d68eddd1cde5 Mon Sep 17 00:00:00 2001
From: denisenricohasyim93 <denisenricohasyim93@gmail.com>
Date: Thu, 12 Oct 2017 10:46:43 +0700
Subject: [PATCH 3/3] remove redundant comment

---
 app/containers/Main/index.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/app/containers/Main/index.js b/app/containers/Main/index.js
index 548b9c64..04dcc113 100644
--- a/app/containers/Main/index.js
+++ b/app/containers/Main/index.js
@@ -137,15 +137,12 @@ class Main extends Component {
                             <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
                               Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                             </Text>
-                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
                             <View style={{
                             flex: 0,
                             flexDirection: 'row',
                             justifyContent: 'center',
                             alignItems: 'flex-end',
                             }}>
-                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
-                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
                               <Button 
                               full 
                               bordered 
@@ -168,15 +165,12 @@ class Main extends Component {
                                <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
                               Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                             </Text>
-                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
                             <View style={{
                             flex: 0,
                             flexDirection: 'row',
                             justifyContent: 'flex-end',
                             alignItems: 'flex-end',
                             }}>
-                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
-                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
                               <Button 
                                 full 
                                 bordered 
@@ -199,15 +193,12 @@ class Main extends Component {
                                <Text style={{color: 'white', margin: 3, textAlign: 'center'}}>
                               Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                             </Text>
-                            {/* <Text style={{color: 'white', textAlign: 'right'}}>#swipeable</Text> */}
                             <View style={{
                             flex: 0,
                             flexDirection: 'row',
                             justifyContent: 'flex-end',
                             alignItems: 'flex-end',
                             }}>
-                              {/* <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> PREV </Text></Button>
-                              <Button bordered primary style={{width: 350/3, height: 50}}><Text style={{textAlign: 'center'}}> NEXT </Text></Button> */}
                               <Button 
                               full 
                               bordered 
@@ -223,13 +214,6 @@ class Main extends Component {
                   </View>
                   </ScrollView>
                   </Modal>
-
-                  {/* <TouchableHighlight onPress={() => {
-                    this.setModalVisible(true)
-                  }}>
-                    <Text>Show Modal</Text>
-                  </TouchableHighlight> */}
-                  
                 </View>
                 <View style={styles.formSection}>
                   <Item regular style={styles.item}>