From 7a7ad1fe0629002aaaa080cf809f11b6e9728c8f Mon Sep 17 00:00:00 2001
From: Mehdi Achour <machour@gmail.com>
Date: Tue, 17 Oct 2017 20:16:07 +0100
Subject: [PATCH 1/2] refactor: Drop rn-app-intro in favor of
 react-native-swiper

---
 package.json                     |  4 ++--
 src/auth/screens/login.screen.js | 22 ++++++++++-----------
 yarn.lock                        | 34 +++++---------------------------
 3 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index de991565f..a4d95f993 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "react-native-photo-view": "^1.5.2",
     "react-native-safari-view": "^2.0.0",
     "react-native-search-bar": "^3.0.0",
+    "react-native-swiper": "^1.5.13",
     "react-native-syntax-highlighter": "^1.2.1",
     "react-native-table-component": "^1.0.5",
     "react-native-vector-icons": "^4.4.0",
@@ -86,8 +87,7 @@
     "redux-persist": "^4.3.1",
     "redux-persist-transform-encrypt": "^1.0.2",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1",
-    "rn-app-intro": "^0.0.4"
+    "reselect": "^3.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^3.1.0",
diff --git a/src/auth/screens/login.screen.js b/src/auth/screens/login.screen.js
index 6271beea8..045da0f25 100644
--- a/src/auth/screens/login.screen.js
+++ b/src/auth/screens/login.screen.js
@@ -14,7 +14,7 @@ import {
   Modal,
 } from 'react-native';
 import { Button, Icon } from 'react-native-elements';
-import AppIntro from 'rn-app-intro';
+import Swiper from 'react-native-swiper';
 import queryString from 'query-string';
 
 import { ViewContainer } from 'components';
@@ -99,6 +99,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  signInContainer: {
+    position: 'absolute',
+    bottom: 80,
+  },
   slide: {
     flex: 1,
     justifyContent: 'center',
@@ -269,17 +273,11 @@ class Login extends Component {
                   </View>
                 </View>
               </Modal>
-              <View style={styles.miniSection}>
-                <Image
-                  style={styles.logo}
-                  source={require('../../assets/logo.png')}
-                />
-              </View>
               <View style={styles.contentSection}>
-                <AppIntro
+                <Swiper
+                  loop={false}
+                  dotColor="#FFFFFF55"
                   activeDotColor={colors.white}
-                  showSkipButton={false}
-                  showDoneButton={false}
                 >
                   <View style={[styles.slide, styles.slide1]}>
                     <Image
@@ -340,9 +338,9 @@ class Login extends Component {
                       {translate('auth.login.issuesMessage', locale)}
                     </Text>
                   </View>
-                </AppIntro>
+                </Swiper>
               </View>
-              <View style={styles.miniSection}>
+              <View style={styles.signInContainer}>
                 <Button
                   raised
                   title={translate('auth.login.signInButton', locale)}
diff --git a/yarn.lock b/yarn.lock
index 376e85c22..8aabe9593 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -320,18 +320,6 @@ assert-plus@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
 
-assign-deep@^0.4.5:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/assign-deep/-/assign-deep-0.4.6.tgz#2192a989354843093a03eff941c9473a9bc58a1d"
-  dependencies:
-    assign-symbols "^0.1.1"
-    is-primitive "^2.0.0"
-    kind-of "^5.0.2"
-
-assign-symbols@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-0.1.1.tgz#cb025944ef4ec8a3693f086e9e112c74e3a0fed9"
-
 ast-types-flow@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
@@ -3945,10 +3933,6 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.0.2.tgz#f57bec933d9a2209ffa96c5c08343607b7035fda"
-
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -5373,11 +5357,11 @@ react-native-side-menu@^0.20.1:
   version "0.20.3"
   resolved "https://registry.yarnpkg.com/react-native-side-menu/-/react-native-side-menu-0.20.3.tgz#5dffe3e237018360ed081433d505ea454cba9ca4"
 
-"react-native-swiper@git+https://github.com/FuYaoDe/react-native-swiper.git":
-  version "1.4.4"
-  resolved "git+https://github.com/FuYaoDe/react-native-swiper.git#a6417ff41a8b2d490bdcc4541015ab35736d4595"
+react-native-swiper@^1.5.13:
+  version "1.5.13"
+  resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.13.tgz#fa695cd4ab77b9a9df2d2bfee38ea7274dd07a2e"
   dependencies:
-    react-timer-mixin "^0.13.3"
+    prop-types "^15.5.10"
 
 react-native-syntax-highlighter@^1.2.1:
   version "1.2.3"
@@ -5548,7 +5532,7 @@ react-test-renderer@16.0.0-alpha.6:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
-react-timer-mixin@^0.13.2, react-timer-mixin@^0.13.3:
+react-timer-mixin@^0.13.2:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz#0da8b9f807ec07dc3e854d082c737c65605b3d22"
 
@@ -5980,14 +5964,6 @@ rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
 
-rn-app-intro@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/rn-app-intro/-/rn-app-intro-0.0.4.tgz#c094d36fa0f2c437799d5c11c89d5fbf4cc961c5"
-  dependencies:
-    assign-deep "^0.4.5"
-    prop-types "^15.5.10"
-    react-native-swiper "git+https://github.com/FuYaoDe/react-native-swiper.git"
-
 rn-host-detect@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.1.3.tgz#242d76e2fa485c48d751416e65b7cce596969e91"

From 346aab8c2c531b2910779d3c14075920fa92bf84 Mon Sep 17 00:00:00 2001
From: Mehdi Achour <machour@gmail.com>
Date: Wed, 18 Oct 2017 10:09:42 +0100
Subject: [PATCH 2/2] fix: Don't embed swiper in a View, so that it works on
 Android

---
 src/auth/screens/login.screen.js | 222 ++++++++++++++++---------------
 1 file changed, 114 insertions(+), 108 deletions(-)

diff --git a/src/auth/screens/login.screen.js b/src/auth/screens/login.screen.js
index 045da0f25..abcfd2e81 100644
--- a/src/auth/screens/login.screen.js
+++ b/src/auth/screens/login.screen.js
@@ -101,7 +101,11 @@ const styles = StyleSheet.create({
   },
   signInContainer: {
     position: 'absolute',
+    right: 0,
+    left: 0,
     bottom: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   slide: {
     flex: 1,
@@ -223,6 +227,12 @@ class Login extends Component {
     }
   };
 
+  shouldDisplayIntro() {
+    const { isLoggingIn, isAuthenticated } = this.props;
+
+    return !isAuthenticated && !isLoggingIn && this.state.asyncStorageChecked;
+  }
+
   renderLoading() {
     return (
       <View style={styles.browserLoader}>
@@ -233,124 +243,120 @@ class Login extends Component {
   }
 
   render() {
-    const { locale, isLoggingIn, isAuthenticated } = this.props;
+    const { locale, isLoggingIn } = this.props;
 
     return (
       <ViewContainer barColor="light">
-        {!isAuthenticated &&
-          !isLoggingIn &&
-          this.state.asyncStorageChecked && (
-            <View style={styles.container}>
-              <Modal
-                animationType="slide"
-                onRequestClose={() => null}
-                visible={this.state.modalVisible}
-                style={styles.container}
-              >
-                <View style={styles.modalContainer}>
-                  <View style={styles.browserSection}>
-                    <WebView
-                      source={{
-                        uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${CLIENT_ID}&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${stateRandom}`,
-                      }}
-                      onLoadStart={e => this.toggleCancelButton(e, true)}
-                      onLoadEnd={e => this.toggleCancelButton(e, false)}
-                      onNavigationStateChange={e =>
-                        this.onNavigationStateChange(e)}
-                      renderLoading={() => this.renderLoading()}
-                      startInLoadingState
-                    />
-                  </View>
-                  <View style={styles.miniSection}>
-                    <Button
-                      title={translate('auth.login.cancel', locale)}
-                      buttonStyle={styles.button}
-                      disabled={this.state.cancelDisabled}
-                      textStyle={styles.buttonText}
-                      onPress={() =>
-                        this.setModalVisible(!this.state.modalVisible)}
-                    />
-                  </View>
-                </View>
-              </Modal>
-              <View style={styles.contentSection}>
-                <Swiper
-                  loop={false}
-                  dotColor="#FFFFFF55"
-                  activeDotColor={colors.white}
-                >
-                  <View style={[styles.slide, styles.slide1]}>
-                    <Image
-                      style={styles.logo}
-                      source={require('../../assets/logo.png')}
-                    />
-                    <Text style={styles.title}>
-                      {translate('auth.login.welcomeTitle', locale)}
-                    </Text>
-                    <Text style={styles.message}>
-                      {translate('auth.login.welcomeMessage', locale)}
-                    </Text>
-                  </View>
-                  <View style={[styles.slide, styles.slide2]}>
-                    <Icon
-                      style={styles.icon}
-                      color={colors.white}
-                      size={85}
-                      name="bell"
-                      type="octicon"
-                    />
-                    <Text style={styles.title}>
-                      {translate('auth.login.notificationsTitle', locale)}
-                    </Text>
-                    <Text style={styles.message}>
-                      {translate('auth.login.notificationsMessage', locale)}
-                    </Text>
-                  </View>
-                  <View style={[styles.slide, styles.slide3]}>
-                    <Icon
-                      containerStyle={styles.iconMargin}
-                      style={styles.icon}
-                      color={colors.white}
-                      size={85}
-                      name="repo"
-                      type="octicon"
-                    />
-                    <Text style={styles.title}>
-                      {translate('auth.login.reposTitle', locale)}
-                    </Text>
-                    <Text style={styles.message}>
-                      {translate('auth.login.reposMessage', locale)}
-                    </Text>
-                  </View>
-                  <View style={[styles.slide, styles.slide4]}>
-                    <Icon
-                      containerStyle={styles.iconMargin}
-                      style={styles.icon}
-                      color={colors.white}
-                      size={85}
-                      name="git-pull-request"
-                      type="octicon"
-                    />
-                    <Text style={styles.title}>
-                      {translate('auth.login.issuesTitle', locale)}
-                    </Text>
-                    <Text style={styles.message}>
-                      {translate('auth.login.issuesMessage', locale)}
-                    </Text>
-                  </View>
-                </Swiper>
+        {this.shouldDisplayIntro() && (
+          <Swiper
+            loop={false}
+            dotColor="#FFFFFF55"
+            activeDotColor={colors.white}
+          >
+            <View style={[styles.slide, styles.slide1]}>
+              <Image
+                style={styles.logo}
+                source={require('../../assets/logo.png')}
+              />
+              <Text style={styles.title}>
+                {translate('auth.login.welcomeTitle', locale)}
+              </Text>
+              <Text style={styles.message}>
+                {translate('auth.login.welcomeMessage', locale)}
+              </Text>
+            </View>
+            <View style={[styles.slide, styles.slide2]}>
+              <Icon
+                style={styles.icon}
+                color={colors.white}
+                size={85}
+                name="bell"
+                type="octicon"
+              />
+              <Text style={styles.title}>
+                {translate('auth.login.notificationsTitle', locale)}
+              </Text>
+              <Text style={styles.message}>
+                {translate('auth.login.notificationsMessage', locale)}
+              </Text>
+            </View>
+            <View style={[styles.slide, styles.slide3]}>
+              <Icon
+                containerStyle={styles.iconMargin}
+                style={styles.icon}
+                color={colors.white}
+                size={85}
+                name="repo"
+                type="octicon"
+              />
+              <Text style={styles.title}>
+                {translate('auth.login.reposTitle', locale)}
+              </Text>
+              <Text style={styles.message}>
+                {translate('auth.login.reposMessage', locale)}
+              </Text>
+            </View>
+            <View style={[styles.slide, styles.slide4]}>
+              <Icon
+                containerStyle={styles.iconMargin}
+                style={styles.icon}
+                color={colors.white}
+                size={85}
+                name="git-pull-request"
+                type="octicon"
+              />
+              <Text style={styles.title}>
+                {translate('auth.login.issuesTitle', locale)}
+              </Text>
+              <Text style={styles.message}>
+                {translate('auth.login.issuesMessage', locale)}
+              </Text>
+            </View>
+          </Swiper>
+        )}
+        {this.shouldDisplayIntro() && (
+          <View style={styles.signInContainer}>
+            <Button
+              raised
+              title={translate('auth.login.signInButton', locale)}
+              buttonStyle={styles.button}
+              textStyle={styles.buttonText}
+              onPress={() => this.setModalVisible(true)}
+            />
+          </View>
+        )}
+        {this.shouldDisplayIntro() && (
+          <Modal
+            animationType="slide"
+            onRequestClose={() => null}
+            visible={this.state.modalVisible}
+            style={styles.container}
+          >
+            <View style={styles.modalContainer}>
+              <View style={styles.browserSection}>
+                <WebView
+                  source={{
+                    uri: `https://github.com/login/oauth/authorize?response_type=token&client_id=${CLIENT_ID}&redirect_uri=gitpoint://welcome&scope=user%20repo&state=${stateRandom}`,
+                  }}
+                  onLoadStart={e => this.toggleCancelButton(e, true)}
+                  onLoadEnd={e => this.toggleCancelButton(e, false)}
+                  onNavigationStateChange={e => this.onNavigationStateChange(e)}
+                  renderLoading={() => this.renderLoading()}
+                  startInLoadingState
+                />
               </View>
-              <View style={styles.signInContainer}>
+              <View style={styles.miniSection}>
                 <Button
-                  raised
-                  title={translate('auth.login.signInButton', locale)}
+                  title={translate('auth.login.cancel', locale)}
                   buttonStyle={styles.button}
+                  disabled={this.state.cancelDisabled}
                   textStyle={styles.buttonText}
-                  onPress={() => this.setModalVisible(true)}
+                  onPress={() => this.setModalVisible(!this.state.modalVisible)}
                 />
               </View>
             </View>
-          )}
+          </Modal>
+        )}
         {isLoggingIn && (
           <View style={styles.browserLoader}>
             <Text style={styles.browserLoadingLabel}>