Fix #18

.flowconfig

@@ -21,6 +21,7 @@
 ./app/components/Layout/Open.js.flow
 ./app/components/Layout/Page.js.flow
 ./app/components/Layout/Router.js.flow
+./app/components/ReactNative/Info.js.flow
 ./app/components/Terminal/Console.js.flow
 
 [options]

app/components/App/App.js

@@ -1,15 +1,23 @@
 // @flow
 import React from 'react';
+import SwipeableViews from 'react-swipeable-views';
 
 import AppBar from './AppBar';
-import Page from '../Layout/Page';
 import AppBottomBar from './AppBottomBar';
+import Info from '../ReactNative/Info';
+import Page from '../Layout/Page';
 
 const App = ({app}: $AppProps) => (
   <Page style={{display: 'flex', flexDirection: 'column'}}>
-    <AppBar app={app} />
-    <div style={{flexGrow: 2}}>
-
+    <div style={{flexShrink: 0}}>
+      <AppBar app={app} />
+    </div>
+    <div style={{flexGrow: 2, overflow: 'auto'}}>
+      <SwipeableViews>
+        <div>
+          <Info app={app} />
+        </div>
+      </SwipeableViews>
     </div>
     <AppBottomBar app={app} />
   </Page>

app/components/ReactNative/Info.js

@@ -1,15 +1,15 @@
-import React, {PureComponent} from 'react';
+// @flow
 import {Card, CardHeader, CardText} from 'material-ui/Card';
-import map from 'lodash/map';
+import {connect} from 'react-redux';
+import CircularProgress from 'material-ui/CircularProgress';
 import keys from 'lodash/keys';
+import map from 'lodash/map';
+import React, {PureComponent} from 'react';
 import TextField from 'material-ui/TextField';
-import {connect} from 'react-redux';
-import get from 'lodash/get';
 
-import exec from '../../lib/exec';
 import {getInfo} from '../../redux/actions/infoActions';
 
-class Info extends PureComponent {
+class Info extends PureComponent<$InfoProps> {
   componentDidMount = () => {
     getInfo(this.props.app);
   };
@@ -33,6 +33,9 @@ class Info extends PureComponent {
               />
             </div>
           ))}
+          {!this.props.info && (
+            <CircularProgress />
+          )}
         </CardText>
       </Card>
       <Card>
@@ -46,10 +49,10 @@ class Info extends PureComponent {
           {Boolean(this.props.info) && map(keys(this.props.info.packages), key => (
             <div key={key}>
               <TextField
-                disabled
-                hintText={this.props.info.packages[key].wanted}
                 defaultValue={this.props.info.packages[key].installed}
+                disabled
                 floatingLabelText={`${key} (wanted: ${this.props.info.packages[key].wanted})`}
+                hintText={this.props.info.packages[key].wanted}
               />
             </div>
           ))}

app/components/ReactNative/Info.js.flow

@@ -0,0 +1,23 @@
+// @flow
+
+declare type $InfoOwnProps = {|
+  +app: $App,
+|};
+
+declare type $InfoConnectProps = {|
+  +info: {|
+    +environment: {|
+      [key: string]: string,
+    |},
+    +packages: {|
+      [package: string]: {|
+        +installed: string,
+        +wanted: string,
+      |},
+    |},
+  |},
+|};
+
+declare type $InfoProps =
+  & $InfoOwnProps
+  & InfoConnectProps;