About page (#78)

* added about page with version info
* lock drawer to closed state for About screen. Added About screen hardware back button handling.

app/package.json

@@ -7,7 +7,7 @@
         "postinstall": "cp ./patch/ReactNativeRenderer-dev.js.patch ./node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js; rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json"
     },
     "dependencies": {
-        "lbry-redux": "lbryio/lbry-redux#common-components-refactor",
+        "lbry-redux": "lbryio/lbry-redux",
         "react": "16.2.0",
         "react-native": "0.52.0",
         "react-native-vector-icons": "^4.5.0",
@@ -21,5 +21,10 @@
         "redux-persist-transform-compress": "^4.2.0",
         "redux-persist-transform-filter": "0.0.10",
         "redux-thunk": "^2.2.0"
+    },
+    "devDependencies": {
+        "babel-preset-env": "^1.6.1",
+        "babel-preset-stage-2": "^6.18.0",
+        "flow-babel-webpack-plugin": "^1.1.1"
     }
 }

app/src/component/AppNavigator.js

@@ -3,6 +3,7 @@ import DiscoverPage from '../page/discover';
 import FilePage from '../page/file';
 import SearchPage from '../page/search';
 import SettingsPage from '../page/settings';
+import AboutPage from '../page/about';
 import SplashScreen from '../page/splash';
 import SearchInput from '../component/searchInput';
 import {
@@ -49,7 +50,8 @@ const discoverStack = StackNavigator({
 
 const drawer = DrawerNavigator({
   Discover: { screen: discoverStack },
-  Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } }
+  Settings: { screen: SettingsPage, navigationOptions: { drawerLockMode: 'locked-closed' } },
+  About: { screen: AboutPage, navigationOptions: { drawerLockMode: 'locked-closed' } }
 }, {
   drawerWidth: 300,
   headerMode: 'none'
@@ -78,7 +80,7 @@ class AppWithNavigationState extends React.Component {
       if (nav.routes.length > 1) {
         const subRoutes = nav.routes[1].routes[0].routes;
         const lastRoute = subRoutes[subRoutes.length - 1];
-        if (['Settings'].indexOf(lastRoute.key) > -1) {
+        if (['About', 'Settings'].indexOf(lastRoute.key) > -1) {
           dispatch({ type: 'Navigation/BACK' });
           return true;
         }

app/src/component/pageHeader/view.js

@@ -9,7 +9,7 @@ import {
   View
 } from 'react-native';
 import Feather from 'react-native-vector-icons/Feather';
-import pageHeaderStyles from '../../styles/pageHeader';
+import pageHeaderStyle from '../../styles/pageHeader';
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
 const AnimatedText = Animated.Text;
@@ -18,24 +18,24 @@ class PageHeader extends React.PureComponent {
   render() {
     const { title, onBackPressed } = this.props;
     const containerStyles = [
-      pageHeaderStyles.container,
+      pageHeaderStyle.container,
       { height: APPBAR_HEIGHT }
     ];
     
     return (
       <View style={containerStyles}>
-        <View style={pageHeaderStyles.flexOne}>
-          <View style={pageHeaderStyles.header}>
-            <View style={pageHeaderStyles.title}>
+        <View style={pageHeaderStyle.flexOne}>
+          <View style={pageHeaderStyle.header}>
+            <View style={pageHeaderStyle.title}>
               <AnimatedText
                 numberOfLines={1}
-                style={pageHeaderStyles.titleText}
+                style={pageHeaderStyle.titleText}
                 accessibilityTraits="header">
                 {title}
               </AnimatedText>
             </View>
-            <TouchableOpacity style={pageHeaderStyles.left}>
-              <Feather name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyles.backIcon} />
+            <TouchableOpacity style={pageHeaderStyle.left}>
+              <Feather name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyle.backIcon} />
             </TouchableOpacity>
           </View>
         </View>

app/src/page/about/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import AboutPage from './view';
+
+const perform = dispatch => ({});
+
+export default connect(null, perform)(AboutPage);

app/src/page/about/view.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Lbry } from 'lbry-redux';
+import { NativeModules, Text, View, ScrollView } from 'react-native';
+import PageHeader from '../../component/pageHeader';
+import aboutStyle from '../../styles/about';
+
+class AboutPage extends React.PureComponent {
+  state = {
+    appVersion: null,
+    lbryId: null,
+    versionInfo: null
+  };
+  
+  componentDidMount() {
+    if (NativeModules.VersionInfo) {
+      NativeModules.VersionInfo.getAppVersion().then(version => {
+        this.setState({appVersion: version});  
+      });
+    }
+    Lbry.version().then(info => {
+      this.setState({
+        versionInfo: info,
+      });
+    });
+    Lbry.status({ session_status: true }).then(info => {
+      this.setState({
+        lbryId: info.lbry_id,
+      });
+    });
+  }
+  
+  render() {
+    const loading = 'Loading...';
+    const ver = this.state.versionInfo ? this.state.versionInfo : null;
+    
+    return (
+      <View>
+        <PageHeader title={"About LBRY"}
+          onBackPressed={() => { this.props.navigation.goBack(); }} />
+        <ScrollView style={aboutStyle.scrollContainer}>
+          <Text style={aboutStyle.releaseInfoTitle}>Release information</Text>
+          <View style={aboutStyle.row}>
+            <View style={aboutStyle.col}><Text style={aboutStyle.text}>App version</Text></View>
+            <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{this.state.appVersion}</Text></View>
+          </View>
+          
+          <View style={aboutStyle.row}>
+            <View style={aboutStyle.col}><Text style={aboutStyle.text}>Daemon (lbrynet)</Text></View>
+            <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbrynet_version : loading }</Text></View>
+          </View>
+          
+          <View style={aboutStyle.row}>
+            <View style={aboutStyle.col}><Text style={aboutStyle.text}>Wallet (lbryum)</Text></View>
+            <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.lbryum_version : loading }</Text></View>
+          </View>
+        
+          <View style={aboutStyle.row}>
+            <View style={aboutStyle.col}><Text style={aboutStyle.text}>Platform</Text></View>
+            <View style={aboutStyle.col}><Text selectable={true} style={aboutStyle.valueText}>{ver ? ver.platform : loading }</Text></View>
+          </View>
+          
+          <View style={aboutStyle.row}>
+            <View style={aboutStyle.col}>
+              <Text style={aboutStyle.text}>Installation ID</Text>
+              <Text selectable={true} style={aboutStyle.lineValueText}>{this.state.lbryId ? this.state.lbryId : loading}</Text>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default AboutPage;

app/src/styles/about.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+
+const aboutStyle = StyleSheet.create({
+  scrollContainer: {
+    paddingTop: 16,
+    paddingBottom: 16
+  },
+  row: {
+    marginBottom: 1,
+    backgroundColor: '#f9f9f9',
+    padding: 16,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  col: {
+    alignSelf: 'stretch'
+  },
+  releaseInfoTitle: {
+    fontFamily: 'Metropolis-Regular',
+    marginLeft: 12,
+    marginRight: 12,
+    marginBottom: 12,
+    fontSize: 14
+  },
+  text: {
+    fontFamily: 'Metropolis-SemiBold',
+    fontSize: 15
+  },
+  valueText: {
+    fontFamily: 'Metropolis-Regular',
+    textAlign: 'right',
+    fontSize: 15
+  },
+  lineValueText: {
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 15
+  }
+});
+
+export default aboutStyle;

app/src/styles/pageHeader.js

@@ -21,7 +21,7 @@ if (Platform.OS === 'ios') {
   };
 }
 
-const pageHeaderStyles = StyleSheet.create({
+const pageHeaderStyle = StyleSheet.create({
   container: {
     backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
     ...platformContainerStyles,
@@ -78,4 +78,4 @@ const pageHeaderStyles = StyleSheet.create({
   }
 });
 
-export default pageHeaderStyles;
+export default pageHeaderStyle;

src/main/java/io/lbry/browser/reactmodules/VersionInfoModule.java

@@ -0,0 +1,38 @@
+package io.lbry.browser.reactmodules;
+
+import android.content.Context;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import android.content.pm.PackageInfo;
+import android.content.pm.PackageManager;
+
+public class VersionInfoModule extends ReactContextBaseJavaModule {
+    private Context context;
+
+    public VersionInfoModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.context = reactContext;
+    }
+
+    @Override
+    public String getName() {
+        return "VersionInfo";
+    }
+
+    @ReactMethod
+    public void getAppVersion(final Promise promise) {
+        PackageManager packageManager = this.context.getPackageManager();
+        String packageName = this.context.getPackageName();
+        try {
+            PackageInfo packageInfo = packageManager.getPackageInfo(packageName, 0);
+            promise.resolve(packageInfo.versionName);
+        } catch (PackageManager.NameNotFoundException e) {
+            // normally shouldn't happen
+            promise.resolve("Unknown");
+        }
+    }
+}

src/main/java/io/lbry/browser/reactpackages/LbryReactPackage.java

@@ -9,6 +9,7 @@ import io.lbry.browser.reactmodules.DaemonServiceControlModule;
 import io.lbry.browser.reactmodules.DownloadManagerModule;
 import io.lbry.browser.reactmodules.MixpanelModule;
 import io.lbry.browser.reactmodules.ScreenOrientationModule;
+import io.lbry.browser.reactmodules.VersionInfoModule;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -28,6 +29,7 @@ public class LbryReactPackage implements ReactPackage {
         modules.add(new DownloadManagerModule(reactContext));
         modules.add(new MixpanelModule(reactContext));
         modules.add(new ScreenOrientationModule(reactContext));
+        modules.add(new VersionInfoModule(reactContext));
         
         return modules;
     }