Upgrade to RN0.33, Add Google Analytics, Change to standard AsyncStorage

.flowconfig

@@ -48,11 +48,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-9]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-9]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(30\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.29.0
+^0.30.0

README.md

@@ -12,10 +12,11 @@ React Native Starter Kit
 |---|---|
 | [Redux](https://github.com/reactjs/react-redux) | A predictable state container - Helping you write applications that behave consistently and run in different environments. |
 | [Sidebar/Hamburger Menu](https://github.com/Kureev/react-native-side-menu) | ... |
+| [Google Analytics](https://github.com/idehub/react-native-google-analytics-bridge) | Shows how to track screen views (includes both a 'debug' mode tracker as well as 'release' mode so that data doesn't get obfuscated). |
 | [Custom Navbar](https://github.com/Kureev/react-native-navbar) | ... |
 | [Icons](https://github.com/oblador/react-native-vector-icons) | Easily use icons from a wide range of icon libraries, it's as simple as importing the icon font and then `<Icon name={'ios-alert-outline'} size={50} color={"#CCC"} />`. |
 | [Form Validation](https://github.com/gcanti/tcomb-form-native) | An exmaple on how to create forms with validation. |
-| [Data persistence](https://github.com/darkrishabh/react-native-db-models) | Shows how to persist data, even after closing/reopening the app. |
+| Data persistence | Shows how to persist data, even after closing/reopening the app. |
 | Style Guide | A bunch of elements and components to get you started - styled headings, buttons, list rows, alerts etc. |
 | An example directory/file structure I've found useful for scaling apps | ... |
 

ReactApp/config.js

@@ -7,34 +7,40 @@
 'use strict';
 
 import Dimensions from 'Dimensions';
+var window = Dimensions.get('window');
 
 /* Setup ==================================================================== */
 exports.title = 'GlobalConfig';
 
-/* Default Styles ==================================================================== */
-// Window Dimensions
-var window = Dimensions.get('window');
-exports.windowHeight = window.height;
-exports.windowWidth = window.width;
-
-// Grid
-exports.windowWidthHalf = window.width * 0.5;
-exports.windowWidthYhird = window.width * 0.333;
-exports.windowWidthYwoThirds = window.width * 0.666;
-exports.windowWidthQuarter = window.width * 0.25;
-exports.windowWidthThreeQuarters = window.width * 0.75;
-
-// General Element Dimensions
-var navbarHeight = 64;
-exports.navbarHeight = navbarHeight;
-exports.statusBarHeight = 22;
-
-// Fonts
-exports.baseFont = 'Avenir';
-exports.baseFontSize = 14;
-
-// Colors
-exports.primaryColor = "#4099FF";
-exports.secondaryColor = "#FFE229";
-exports.textColor = "#555";
-exports.borderColor = "#E7E7E7";
+export default {
+	// App Details
+	appName: 'StarterKit',
+
+	// Window Dimensions
+	windowHeight: window.height,
+	windowWidth: window.width,
+
+	// Grid
+	windowWidthHalf: window.width * 0.5,
+	windowWidthYhird: window.width * 0.333,
+	windowWidthYwoThirds: window.width * 0.666,
+	windowWidthQuarter: window.width * 0.25,
+	windowWidthThreeQuarters: window.width * 0.75,
+
+	// General Element Dimensions
+	navbarHeight: 64,
+	statusBarHeight: 22,
+
+	// Google Analytics - uses a 'dev' account while we're testing
+  gaTrackingId: (__DEV__) ? 'UA-84284256-2' : 'UA-84284256-1',
+
+	// Fonts
+	baseFont: "Avenir",
+	baseFontSize: 14,
+
+	// Colors
+	primaryColor: "#4099FF",
+	secondaryColor: "#FFE229",
+	textColor: "#555",
+	borderColor: "#E7E7E7",
+}

ReactApp/containers/app.js

@@ -28,6 +28,10 @@ import AppStyles from '../styles';
 import AppConfig from '../config';
 import AppUtil from '../util';
 
+// Google Analytics
+import GoogleAnalytics from 'react-native-google-analytics-bridge';
+GoogleAnalytics.setTrackerId(AppConfig.gaTrackingId);
+
 // Components
 import Menu from '../components/menu';
 import NavbarElements from '../components/navbar.elements';
@@ -77,6 +81,13 @@ class AppContainer extends Component {
     * Render each scene with a Navbar and Sidebar
     */
   _renderScene = (route, navigator) => {
+    // Default Navbar Title
+    let title = route.title || AppConfig.appName;
+
+    // Google Analytics
+    let screenName = route.component.componentName ? route.component.componentName + ' - ' + title : title;
+    GoogleAnalytics.trackScreenView(screenName);
+
     // Show Hamburger Icon when index is 0, and Back Arrow Icon when index is > 0
     let leftButton = {
       onPress: (route.index > 0)
@@ -95,7 +106,7 @@ class AppContainer extends Component {
     return (
       <View style={[AppStyles.appContainer, AppStyles.container]}>
         <NavigationBar
-          title={<NavbarElements.Title title={route.title || null} />}
+          title={<NavbarElements.Title title={title || null} />}
           statusBar={{style: 'light-content', hidden: false}}
           style={[AppStyles.navbar]}
           tintColor={AppConfig.primaryColor}
@@ -126,7 +137,7 @@ class AppContainer extends Component {
             if(route.transition == 'FloatFromBottom') 
               return Navigator.SceneConfigs.FloatFromBottom;
             else
-              return Navigator.SceneConfigs.FloatFromRight;
+              return Navigator.SceneConfigs.PushFromRight;
           }}
           initialRoute={{
             component: Index,

ReactApp/screens/forms.js

@@ -13,16 +13,17 @@ import {
   View,
   Text,
   Image,
+  Alert,
   TextInput,
   ScrollView,
+  AsyncStorage,
   TouchableOpacity,
 } from 'react-native'
 import FormValidation from 'tcomb-form-native'
 
 // App Globals
 import AppStyles from '../styles'
 import AppUtil from '../util'
-import AppDB from '../db'
 
 // Components
 import Button from '../components/button'
@@ -94,48 +95,32 @@ class Form extends Component {
   /**
     * Executes after all modules have been loaded
     */
-  componentDidMount = () => {
-    // Get setting from local DB to populate fields
-    AppDB.settings.get_all((result) => {
-      if(result.totalrows > 0) {
-        var firstIndex = AppUtil.firstIndexInObj(result.rows);
-        this.setState({form_values: result.rows[firstIndex].values});
-      }
-    });
+  componentDidMount = async () => {
+    // Get user data from AsyncStorage to populate fields
+    const value = await AsyncStorage.getItem('user');
+    if (value !== null) {
+      this.setState({ form_values: JSON.parse(value) });
+    }
   }
 
   /**
     * Save Form Data to App
     */
-  _saveData = (callback) => {
-    var values = this.state.form_values;
-
-    // Check if data exists so we know if to add or update
-    AppDB.settings.get_all((result) => {
-      if(result.totalrows == 0) {
-        // Add data to the local DB
-        AppDB.settings.add({values}, (added_data) => {
-          return callback(added_data);
-        });
-      } else {
-        // Update row
-        var firstIndex = AppUtil.firstIndexInObj(result.rows);
-        AppDB.settings.update_id(firstIndex, {values}, (updated_data) => {
-          return callback(updated_data);
-        });
-      }
-    });
+  _saveData = () => {
+    let values = JSON.stringify(this.state.form_values);
+    return AsyncStorage.setItem('user', values);
   }
 
   /**
     * Delete Data
     */
-  _deleteData = (callback) => {
-    // Erase the DB
-    AppDB.settings.erase_db((removed_data) => {
-      this.setState({form_values: this.state.empty_form_values});
-      return callback();
-    });
+  _deleteData = () => {
+     AsyncStorage.removeItem('user')
+      .then(() => {
+        this.setState({ form_values: this.state.empty_form_values });
+      }).catch(() => {
+        Alert.alert('Oops', 'Something went wrong when deleting');
+      });
   }
 
   /**
@@ -166,16 +151,24 @@ class Form extends Component {
     // Form is valid
     if(values) {
       this.setState({form_values: values}, () => {
-        this._saveData((result) => {
-          this.refs.scrollView.scrollTo({ y: 0 });
-
-          // Show save message
-          this.setState({
-            resultMsg: {
-              success: 'Awesome, that saved!',
+        // Persist Data
+        this._saveData()
+          .then(() => {
+            // Scroll to top, to show message
+            if (this.refs && this.refs.scrollView) {
+              this.refs.scrollView.scrollTo({ y: 0 });
             }
+
+            // Show save message
+            this.setState({
+              resultMsg: { success: 'Awesome, that saved!' }
+            });
+          }).catch((error) => {
+            // Show error message
+            this.setState({
+              resultMsg: { error: error }
+            });
           });
-        });
       });
     }
   }
@@ -218,7 +211,7 @@ class Form extends Component {
         <View style={[AppStyles.row]}>
           <View style={[AppStyles.flex2, AppStyles.paddingLeft]}>
             <View style={AppStyles.spacer_15} />
-            <TouchableOpacity onPress={()=>{this._deleteData()}}>
+            <TouchableOpacity onPress={this._deleteData}>
               <Text style={[AppStyles.baseText, AppStyles.p, AppStyles.link]}>Clear My Info</Text>
             </TouchableOpacity>
           </View>

android/app/build.gradle

@@ -127,6 +127,7 @@ android {
 
 dependencies {
     compile project(':react-native-vector-icons')
+    compile project(':react-native-google-analytics-bridge')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/starterkit/MainApplication.java

@@ -8,6 +8,7 @@
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
+import com.idehub.GoogleAnalyticsBridge.GoogleAnalyticsBridgePackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -23,7 +24,8 @@ protected boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+          new GoogleAnalyticsBridgePackage()
       );
     }
   };

android/settings.gradle

@@ -3,3 +3,5 @@ rootProject.name = 'StarterKit'
 include ':app'
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-google-analytics-bridge', ':app'
+project(':react-native-google-analytics-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-analytics-bridge/android')