Fixes pairing view and cleans/simplifies the interface a bit

App/Containers/PairingView.js

@@ -1,33 +1,35 @@
 // @flow
 import React from 'react'
-import { View, Text, ImageBackground, Dimensions, Linking } from 'react-native'
-import { Overlay, Button } from 'react-native-elements'
+import { View, Text, Button } from 'react-native'
 import { connect } from 'react-redux'
 import Actions from '../Redux/TextileRedux'
 
-// More info here: https://facebook.github.io/react-native/docs/flatlist.html
-
 // Styles
-import styles from './Styles/PairingViewStyle'
+import style from './Styles/PairingViewStyle'
+import photosStyle from './Styles/TextilePhotosStyle'
+import { Colors } from '../Themes'
 
 class PairingView extends React.PureComponent {
   constructor (props) {
     super(props)
     this.state = {
-      data: [],
-      limit: 10
+      paired: false
     }
   }
 
-  confirmPairing = (pubKey) => {
-    return () => {
-      this.props.pairNewDevice(pubKey)
-      this.props.navigation.navigate('TextilePhotos')
-    }
+  confirmPairing = () => {
+    let params = this.getParams(this.props.navigation.state.params.data)
+    // TODO: we should actually wait for pairing success here
+    this.props.pairNewDevice(params['key'])
+    this.setState(() => ({paired: true}))
   }
 
   cancelPairing = () => {
-    this.props.navigation.goBack(null)
+    this.props.navigation.navigate('OnboardingCheck')
+  }
+
+  continue = () => {
+    this.props.navigation.navigate('OnboardingCheck')
   }
 
   getParams (url) {
@@ -50,42 +52,83 @@ class PairingView extends React.PureComponent {
     }
     return queryString
   }
-  render () {
-    let code = 'WARN'
-    let pubKey = null
-    if (this.props.navigation.state.params.data) {
-      let params = this.getParams(this.props.navigation.state.params.data)
-      if ('code' in params) {
-        code = params['code']
-      }
-      if ('key' in params) {
-        pubKey = params['key']
-      }
-    }
 
-    const onConfirm = this.confirmPairing(pubKey)
+  renderPairing (code) {
+    return (
+      <View style={[photosStyle.container, style.container]}>
+        <View>
+          <Text style={style.title}>{code}</Text>
+          <Text style={style.message}>
+            A new device is requesting to pair with your Textile Wallet. The Textile app running on the new device will have access to your private encryption keys and all privately stored data. Be sure that this is your device and that you see the above code displayed on the new device.
+          </Text>
+          <Button
+            style={style.button}
+            title='Pair Device'
+            accessibilityLabel='pair device'
+            onPress={this.confirmPairing.bind(this)}
+          />
+          <View style={style.buttonMargin} />
+          <Button
+            style={style.button}
+            title='Not Now'
+            accessibilityLabel='do not pair'
+            onPress={this.cancelPairing}
+          />
+        </View>
+      </View>
+    )
+  }
+
+  renderSuccess () {
+    return (
+      <View style={[photosStyle.container, style.container]}>
+        <View>
+          <Text style={style.title}>SUCCESS!</Text>
+          <View style={style.buttonMargin} />
+          <Button
+            style={style.button}
+            title='Continue'
+            accessibilityLabel='continue'
+            onPress={this.continue.bind(this)}
+          />
+        </View>
+      </View>
+    )
+  }
 
+  renderError () {
     return (
-      <View style={{alignSelf: 'center'}}>
-        <Text style={{alignSelf: 'center'}}>New Device Request</Text>
-        <Text style={{fontWeight: 'bold', fontSize: 50, margin: 40}}>{code}</Text>
-        <Button buttonStyle={{
-          height: 45,
-          borderColor: 'transparent',
-          borderWidth: 0,
-          borderRadius: 5
-        }} title='Pair Device' onPress={onConfirm} />
-        <Button buttonStyle={{
-          backgroundColor: 'rgba(66, 22, 77, 1)',
-          height: 45,
-          borderColor: 'transparent',
-          borderWidth: 0,
-          borderRadius: 5,
-          marginVertical: 20
-        }} title='Not Now' onPress={this.cancelPairing} />
+      <View style={[photosStyle.container, style.container]}>
+        <View>
+          <Text style={style.title}>ERROR</Text>
+          <Text style={style.message}>
+            There was an issue pairing with your new device. This may be caused by network connectivity or other issues. Please try again. If it continues, please report the issue with Textile.
+          </Text>
+          <Button
+            style={{
+              fontFamily: 'Biotif-Regular',
+              color: Colors.charcoal,
+              fontSize: 18,
+              textAlign: 'justify'
+            }}
+            title='Continue'
+            accessibilityLabel='continue'
+            onPress={this.continue.bind(this)}
+          />
+        </View>
       </View>
     )
   }
+
+  render () {
+    let params = this.getParams(this.props.navigation.state.params.data)
+    if (!params.key || !params.code) {
+      return this.renderError()
+    } else if (this.state.paired) {
+      return this.renderSuccess()
+    }
+    return this.renderPairing(params.code)
+  }
 }
 
 const mapStateToProps = state => {

App/Containers/Styles/PairingViewStyle.js

@@ -4,49 +4,22 @@ import { ApplicationStyles, Metrics, Colors } from '../../Themes'
 export default StyleSheet.create({
   ...ApplicationStyles.screen,
   container: {
-    flex: 1,
-    borderTopColor: Colors.transparent,
-    borderTopWidth: 0,
-    borderBottomColor: Colors.test,
-    borderBottomWidth: 0,
-    paddingLeft: 18,
-    paddingRight: 18,
-    paddingTop: 20
+    flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'
   },
-  cardStyle: {
-    // padding: 0,
+  title: {
+    marginBottom: 14, alignSelf: 'center', fontWeight: 'bold', fontSize: 50, fontFamily: 'Biotif-Regular'
   },
-  notification: {
-    flexDirection: 'row',
-    flex: 1,
-    maxWidth: '75%',
+  message: {
+    padding: 30, marginBottom: 20, alignSelf: 'center', fontFamily: 'Biotif-Regular', fontSize: 18, textAlign: 'justify'
   },
-  avatar: {
-    // position: 'relative',
-    marginRight: 20,
-  },
-  notificationText: {
-    color: Colors.coal,
-  },
-  boldLabel: {
-    fontWeight: 'bold',
+  button: {
+    fontFamily: 'Biotif-Regular',
+    color: Colors.charcoal,
+    fontSize: 18,
     alignSelf: 'center',
-    color: Colors.ember,
-    textAlign: 'center',
-    marginBottom: Metrics.smallMargin
-  },
-  label: {
-    textAlign: 'center',
-    color: Colors.snow
-  },
-  listContent: {
-    marginTop: 0, ///Metrics.baseMargin
-  },
-  backgroundImage: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
+    textAlign: 'justify'
   },
+  buttonMargin: {
+    backgroundColor: 'transparent', height: 22
+  }
 })

App/Navigation/AppNavigation.js

@@ -3,12 +3,14 @@ import { SwitchNavigator } from 'react-navigation'
 import OnboardingNavigation from './OnboardingNavigation'
 import TextileManager from '../Containers/TextileManager'
 import OnboardingCheck from '../Containers/OnboardingCheck'
+import PairingView from '../Containers/PairingView'
 
 const PrimaryNav = SwitchNavigator(
   {
     OnboardingCheck: OnboardingCheck,
     OnboardingNavigation: OnboardingNavigation,
-    TextileManager: TextileManager
+    TextileManager: TextileManager,
+    PairingView: PairingView
   },
   {
     initialRouteName: 'OnboardingCheck'

App/Navigation/PhotosNavigation.js

@@ -5,11 +5,9 @@ import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import TextilePhotos from '../Containers/TextilePhotos'
 import InfoView from '../Containers/InfoView'
-import PairingView from '../Containers/PairingView'
 import PhotoViewerScreen from '../Containers/PhotoViewerScreen'
 import Colors from '../Themes/Colors'
 // import Notifications from '../Containers/Notifications'
-import { Image } from 'react-native'
 
 // import SwipeNavigation from './SwipeNavigation'
 
@@ -124,30 +122,13 @@ const PhotoViewerStack = DismissableStackNavigator(
   }
 )
 
-const PairingStackNav = DismissableStackNavigator(
-  {
-    Pairing: PairingView
-  },
-  {
-    headerMode: 'float',
-    navigationOptions: {
-      headerStyle: styles.header,
-      headerTitleStyle: styles.headerTitle,
-      headerTintColor: headerTintColor
-    }
-  }
-)
-
 const RootStack = StackNavigator(
   {
     PrimaryNav: {
       screen: TabNav
     },
     PhotoViewer: {
       screen: PhotoViewerStack
-    },
-    PairingView: {
-      screen: PairingStackNav
     }
   },
   {