Fix android onboarding (#978)

* remove pages totally, slips a few permissions fixes in for android
textileio · Mar 25, 2019 · 29c0458 · 29c0458
1 parent ba089e4
commit 29c0458
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/App/Containers/OnboardingScreen/index.tsx b/App/Containers/OnboardingScreen/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { SafeAreaView, ViewStyle, View, TouchableOpacity } from 'react-native'
-import { Pages } from 'react-native-pages'
 import { NavigationScreenProps } from 'react-navigation'
 import { connect } from 'react-redux'
 import { Dispatch } from 'redux'
@@ -21,6 +20,14 @@ const CONTAINER: ViewStyle = {
   backgroundColor: color.screen_primary
 }
 
+const DOT: ViewStyle = {
+  margin: 3,
+  height: 8,
+  width: 8,
+  backgroundColor: color.action_6,
+  borderRadius: 4
+}
+
 const ARROW_FORWARD: ViewStyle = {
   position: 'absolute',
   bottom: spacing._016,
@@ -41,6 +48,7 @@ type Props = StateProps & DispatchProps & NavigationScreenProps
 interface State {
   showArrow: boolean
   currentPage: number
+  disableNext: boolean
 }
 
 class OnboardingScreen extends React.Component<Props, State> {
@@ -51,7 +59,8 @@ class OnboardingScreen extends React.Component<Props, State> {
     super(props)
     this.state = {
       showArrow: false,
-      currentPage: 0
+      currentPage: 0,
+      disableNext: false
     }
   }
 
@@ -62,28 +71,22 @@ class OnboardingScreen extends React.Component<Props, State> {
   }
 
   showArrowForIndex = (index: number) => {
-    if (!this.pages || !this.pages.props.children[index]) {
-      return false
-    }
-    const showArrow = this.pages.props.children[index].props.showArrow
-    return showArrow
+    return index <= 2
   }
 
   nextPage = () => {
-    if (this.pages && this.pages.props.children.length - 1 > this.state.currentPage) {
+    if (!this.state.disableNext && this.pages && this.pages.length - 1 > this.state.currentPage) {
       this.setState({
-        showArrow: this.showArrowForIndex(this.state.currentPage + 1)
+        showArrow: this.showArrowForIndex(this.state.currentPage + 1),
+        currentPage: this.state.currentPage + 1,
+        disableNext: true
       })
-      this.pages.scrollToPage(this.state.currentPage + 1)
+      setTimeout(() => {
+        this.setState({disableNext: false})
+      }, 750)
     }
   }
 
-  onScrollEnd = () => {
-    this.setState({
-      currentPage: this.state.currentPage + 1
-    })
-  }
-
   complete = () => {
     this.props.complete()
     this.props.navigation.navigate('StatusCheck')
@@ -153,20 +156,26 @@ class OnboardingScreen extends React.Component<Props, State> {
   }
 
   render() {
-    const pages = this.pagesArray()
+    this.pages = this.pagesArray()
     return (
       <SafeAreaView style={CONTAINER}>
         <View style={CONTAINER}>
-          <Pages
-            ref={(pages: any) => { this.pages = pages ? pages : undefined }}
-            style={[CONTAINER]}
-            containerStyle={{ marginBottom: spacing._016 }}
-            indicatorColor={color.accent2_2}
-            scrollEnabled={false}
-            onScrollEnd={this.onScrollEnd}
+          <View
+            style={[CONTAINER, { marginBottom: spacing._016 }]}
           >
-            {pages}
-          </Pages>
+            {this.pages[this.state.currentPage]}
+          </View>
+          {this.state.currentPage < 7 &&
+            <View style={{height: 60, width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
+              <View style={[DOT, this.pages && this.state.currentPage === 0 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 1 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 2 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 3 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 4 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 5 && {backgroundColor: color.action_4}]} />
+              <View style={[DOT, this.pages && this.state.currentPage === 6 && {backgroundColor: color.action_4}]} />
+            </View>
+          }
           {this.state.showArrow &&
             <TouchableOpacity hitSlop={{ top: 10, left: 10, bottom: 10, right: 10}} style={ARROW_FORWARD} onPress={this.nextPage}>
               <Icon name={'arrow-right'} size={24} />

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -1,5 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.textile">
+    package="com.textile"
+    xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
@@ -8,6 +9,10 @@
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.READ_CONTACTS" />
+    <!-- Remove some unused RN default permissions -->
+    <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
+    <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <!-- For API 22 and below, react-native-contacts -->
     <uses-permission android:name="android.permission.READ_PROFILE" />
 

diff --git a/package.json b/package.json
@@ -29,7 +29,6 @@
     "react-native-fs": "^2.11.17",
     "react-native-image-picker": "^0.27.1",
     "react-native-modal": "^6.5.0",
-    "react-native-pages": "^0.7.0",
     "react-native-push-notification": "^3.1.1",
     "react-native-qrcode": "^0.2.7",
     "react-native-scalable-image": "^0.4.0",

diff --git a/yarn.lock b/yarn.lock
@@ -4693,7 +4693,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -4912,12 +4912,6 @@ react-native-modal@^6.5.0:
     prop-types "^15.6.1"
     react-native-animatable "^1.2.4"
 
-react-native-pages@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-pages/-/react-native-pages-0.7.0.tgz#1ae1cddc136cdca54d3a61a47db79bae8d432fb8"
-  dependencies:
-    prop-types "^15.5.9"
-
 react-native-platform-touchable@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"