Add autobind decorator and fix Android login screen

mobile/.babelrc

@@ -6,6 +6,7 @@
     "development": {
       "plugins": [
         "transform-react-jsx-source",
+        "transform-decorators-legacy",
         "transform-inline-environment-variables"
       ]
     }

mobile/package-lock.json

@@ -454,10 +454,10 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.0.3.tgz",
       "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10="
     },
-    "auto-bind2": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/auto-bind2/-/auto-bind2-1.0.3.tgz",
-      "integrity": "sha512-+br9nya9M8ayHjai7m9rdpRxuEr8xcYRDrIp7HybNe0ixUHbc1kDiWXKMb0ldsfWb9Zi+SqJ9JfjW8nTkYD0QQ=="
+    "autobind-decorator": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.1.0.tgz",
+      "integrity": "sha512-bgyxeRi1R2Q8kWpHsb1c+lXCulbIAHsyZRddaS+agAUX3hFUVZMociwvRgeZi1zWvfqEEjybSv4zxWvFV8ydQQ=="
     },
     "aws-sign2": {
       "version": "0.7.0",

mobile/package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-inline-environment-variables": "^0.3.0",
     "babel-preset-react-native-stage-0": "^1.0.1",
     "jest-react-native": "^18.0.0",
-    "react-test-renderer": "16.2.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.3.0"
+    "react-test-renderer": "16.2.0"
   },
   "scripts": {
     "start": "react-native start",
@@ -18,7 +19,7 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "auto-bind2": "^1.0.3",
+    "autobind-decorator": "^2.1.0",
     "eventemitter3": "^3.0.1",
     "npm": "^5.7.1",
     "react": "16.2.0",

mobile/src/screens/Error.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, Image, Button } from 'react-native';
-import { reactAutoBind } from 'auto-bind2'
 
 export class Error extends React.Component {
   static navigatorStyle = {
@@ -17,11 +16,6 @@ export class Error extends React.Component {
     },
   })
 
-  constructor(props) {
-    super(props)
-    reactAutoBind(this)
-  }
-
   render() {
     return (
       <View style={Login.styles.page}>

mobile/src/screens/Login.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { StyleSheet, Text, Image, Switch, TextInput, KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native';
+import { Platform, StyleSheet, Text, Image, Switch, TextInput,
+  KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native';
 import logoImage from './images/deighton.png'
 import { FormBinder } from 'react-form-binder'
 import { api } from '../API'
 import { BoundSwitch, BoundInput, BoundButton } from '../ui'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class Login extends React.Component {
   static navigatorStyle = {
@@ -67,12 +68,12 @@ export class Login extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       binder: new FormBinder({}, Login.bindings)
     }
   }
 
+  @autobind
   handleLogin() {
     let obj = this.state.binder.getModifiedFieldValues()
     let { navigator } = this.props
@@ -88,7 +89,8 @@ export class Login extends React.Component {
 
   render() {
     return (
-      <KeyboardAvoidingView style={Login.styles.page} behavior='padding'>
+      <KeyboardAvoidingView style={Login.styles.page} behavior='padding'
+        keyboardVerticalOffset={Platform.select({ios: () => 0, android: () => 200})}>
         <Image style={Login.styles.logo} source={logoImage} resizeMode='contain' />
         <View style={Login.styles.inputRow}>
           <BoundInput name='email' label='Email:' placeholder='name@xyz.com' message='Must enter a valid email' binder={this.state.binder} />

mobile/src/ui/BoundButton.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Text, TouchableHighlight } from 'react-native'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class BoundButton extends React.Component {
   static propTypes = {
@@ -15,7 +15,6 @@ export class BoundButton extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
 
     let { name, binder } = this.props
 
@@ -23,6 +22,7 @@ export class BoundButton extends React.Component {
     this.state = binder.getFieldState(name)
   }
 
+  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

mobile/src/ui/BoundInput.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TextInput, Text, View } from 'react-native'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class BoundInput extends React.Component {
   static propTypes = {
@@ -15,10 +15,10 @@ export class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = props.binder.getFieldState(props.name)
   }
 
+  @autobind
   handleChangeText(newText) {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)

mobile/src/ui/BoundSwitch.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Switch, Text } from 'react-native'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class BoundSwitch extends React.Component {
   static propTypes = {
@@ -12,10 +12,10 @@ export class BoundSwitch extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = props.binder.getFieldState(props.name)
   }
 
+  @autobind
   handleValueChange() {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)