JS fixes for react-native

24 files changed, 180 insertions, 97 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 619e40daf3..22d8c1f046 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -6,5 +6,4 @@
 /* app */
 @import '../../components/PlatformWindow.css';
 @import '../../components/CustomScrollbars.css';
-@import '../../components/Layout.css';
 @import '../../components/Switch.css';
diff --git a/app/components/Account.js b/app/components/Account.js
index afa36fe31a..e58affdd1d 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -66,7 +66,7 @@ export default class Account extends Component {
                       icon='icon-extLink'
                       testName='account__buymore'>
                       <Label>Buy more credit</Label>
-                      <Img source='icon-extLink' height='16' width='16' />
+                      <Img source='icon-extLink' height={16} width={16} />
                     </GreenButton>
                     <RedButton
                       onPress={ this.props.onLogout }
diff --git a/app/components/AccountStyles.js b/app/components/AccountStyles.js
index 406215cd4f..b5ac785fe0 100644
--- a/app/components/AccountStyles.js
+++ b/app/components/AccountStyles.js
@@ -7,11 +7,11 @@ export default {
   ...createViewStyles({
     account: {
       backgroundColor: colors.darkBlue,
-      height: '100%',
+      flex: 1,
     },
     account__container: {
       flexDirection: 'column',
-      height: '100%',
+      flex: 1,
       paddingBottom: 48,
     },
     account__header: {
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index 8f6f1e81ba..7e577abb55 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -6,12 +6,11 @@ export default {
   ...createViewStyles({
     advanced_settings: {
       backgroundColor: '#192E45',
-      height: '100%',
+      flex: 1,
     },
     advanced_settings__container: {
       flexDirection: 'column',
-      height: '100%',
-      paddingBottom: 48,
+      flex: 1,
     },
     advanced_settings__header: {
       flexGrow: 0,
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 9f8b2b993f..56defe49b7 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -82,7 +82,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
       <View style={styles.connect}>
         <View style={styles.status}>
           <View style={styles.status_icon}>
-            <Img source="icon-fail" height="60" width="60" alt="" />
+            <Img source="icon-fail" height={60} width={60} alt="" />
           </View>
           <View style={styles.error_title}>
             { error.title }
@@ -94,7 +94,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
             <View>
               <GreenButton onPress={ this.onExternalLink.bind(this, 'purchase') }>
                 <Label>Buy more time</Label>
-                <Img source='icon-extLink' height='16' width='16' />
+                <Img source='icon-extLink' height={16} width={16} />
               </GreenButton>
             </View>
             : null
@@ -164,7 +164,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
           { /* show spinner when connecting */ }
           { isConnecting ?
             <View style={ styles.status_icon }>
-              <Img source="icon-spinner" height="60" width="60" alt="" ref={ this._updateMapOffset } />
+              <Img source='icon-spinner' height={60} width={60} alt="" ref={ this._updateMapOffset } />
             </View>
             : null
           }
@@ -225,7 +225,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
             <View style={styles.footer}>
               <TransparentButton onPress={ this.props.onSelectLocation }>
                 <Label>{ this.props.selectedRelayName }</Label>
-                <Img height='12' width='7' source='icon-chevron' />
+                <Img height={12} width={7} source='icon-chevron' />
               </TransparentButton>
               <GreenButton onPress={ this.props.onConnect } testName='secureConnection'>Secure my connection</GreenButton>
             </View>
diff --git a/app/components/CustomScrollbars.android.js b/app/components/CustomScrollbars.android.js
new file mode 100644
index 0000000000..8c9ea03da2
--- /dev/null
+++ b/app/components/CustomScrollbars.android.js
@@ -0,0 +1,36 @@
+// @flow
+
+import * as React from 'react';
+import { View, Component } from 'reactxp';
+
+type Props = {
+  autoHide: boolean,
+  thumbInset: { x: number, y: number },
+  children?: React.Node,
+};
+
+type State = {
+  canScroll: boolean,
+  showScrollIndicators: boolean,
+};
+
+export default class CustomScrollbars extends Component<Props, State> {
+  static defaultProps = {
+    autoHide: true,
+    thumbInset: { x: 2, y: 2 },
+  };
+
+  state = {
+    canScroll: false,
+    showScrollIndicators: true,
+  };
+
+  render() {
+    const { autoHide: _autoHide, thumbInset: _thumbInset, children, ...otherProps } = this.props;
+
+    return (
+      <View { ...otherProps }>
+        { children }
+      </View>);
+  }
+}
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index 50ab49d39f..0c03dfd80e 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -50,7 +50,7 @@ export default class HeaderBar extends Component {
 
         {this.props.showSettings ?
           <Button style={ styles.headerbar__settings } onPress={ this.props.onSettings } testName="headerbar__settings">
-            <Img source='icon-settings' style={ styles.headerbar__settings_icon } />
+            <Img source='icon-settings' style={ styles.headerbar__settings_icon } hoverStyle={ styles.settings_icon_hover }/>
           </Button>
           : null}
       </View>
diff --git a/app/components/HeaderBarStyles.js b/app/components/HeaderBarStyles.js
index a8569f2f81..179e45ae55 100644
--- a/app/components/HeaderBarStyles.js
+++ b/app/components/HeaderBarStyles.js
@@ -47,6 +47,10 @@ export default {
     headerbar__settings_icon: {
       width: 24,
       height: 24,
+      color: colors.white60,
+    },
+    settings_icon_hover: {
+      color: colors.white,
     },
   }),
   ...createTextStyles({
diff --git a/app/components/Layout.css b/app/components/Layout.css
deleted file mode 100644
index 14acf93769..0000000000
--- a/app/components/Layout.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.layout {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.layout__header {
-  flex: 0 0 auto;
-}
-
-.layout__container {
-  flex: 1 1 100%;
-  background: #294D73;
-  overflow: hidden; /* needed for flex boxes with overflow: auto to work */
-}
\ No newline at end of file
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 51b135e8f5..dea641919c 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -1,46 +1,49 @@
 // @flow
 import * as React from 'react';
 import HeaderBar from './HeaderBar';
+import { View, Component } from 'reactxp';
 
 import type { HeaderBarProps } from './HeaderBar';
 
-export class Header extends React.Component<HeaderBarProps> {
+import styles from './LayoutStyles';
+
+export class Header extends Component {
+  props: HeaderBarProps;
   static defaultProps = HeaderBar.defaultProps;
 
   render() {
     return (
-      <div className="layout__header">
+      <View style={styles.header}>
         <HeaderBar { ...this.props } />
-      </div>
+      </View>
     );
   }
 }
 
+export class Container extends Component {
+  props: {
+    children: React.Node
+  }
 
-type ContainerProps = {
-  children?: React.Element<*>
-};
-
-export class Container extends React.Component<ContainerProps> {
   render() {
     return (
-      <div className="layout__container">
+      <View style={styles.container}>
         { this.props.children }
-      </div>
+      </View>
     );
   }
 }
 
-type LayoutProps = {
-  children?: React.Node
-};
+export class Layout extends Component {
+  props: {
+    children: Array<React.Node> | React.Node
+  }
 
-export class Layout extends React.Component<LayoutProps> {
   render() {
     return (
-      <div className="layout">
+      <View style={styles.layout}>
         { this.props.children }
-      </div>
+      </View>
     );
   }
 }
diff --git a/app/components/LayoutStyles.js b/app/components/LayoutStyles.js
new file mode 100644
index 0000000000..ab32d45e7b
--- /dev/null
+++ b/app/components/LayoutStyles.js
@@ -0,0 +1,20 @@
+// @flow
+import { createViewStyles } from '../lib/styles';
+import { colors } from '../config';
+
+export default {
+  ...createViewStyles({
+    layout: {
+      flexDirection: 'column',
+      flex: 1,
+    },
+    header: {
+      flex: 0,
+    },
+    container: {
+      flex: 1,
+      backgroundColor: colors.blue,
+      overflow: 'hidden',
+    }
+  }),
+};
diff --git a/app/components/Login.js b/app/components/Login.js
index d510f96d7b..c59db65b1a 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -75,21 +75,18 @@ export default class Login extends Component<LoginPropTypes, State> {
       <Layout>
         <Header showSettings={ true } onSettings={ this.props.onSettings } />
         <Container>
-          <View style={styles.login}>
-            <View style={styles.login_form}>
-              { this._getStatusIcon() }
+          <View style={styles.login_form}>
+            { this._getStatusIcon() }
+            <Text style={styles.title}>{ this._formTitle() }</Text>
 
-              <Text style={styles.title}>{ this._formTitle() }</Text>
-
-              {this._shouldShowLoginForm() && <View>
-                { this._createLoginForm() }
-              </View>}
-            </View>
-
-            <Animated.View onLayout={this._onFooterLayout} style={[styles.login_footer, this.state.footerAnimationStyle]} testName={'footerVisibility ' + this._shouldShowFooter(this.props).toString()}>
-              { this._createFooter() }
-            </Animated.View>
+            {this._shouldShowLoginForm() && <View>
+              { this._createLoginForm() }
+            </View>}
           </View>
+
+          <Animated.View onLayout={this._onFooterLayout} style={[styles.login_footer, this.state.footerAnimationStyle]} testName={'footerVisibility ' + this._shouldShowFooter(this.props).toString()}>
+            { this._createFooter() }
+          </Animated.View>
         </Container>
       </Layout>
     );
@@ -180,7 +177,7 @@ export default class Login extends Component<LoginPropTypes, State> {
     const statusIconPath = this._getStatusIconPath();
     return <View style={ styles.status_icon}>
       { statusIconPath ?
-        <Img source={ statusIconPath } height='48' width='48' alt="" /> :
+        <Img source={ statusIconPath } height={48} width={48} alt="" /> :
         null }
     </View>;
   }
@@ -269,7 +266,7 @@ export default class Login extends Component<LoginPropTypes, State> {
       toValue: toValue,
       easing: Animated.Easing.InOut(),
       duration: 250,
-      useNativeDriver: true,
+      useNativeDriver: false,
     });
   }
 
@@ -282,7 +279,7 @@ export default class Login extends Component<LoginPropTypes, State> {
       toValue: toValue,
       easing: Animated.Easing.Linear(),
       duration: 250,
-      useNativeDriver: true,
+      useNativeDriver: false,
     });
   }
 
@@ -303,7 +300,7 @@ export default class Login extends Component<LoginPropTypes, State> {
       }
     };
 
-    return <View style= {styles.login}>
+    return <View>
       <Text style={ styles.subtitle }>{ this._formSubtitle() }</Text>
       <View style={ this._accountInputGroupStyles() }>
         <View style={ styles.account_input_backdrop}>
@@ -321,7 +318,7 @@ export default class Login extends Component<LoginPropTypes, State> {
             ref={ autoFocusOnFailure }
             testName='AccountInput'/>
           <Animated.View style={this._accountInputButtonStyles()} onPress={ this._onLogin } testName='account-input-button'>
-            <Img style={this._accountInputArrowStyles()} source='icon-arrow' height='16' width='24' tintColor='currentColor' />
+            <Img style={this._accountInputArrowStyles()} source='icon-arrow' height={16} width={24} tintColor='currentColor' />
           </Animated.View>
         </View>
         <Accordion height={ this._shouldShowAccountHistory(this.props) ? 'auto' : 0 }>
@@ -339,7 +336,7 @@ export default class Login extends Component<LoginPropTypes, State> {
       <Text style={ styles.login_footer__prompt}>{ 'Don\'t have an account number?' }</Text>
       <BlueButton onPress={ this._onCreateAccount }>
         <Label>Create account</Label>
-        <Img source='icon-extLink' height='16' width='16' />
+        <Img source='icon-extLink' height={16} width={16} />
       </BlueButton>
     </View>;
   }
@@ -387,7 +384,7 @@ class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
           cellHoverStyle={ styles.account_dropdown__remove_cell_hover }
           hoverStyle={ styles.account_dropdown__remove_hover }
           source='icon-close-sml'
-          height='16' width='16'
+          height={16} width={16}
           onPress={ () => this.props.onRemove(this.props.value) }/>
       </CellButton>
     </View>);
diff --git a/app/components/LoginStyles.js b/app/components/LoginStyles.js
index 471ab045cc..47d7467f7d 100644
--- a/app/components/LoginStyles.js
+++ b/app/components/LoginStyles.js
@@ -4,9 +4,6 @@ import { colors } from '../config';
 
 export default {
   ...createViewStyles({
-    login: {
-      height: '100%',
-    },
     login_footer: {
       backgroundColor: colors.darkBlue,
       paddingTop: 18,
@@ -22,7 +19,6 @@ export default {
     login_form:{
       flex:1,
       flexDirection: 'column',
-      justifyContent: 'flex_end',
       overflow:'visible',
       paddingTop: 0,
       paddingBottom: 0,
@@ -61,7 +57,7 @@ export default {
     },
     account_input_button: {
       flex: 0,
-      border: 0,
+      borderWidth: 0,
       width: 48,
       alignItems: 'center',
       justifyContent: 'center',
@@ -73,7 +69,6 @@ export default {
     account_input_button__invisible: {
       color: colors.white,
       backgroundColor: colors.white,
-      visibility: 'hidden',
       opacity: 0,
     },
     account_dropdown__spacer: {
@@ -131,20 +126,19 @@ export default {
       fontFamily: 'Open Sans',
       fontSize: 13,
       fontWeight: '600',
-
-      letterSpaceing: -0.2,
+      letterSpacing: -0.2,
       color: colors.white80,
       marginBottom: 8,
     },
     account_input_textfield: {
-      border: 0,
+      borderWidth: 0,
       paddingTop: 10,
       paddingRight: 12,
       paddingLeft: 12,
       paddingBottom: 12,
       fontFamily: 'DINPro',
       fontSize: 20,
-      fontWeight: 900,
+      fontWeight: '900',
       lineHeight: 26,
       color: colors.blue,
       backgroundColor: 'transparent',
@@ -157,7 +151,7 @@ export default {
       fontWeight: '900',
       lineHeight: 26,
       color: colors.blue80,
-      border: 0,
+      borderWidth: 0,
       textAlign: 'left',
       marginLeft: 0,
     },
diff --git a/app/components/PlatformWindow.android.js b/app/components/PlatformWindow.android.js
index 6670a654e7..b2a13e86c9 100644
--- a/app/components/PlatformWindow.android.js
+++ b/app/components/PlatformWindow.android.js
@@ -1,10 +1,10 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { KeyboardAvoidingView } from 'react-native';
 
-export default class PlatformWindow extends Component {
+export default class PlatformWindow extends React.Component {
   props: {
-    children: Array<React.Element<*>> | React.Element<*>
+    children: Array<React.Node> | React.Node
   };
 
   render() {
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index 7c1693e300..f751653622 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -6,7 +6,7 @@ export default {
   ...createViewStyles({
     preferences: {
       backgroundColor: colors.darkBlue,
-      height: '100%',
+      flex: 1,
     },
     preferences__container: {
       display: 'flex',
diff --git a/app/components/SelectLocationStyles.js b/app/components/SelectLocationStyles.js
index 079e28dd93..721ad64eec 100644
--- a/app/components/SelectLocationStyles.js
+++ b/app/components/SelectLocationStyles.js
@@ -6,7 +6,7 @@ export default {
   ...createViewStyles({
     select_location: {
       backgroundColor: colors.darkBlue,
-      height: '100%',
+      flex: 1,
     },
     container: {
       flexDirection: 'column',
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 642887cd9b..d569c8f2f7 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -80,14 +80,14 @@ export default class Settings extends Component<SettingsProps> {
             testName='settings__account_paid_until_button'>
             <Label>Account</Label>
             <SubText testName='settings__account_paid_until_subtext' style={styles.settings__account_paid_until_Label__error}>OUT OF TIME</SubText>
-            <Img height='12' width='7' source='icon-chevron' />
+            <Img height={12} width={7} source='icon-chevron' />
           </CellButton>
         ) : (
           <CellButton onPress={ this.props.onViewAccount }
             testName='settings__account_paid_until_button'>
             <Label>Account</Label>
             <SubText testName='settings__account_paid_until_subtext'>{ formattedExpiry }</SubText>
-            <Img height='12' width='7' source='icon-chevron' />
+            <Img height={12} width={7} source='icon-chevron' />
           </CellButton>
         )}
       </View>
@@ -95,13 +95,13 @@ export default class Settings extends Component<SettingsProps> {
       <CellButton onPress={ this.props.onViewPreferences }
         testName='settings__preferences'>
         <Label>Preferences</Label>
-        <Img height='12' width='7' source='icon-chevron' />
+        <Img height={12} width={7} source='icon-chevron' />
       </CellButton>
 
       <CellButton onPress={ this.props.onViewAdvancedSettings }
         testName='settings__advanced'>
         <Label>Advanced</Label>
-        <Img height='12' width='7' source='icon-chevron' />
+        <Img height={12} width={7} source='icon-chevron' />
       </CellButton>
       <View style={styles.settings__cell_spacer}/>
     </View>;
@@ -113,7 +113,7 @@ export default class Settings extends Component<SettingsProps> {
         testName='settings__version'>
         <Label>App version</Label>
         <SubText>{this._formattedVersion()}</SubText>
-        <Img height='16' width='16' source='icon-extLink' />
+        <Img height={16} width={16} source='icon-extLink' />
       </CellButton>
       <View style={styles.settings__cell_spacer}/>
     </View>;
@@ -133,19 +133,19 @@ export default class Settings extends Component<SettingsProps> {
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'faq') }
         testName='settings__external_link'>
         <Label>FAQs</Label>
-        <Img height='16' width='16' source='icon-extLink' />
+        <Img height={16} width={16} source='icon-extLink' />
       </CellButton>
 
       <CellButton onPress={ this.props.onExternalLink.bind(this, 'guides') }
         testName='settings__external_link'>
         <Label>Guides</Label>
-        <Img height='16' width='16' source='icon-extLink' />
+        <Img height={16} width={16} source='icon-extLink' />
       </CellButton>
 
       <CellButton onPress={ this.props.onViewSupport }
         testName='settings__view_support'>
         <Label>Contact support</Label>
-        <Img height='12' width='7' source='icon-chevron' />
+        <Img height={12} width={7} source='icon-chevron' />
       </CellButton>
     </View>;
   }
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 81d72277a3..d84673253e 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -4,7 +4,7 @@ import { colors } from '../config';
 export default Object.assign(createViewStyles({
   settings: {
     backgroundColor: colors.darkBlue,
-    height: '100%'
+    flex: 1,
   },
   settings__container:{
     flexDirection: 'column',
diff --git a/app/components/Support.js b/app/components/Support.js
index 9b37f85f4e..702750ade1 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -201,7 +201,7 @@ export default class Support extends Component<SupportProps, SupportState> {
         onPress={ this.onViewLog }
         testName='support__view_logs'>
         <Label>View app logs</Label>
-        <Img source='icon-extLink' height='16' width='16' />
+        <Img source='icon-extLink' height={16} width={16} />
       </BlueButton>,
       <GreenButton key={2}
         disabled={ !this.validate() }
@@ -217,7 +217,7 @@ export default class Support extends Component<SupportProps, SupportState> {
       <View style={styles.support__form}>
         <View style={styles.support__form_row}>
           <View style={styles.support__status_icon}>
-            <Img source="icon-spinner" alt="" />
+            <Img source="icon-spinner" height={60} width={60} alt="" />
           </View>
           <View style={styles.support__status_security__secure}>
             Secure Connection
@@ -235,7 +235,7 @@ export default class Support extends Component<SupportProps, SupportState> {
       <View style={styles.support__form}>
         <View style={styles.support__form_row}>
           <View style={styles.support__status_icon}>
-            <Img source="icon-success" alt="" />
+            <Img source="icon-success" height={60} width={60} alt="" />
           </View>
           <Text style={styles.support__status_security__secure}>
             Secure Connection
@@ -262,7 +262,7 @@ export default class Support extends Component<SupportProps, SupportState> {
       <View style={styles.support__form}>
         <View style={styles.support__form_row}>
           <View style={styles.support__status_icon}>
-            <Img source="icon-fail" alt="" />
+            <Img source="icon-fail" height={60} width={60} alt="" />
           </View>
           <Text style={styles.support__status_security__secure}>
             Secure Connection
diff --git a/app/components/SupportStyles.js b/app/components/SupportStyles.js
index c02e2b5a55..1745f982dd 100644
--- a/app/components/SupportStyles.js
+++ b/app/components/SupportStyles.js
@@ -4,7 +4,7 @@ import { colors } from '../config';
 export default Object.assign(createViewStyles({
   support:{
     backgroundColor: colors.darkBlue,
-    height: '100%',
+    flex: 1,
   },
   support__container:{
     display: 'flex',
diff --git a/app/components/Switch.android.js b/app/components/Switch.android.js
new file mode 100644
index 0000000000..17bb976186
--- /dev/null
+++ b/app/components/Switch.android.js
@@ -0,0 +1,30 @@
+// @flow
+import * as React from 'react';
+import { Switch as _Switch } from 'react-native';
+
+export type SwitchProps = {
+  isOn: boolean;
+  onChange?: (isOn: boolean) => void;
+};
+
+type State = {
+};
+
+export default class Switch extends React.Component<SwitchProps, State> {
+  static defaultProps: SwitchProps = {
+    isOn: false,
+    onChange: ()=>{},
+  };
+
+  state = {
+  };
+
+  render() {
+    const { isOn, ...otherProps } = this.props;
+    return (
+      <_Switch { ...otherProps }
+        value={ isOn }
+        onValueChange={ this.props.onChange(isOn) } />
+    );
+  }
+}
diff --git a/app/components/TransitionContainer.js b/app/components/TransitionContainer.js
index c4f6e459f3..b5144bbff0 100644
--- a/app/components/TransitionContainer.js
+++ b/app/components/TransitionContainer.js
@@ -88,7 +88,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr
         toValue: 0,
         easing: Animated.Easing.InOut(),
         duration: nextProps.duration,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start(() => this.onFinishedAnimation());
     });
   }
@@ -112,7 +112,7 @@ export default class TransitionContainer extends Component<TransitionContainerPr
         toValue: this.state.dimensions.height,
         easing: Animated.Easing.InOut(),
         duration: nextProps.duration,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start(() => this.onFinishedAnimation());
     });
   }
@@ -138,13 +138,13 @@ export default class TransitionContainer extends Component<TransitionContainerPr
           toValue: 0,
           easing: Animated.Easing.InOut(),
           duration: nextProps.duration,
-          useNativeDriver: true,
+          useNativeDriver: false,
         }),
         Animated.timing(previousTranslationValue, {
           toValue: - this.state.dimensions.width / 2,
           easing: Animated.Easing.InOut(),
           duration: nextProps.duration,
-          useNativeDriver: true,
+          useNativeDriver: false,
         })
       ]);
       compositeAnimation.start(() => this.onFinishedAnimation());
diff --git a/app/index.android.js b/app/index.android.js
new file mode 100644
index 0000000000..1e9594a1c9
--- /dev/null
+++ b/app/index.android.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import RX from 'reactxp';
+import App from './App';
+
+RX.App.initialize(true, true);
+RX.UserInterface.setMainView(<App />);
\ No newline at end of file
diff --git a/rn-cli.config.js b/rn-cli.config.js
new file mode 100644
index 0000000000..dfc815ae30
--- /dev/null
+++ b/rn-cli.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  getProjectRoots: () => {
+    const roots = [];
+    roots.push(__dirname);
+    roots.push(path.resolve(__dirname, './app'));
+    return roots;
+  },
+};