Thememing progress

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

@@ -3,7 +3,6 @@ package com.sn_react;
 import android.app.Application;
 
 //import com.facebook.react.ReactApplication;
-import com.reactnativenavigation.NavigationReactPackage;
 import com.oblador.keychain.KeychainPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.tectiv3.aes.RCTAesPackage;
@@ -31,7 +30,6 @@ public class MainApplication extends NavigationApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.asList(
             new MainReactPackage(),
-            new NavigationReactPackage(),
             new KeychainPackage(),
             new VectorIconsPackage(),
             new RCTAesPackage()

index.android.js

@@ -1 +1,2 @@
-import App from './src/app';
+import App from './src/App';
+App.get().start();

index.ios.js

@@ -1 +1,2 @@
-import App from './src/app';
+import App from './src/App';
+App.get().start();

src/Styles.js

@@ -1,6 +1,7 @@
 var _ = require('lodash')
 
-import { StyleSheet } from 'react-native';
+import { StyleSheet, StatusBar } from 'react-native';
+import App from "./App"
 
 export default class Styles {
 
@@ -15,123 +16,156 @@ export default class Styles {
   }
 
   static styles() {
-    return this.get()._styles.rules;
+    return this.get().styles.rules;
   }
 
   static constants() {
-    return this.get()._styles.constants;
+    return this.get().styles.constants;
   }
 
   constructor() {
-    this._styles = defaultStyles;
+    this.loadDefaults();
+  }
 
-    setTimeout(function () {
-      this.changeTheme();
-    }.bind(this), 1000);
+  loadDefaults() {
+    var constants = this.defaultConstants();
+    this.setStyles(this.defaultRules(constants), constants, "dark-content");
+  }
+
+  setStyles(rules, constants, statusBar) {
+    this.constants = constants;
+    this.styles = {
+      rules: StyleSheet.create(rules),
+      constants: constants
+    }
+
+    StatusBar.setBarStyle(statusBar, true);
   }
 
   changeTheme() {
     var theme = {
       constants: {
-        mainTintColor: "green"
-      }
+        mainTintColor: "#a366c3",
+        mainBackgroundColor: "#0f0f0f",
+        mainTextColor: "white",
+        plainCellBorderColor: "#1b1b1b",
+        selectedBackgroundColor: "#a366c3",
+        composeBorderColor: "#1b1b1b"
+      },
+
+      rules: {
+
+      },
+
+      statusBar: "light-content"
     }
 
-    this._styles = _.merge(defaultStyles, theme);
+    var constants = _.merge(this.defaultConstants(), theme.constants);
+    var rules = _.merge(this.defaultRules(constants), theme.rules);
+    this.setStyles(rules, constants, theme.statusBar);
+
+    console.log("New styles", this.styles);
+    App.get().reload();
   }
-}
-
-let mainTintColor = "#fb0206";
-let PaddingLeft = 14;
-
-const constants = {
-  themeColor: "#086DD6",
-  mainBackgroundColor: "white",
-  mainTintColor: mainTintColor,
-  plainCellBorderColor: "#efefef",
-  sectionedCellHorizontalPadding: PaddingLeft,
-  textColor: "black",
-}
-
-const defaultStyles = {
-  rules: StyleSheet.create({
-
-    container: {
-      backgroundColor: "white",
-      height: "100%",
-    },
-
-    tableSection: {
-      marginTop: 10,
-      marginBottom: 10,
-    },
-
-    sectionHeader: {
-      color: "gray",
-      fontSize: 12,
-      paddingLeft: PaddingLeft,
-      paddingBottom: 10,
-      paddingTop: 10
-    },
-
-    sectionedTableCell: {
-      borderBottomColor: "#ebebf0",
-      borderBottomWidth: 1,
-      paddingLeft: PaddingLeft,
-      paddingTop: 13,
-      backgroundColor: "white",
-      height: 45
-    },
-
-    sectionedTableCellTextInput: {
-      fontSize: 16,
-      height: "100%"
-    },
-
-    sectionedTableCellFirst: {
-      borderTopColor: "#ebebf0",
-      borderTopWidth: 1,
-    },
-
-    sectionedAccessoryTableCell: {
-      paddingLeft: PaddingLeft,
-      paddingRight: PaddingLeft,
-    },
-
-    sectionedAccessoryTableCellLabel: {
-      paddingTop: 12,
-      fontSize: 16,
-      color: constants.textColor
-    },
-
-    textInputCell: {
-      paddingTop: 0
-    },
-
-    buttonCell: {
-      paddingLeft: 0,
-      paddingTop: 0
-    },
-
-    buttonCellButton: {
-      textAlign: "center",
-      color: mainTintColor,
-      fontSize: 15,
-      height: "100%",
-      paddingTop: 13
-    },
-
-    buttonCellButtonLeft: {
-      textAlign: "left",
-      paddingLeft: PaddingLeft
-    },
-
-    bold: {
-      fontWeight: "bold"
-    },
-
-
-  }),
-
-  constants: constants
+
+
+  defaultConstants() {
+    return {
+        themeColor: "#086DD6",
+        mainBackgroundColor: "white",
+        mainTintColor: "#fb0206",
+        plainCellBorderColor: "#efefef",
+        sectionedCellHorizontalPadding: 14,
+        mainTextColor: "black",
+        selectedBackgroundColor: "#efefef",
+        paddingLeft: 14,
+        composeBorderColor: "#F5F5F5"
+      }
+  }
+
+  defaultRules(constants) {
+    return {
+      container: {
+        backgroundColor: constants.mainBackgroundColor,
+        height: "100%",
+      },
+
+      view: {
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      tableSection: {
+        marginTop: 10,
+        marginBottom: 10,
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      sectionHeader: {
+        color: "gray",
+        fontSize: 12,
+        paddingLeft: constants.paddingLeft,
+        paddingBottom: 10,
+        paddingTop: 10
+      },
+
+      sectionedTableCell: {
+        borderBottomColor: constants.plainCellBorderColor,
+        borderBottomWidth: 1,
+        paddingLeft: constants.paddingLeft,
+        paddingTop: 13,
+        backgroundColor: constants.mainBackgroundColor,
+        height: 45
+      },
+
+      sectionedTableCellTextInput: {
+        fontSize: 16,
+        height: "100%"
+      },
+
+      sectionedTableCellFirst: {
+        borderTopColor: constants.plainCellBorderColor,
+        borderTopWidth: 1,
+      },
+
+      sectionedAccessoryTableCell: {
+        paddingLeft: constants.paddingLeft,
+        paddingRight: constants.paddingLeft,
+        backgroundColor: constants.mainBackgroundColor
+      },
+
+      sectionedAccessoryTableCellLabel: {
+        paddingTop: 12,
+        fontSize: 16,
+        color: constants.mainTextColor
+      },
+
+      textInputCell: {
+        paddingTop: 0
+      },
+
+      buttonCell: {
+        paddingLeft: 0,
+        paddingTop: 0,
+        backgroundColor: constants.mainBackgroundColor,
+      },
+
+      buttonCellButton: {
+        textAlign: "center",
+        color: constants.mainTintColor,
+        fontSize: 15,
+        height: "100%",
+        paddingTop: 13
+      },
+
+      buttonCellButtonLeft: {
+        textAlign: "left",
+        paddingLeft: constants.paddingLeft
+      },
+
+      bold: {
+        fontWeight: "bold"
+      },
+    }
+  }
+
 }

src/app.js

@@ -8,15 +8,12 @@ import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
-  StatusBar,
   Text,
   View,
   FlatList
 } from 'react-native';
 import {Platform} from 'react-native';
 
-StatusBar.setBarStyle('dark-content', true);
-
 import {Navigation} from 'react-native-navigation';
 import {registerScreens, registerScreenVisibilityListener} from './screens';
 
@@ -25,9 +22,6 @@ import Sync from './lib/sync'
 
 import GlobalStyles from "./Styles"
 
-registerScreens();
-registerScreenVisibilityListener();
-
 const tabs = [{
   label: 'Notes',
   screen: 'sn.Notes',
@@ -40,31 +34,53 @@ const tabs = [{
   }
 ];
 
-function startApp() {
-  Navigation.startTabBasedApp({
-    tabs,
-    animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
-
-    tabsStyle: {
-      tabBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor,
-      tabBarButtonColor: 'gray',
-      tabBarSelectedButtonColor: GlobalStyles.constants().mainTintColor,
-      statusBarColor: 'black',
-      tabFontFamily: 'BioRhyme-Bold',
-    },
-
-    appStyle: {
-      navBarButtonColor: GlobalStyles.constants().mainTintColor,
-      navBarTextColor: GlobalStyles.constants().mainTintColor,
-      navigationBarColor: 'black', // android built in bar
-      navBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor, // actual top nav bar
-      statusBarColor: '#002b4c',
-    },
-  });
+// android will fail to load if icon is not specified here
+if(Platform.OS === "android") {
+  tabs.forEach(function(tab){
+    tab.icon = require("./img/placeholder.png")
+  })
 }
 
-startApp();
+registerScreens();
+registerScreenVisibilityListener();
 
-setTimeout(function () {
-  // startApp();
-}, 1500);
+export default class App {
+
+  static instance = null;
+
+  static get() {
+    if (this.instance == null) {
+      this.instance = new App();
+    }
+
+    return this.instance;
+  }
+
+  start() {
+    Navigation.startTabBasedApp({
+      tabs,
+      animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
+
+      tabsStyle: {
+        tabBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor,
+        tabBarButtonColor: 'gray',
+        tabBarSelectedButtonColor: GlobalStyles.constants().mainTintColor,
+        statusBarColor: 'black',
+        tabFontFamily: 'BioRhyme-Bold',
+      },
+
+      appStyle: {
+        navBarButtonColor: GlobalStyles.constants().mainTintColor,
+        navBarTextColor: GlobalStyles.constants().mainTintColor,
+        navigationBarColor: 'black', // android built in bar
+        navBarBackgroundColor: GlobalStyles.constants().mainBackgroundColor, // actual top nav bar
+        statusBarColor: '#002b4c',
+        screenBackgroundColor: GlobalStyles.constants().mainBackgroundColor
+      },
+    });
+  }
+
+  reload() {
+    this.start();
+  }
+}

src/components/SectionedAccessoryTableCell.js

@@ -9,7 +9,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 export default class SectionedAccessoryTableCell extends SectionedTableCell {
 
   rules() {
-    return super.rules().concat([GlobalStyles.styles().sectionedAccessoryTableCell]);
+    return super.rules().concat([GlobalStyles.styles().view, GlobalStyles.styles().sectionedAccessoryTableCell]);
   }
 
   onPress = () => {
@@ -26,7 +26,7 @@ export default class SectionedAccessoryTableCell extends SectionedTableCell {
   render() {
     var iconName = (this.props.selected && this.props.selected()) ? "ios-checkmark-circle" : null;
     return (
-      <TouchableHighlight onPress={this.onPress} onLongPress={this.onLongPress}>
+      <TouchableHighlight style={GlobalStyles.styles().view} onPress={this.onPress} onLongPress={this.onLongPress}>
         <View style={this.rules()}>
           <Text style={GlobalStyles.styles().sectionedAccessoryTableCellLabel}>{this.props.text}</Text>
           {iconName &&

src/containers/NoteCell.js

@@ -4,9 +4,81 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import GlobalStyles from "../Styles"
 
 export default class NoteCell extends React.PureComponent {
+
+
   constructor(props) {
     super(props);
     this.state = {selected: false};
+
+    let Padding = 14;
+
+    this.styles = StyleSheet.create({
+
+      noteCell: {
+        padding: Padding,
+        paddingRight: Padding * 2,
+        borderBottomColor: GlobalStyles.constants().plainCellBorderColor,
+        borderBottomWidth: 1,
+        backgroundColor: GlobalStyles.constants().mainBackgroundColor,
+      },
+
+      noteCellSelected: {
+        backgroundColor: GlobalStyles.constants().selectedBackgroundColor,
+      },
+
+      noteTags: {
+        flex: 1,
+        flexDirection: 'row',
+        marginBottom: 5,
+      },
+
+      pinnedView: {
+        flex: 1,
+        flexDirection: 'row',
+        marginBottom: 5,
+      },
+
+      pinnedText: {
+        color: GlobalStyles.constants().mainTintColor,
+        marginLeft: 8,
+        fontWeight: "bold",
+        fontSize: 12
+      },
+
+      noteTag: {
+        marginRight: 2,
+        fontSize: 12,
+        color: GlobalStyles.constants().mainTextColor,
+        opacity: 0.5,
+      },
+
+      noteTitle: {
+        fontWeight: "bold",
+        fontSize: 16,
+        color: GlobalStyles.constants().mainTextColor
+      },
+
+
+      noteText: {
+        fontSize: 15,
+        marginTop: 4,
+        color: GlobalStyles.constants().mainTextColor
+      },
+
+
+      noteDate: {
+        marginTop: 5,
+        fontSize: 12,
+        color: GlobalStyles.constants().mainTextColor,
+        opacity: 0.5
+      },
+
+      deleting: {
+        color: GlobalStyles.constants().mainTintColor,
+        marginBottom: 5,
+
+      }
+    });
   }
 
   _onPress = () => {
@@ -43,22 +115,22 @@ export default class NoteCell extends React.PureComponent {
     var note = this.props.item;
     return (
        <TouchableWithoutFeedback onPress={this._onPress} onPressIn={this._onPressIn} onPressOut={this._onPressOut}>
-        <View style={this.aggregateStyles(styles.noteCell, styles.noteCellSelected, this.state.selected)} onPress={this._onPress}>
+        <View style={this.aggregateStyles(this.styles.noteCell, this.styles.noteCellSelected, this.state.selected)} onPress={this._onPress}>
 
           {note.deleted &&
-            <Text style={styles.deleting}>Deleting...</Text>
+            <Text style={this.styles.deleting}>Deleting...</Text>
           }
 
           {note.pinned &&
-            <View style={styles.pinnedView}>
+            <View style={this.styles.pinnedView}>
               <Icon name={"ios-bookmark"} size={14} color={GlobalStyles.constants().mainTintColor} />
-              <Text style={styles.pinnedText}>Pinned</Text>
+              <Text style={this.styles.pinnedText}>Pinned</Text>
             </View>
           }
 
           {note.tags.length > 0 &&
-            <View style={styles.noteTags}>
-              <Text numberOfLines={1} style={this.aggregateStyles(styles.noteTag)}>
+            <View style={this.styles.noteTags}>
+              <Text numberOfLines={1} style={this.aggregateStyles(this.styles.noteTag)}>
               {note.tags.map(function(tag, i){
                 var text = "#" + tag.title;
                 if(i != note.tags.length - 1) {
@@ -71,87 +143,17 @@ export default class NoteCell extends React.PureComponent {
           }
 
           {note.safeTitle().length > 0 &&
-            <Text style={this.aggregateStyles(styles.noteTitle, styles.noteTitleSelected, this.state.selected)}>{note.title}</Text>
+            <Text style={this.aggregateStyles(this.styles.noteTitle, this.styles.noteTitleSelected, this.state.selected)}>{note.title}</Text>
           }
 
           {note.safeText().length > 0 &&
-            <Text numberOfLines={2} style={this.aggregateStyles(styles.noteText, styles.noteTextSelected, this.state.selected)}>{note.text}</Text>
+            <Text numberOfLines={2} style={this.aggregateStyles(this.styles.noteText, this.styles.noteTextSelected, this.state.selected)}>{note.text}</Text>
           }
 
-          <Text numberOfLines={1} style={this.aggregateStyles(styles.noteDate, styles.noteDateSelected, this.state.selected)}>{note.createdAt()}</Text>
+          <Text numberOfLines={1} style={this.aggregateStyles(this.styles.noteDate, this.styles.noteDateSelected, this.state.selected)}>{note.createdAt()}</Text>
 
         </View>
       </TouchableWithoutFeedback>
     )
   }
 }
-
-let Padding = 14;
-
-const styles = StyleSheet.create({
-
-
-  noteCell: {
-    padding: Padding,
-    paddingRight: Padding * 2,
-    borderBottomColor: GlobalStyles.constants().plainCellBorderColor,
-    borderBottomWidth: 1
-  },
-
-  noteCellSelected: {
-    backgroundColor: "#efefef",
-  },
-
-  noteTags: {
-    flex: 1,
-    flexDirection: 'row',
-    marginBottom: 5,
-  },
-
-  pinnedView: {
-    flex: 1,
-    flexDirection: 'row',
-    marginBottom: 5,
-  },
-
-  pinnedText: {
-    color: GlobalStyles.constants().mainTintColor,
-    marginLeft: 8,
-    fontWeight: "bold",
-    fontSize: 12
-  },
-
-  noteTag: {
-    marginRight: 2,
-    fontSize: 12,
-    color: "black",
-    opacity: 0.5,
-  },
-
-  noteTitle: {
-    fontWeight: "bold",
-    fontSize: 16,
-    color: "black"
-  },
-
-
-  noteText: {
-    fontSize: 15,
-    marginTop: 4,
-    color: "black"
-  },
-
-
-  noteDate: {
-    marginTop: 5,
-    fontSize: 12,
-    color: "black",
-    opacity: 0.5
-  },
-
-  deleting: {
-    color: GlobalStyles.constants().mainTintColor,
-    marginBottom: 5,
-
-  }
-});

src/containers/NoteList.js

@@ -8,7 +8,7 @@ export default class NoteList extends Component {
 
   renderHeader = () => {
     return (
-      <View style={{paddingLeft: 5, paddingRight: 5, paddingTop: 5}}>
+      <View style={{paddingLeft: 5, paddingRight: 5, paddingTop: 5, backgroundColor: GlobalStyles.constants().mainBackgroundColor}}>
         <Search
           onChangeText={this.props.onSearchChange}
           onCancel={this.props.onSearchCancel}
@@ -37,7 +37,7 @@ export default class NoteList extends Component {
 
   render() {
     return (
-      <View style={styles.tableContainer}>
+      <View style={{backgroundColor: GlobalStyles.constants().mainBackgroundColor}}>
         <FlatList style={{height: "100%"}}
           keyboardDismissMode={'interactive'}
           refreshControl={
@@ -55,13 +55,3 @@ export default class NoteList extends Component {
     )
   }
 }
-
-let Padding = 14;
-
-const styles = StyleSheet.create({
-
-  tableContainer: {
-    backgroundColor: 'white',
-  },
-
-});

src/screens/Account.js

@@ -142,7 +142,7 @@ export default class Account extends Abstract {
     let signedIn = !Auth.getInstance().offline();
     return (
       <View style={GlobalStyles.styles().container}>
-        <ScrollView keyboardShouldPersistTaps={'always'}>
+        <ScrollView style={{backgroundColor: GlobalStyles.constants().mainBackgroundColor}} keyboardShouldPersistTaps={'always'}>
 
           {!signedIn &&
             <AuthSection params={this.state.params} title={"Account"} onSignInPress={this.onSignInPress} onRegisterPress={this.onRegisterPress} />
@@ -151,10 +151,11 @@ export default class Account extends Abstract {
           <OptionsSection signedIn={signedIn} title={"Options"} onSignOutPress={this.onSignOutPress} onExportPress={this.onExportPress} />
 
           <PasscodeSection
-          hasPasscode={this.state.hasPasscode}
-          onEnable={this.onPasscodeEnable}
-          onDisable={this.onPasscodeDisable}
-          title={"Local Passcode"} />
+            hasPasscode={this.state.hasPasscode}
+            onEnable={this.onPasscodeEnable}
+            onDisable={this.onPasscodeDisable}
+            title={"Local Passcode"}
+          />
 
         </ScrollView>
       </View>
@@ -200,6 +201,7 @@ class AuthSection extends Component {
             autoCorrect={false}
             autoCapitalize={'none'}
             keyboardType={'email-address'}
+            underlineColorAndroid={'transparent'}
           />
         </SectionedTableCell>
 
@@ -210,6 +212,7 @@ class AuthSection extends Component {
             onChangeText={(text) => this.setState({password: text})}
             value={this.state.password}
             secureTextEntry={true}
+            underlineColorAndroid={'transparent'}
           />
         </SectionedTableCell>
 
@@ -223,6 +226,7 @@ class AuthSection extends Component {
               autoCorrect={false}
               autoCapitalize={'none'}
               keyboardType={'url'}
+              underlineColorAndroid={'transparent'}
             />
           </SectionedTableCell>
         }

src/screens/Compose.js

@@ -8,7 +8,6 @@ import Abstract from "./Abstract"
 import {
   AppRegistry,
   StyleSheet,
-  StatusBar,
   TextInput,
   View,
   FlatList,
@@ -38,6 +37,7 @@ export default class Compose extends Abstract {
     }
     this.state = {note: note, text: note.text};
     this.configureNavBar();
+    this.loadStyles();
 
     this.syncObserver = Sync.getInstance().registerSyncObserver(function(changesMade){
       if(changesMade) {
@@ -200,9 +200,9 @@ export default class Compose extends Abstract {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View style={[this.styles.container, GlobalStyles.styles().container]}>
         <TextInput
-          style={styles.noteTitle}
+          style={this.styles.noteTitle}
           onChangeText={this.onTitleChange}
           value={this.state.note.title}
           placeholder={"Add Title"}
@@ -210,10 +210,10 @@ export default class Compose extends Abstract {
           underlineColorAndroid={'transparent'}
         />
 
-        <KeyboardAvoidingView style={{flexGrow: 1}} keyboardVerticalOffset={rawStyles.noteTitle.height + rawStyles.noteText.paddingTop} behavior={'padding'}>
-          <ScrollView style={styles.textContainer} contentContainerStyle={styles.contentContainer} keyboardDismissMode={'interactive'}>
+        <KeyboardAvoidingView style={{flexGrow: 1}} keyboardVerticalOffset={this.rawStyles.noteTitle.height + this.rawStyles.noteText.paddingTop} behavior={'padding'}>
+          <ScrollView style={this.styles.textContainer} contentContainerStyle={this.styles.contentContainer} keyboardDismissMode={'interactive'}>
             <TextInput
-                style={styles.noteText}
+                style={this.styles.noteText}
                 onChangeText={this.onTextChange}
                 multiline = {true}
                 value={this.state.note.text}
@@ -229,53 +229,53 @@ export default class Compose extends Abstract {
       </View>
     );
   }
+
+  loadStyles() {
+    this.rawStyles = {
+      container: {
+        flex: 1,
+        flexDirection: 'column',
+        height: "100%",
+      },
+
+      noteTitle: {
+        fontWeight: "600",
+        fontSize: 16,
+        color: GlobalStyles.constants().mainTextColor,
+        height: 50,
+        borderBottomColor: GlobalStyles.constants().composeBorderColor,
+        borderBottomWidth: 1,
+        paddingTop: Platform.OS === "ios" ? 5 : 12,
+        paddingLeft: GlobalStyles.constants().paddingLeft,
+        paddingRight: GlobalStyles.constants().paddingLeft,
+      },
+
+      textContainer: {
+        flexGrow: 1,
+        flex: 1,
+      },
+
+      contentContainer: {
+        flexGrow: 1
+      },
+
+      noteText: {
+        height: "100%",
+        flexGrow: 1,
+        fontSize: 17,
+        marginTop: 0,
+        paddingTop: 10,
+        paddingBottom: 10,
+        color: GlobalStyles.constants().mainTextColor,
+        paddingLeft: GlobalStyles.constants().paddingLeft,
+        paddingRight: GlobalStyles.constants().paddingLeft,
+        textAlignVertical: 'top',
+        paddingVertical: 0,
+        lineHeight: 22,
+      }
+    }
+
+    this.styles = StyleSheet.create(this.rawStyles);
+
+  }
 }
-
-let PaddingLeft = 14;
-
-const rawStyles = {
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    flexDirection: 'column',
-    height: "100%",
-  },
-
-  noteTitle: {
-    fontWeight: "600",
-    fontSize: 16,
-    color: "black",
-    height: 50,
-    borderBottomColor: "#F5F5F5",
-    borderBottomWidth: 1,
-    paddingTop: Platform.OS === "ios" ? 5 : 12,
-    paddingLeft: PaddingLeft,
-    paddingRight: PaddingLeft,
-  },
-
-  textContainer: {
-    flexGrow: 1,
-    flex: 1,
-  },
-
-  contentContainer: {
-    flexGrow: 1
-  },
-
-  noteText: {
-    height: "100%",
-    flexGrow: 1,
-    fontSize: 17,
-    marginTop: 0,
-    paddingTop: 10,
-    paddingBottom: 10,
-    color: "black",
-    paddingLeft: PaddingLeft,
-    paddingRight: PaddingLeft,
-    textAlignVertical: 'top',
-    paddingVertical: 0,
-    lineHeight: 22,
-  },
-}
-
-const styles = StyleSheet.create(rawStyles);

src/screens/Filter.js

@@ -193,7 +193,7 @@ export default class Filter extends Abstract {
   render() {
     return (
       <View style={GlobalStyles.styles().container}>
-        <ScrollView>
+        <ScrollView style={GlobalStyles.styles().view}>
 
           {!this.note &&
             <SortSection sortBy={this.options.sortBy} onSortChange={this.onSortChange} title={"Sort By"} />
@@ -221,6 +221,7 @@ export default class Filter extends Abstract {
   }
 }
 
+
 class TagsSection extends Component {
   constructor(props) {
     super(props);
@@ -238,7 +239,7 @@ class TagsSection extends Component {
   render() {
     let root = this;
     return (
-      <TableSection>
+      <TableSection style={GlobalStyles.styles().view}>
         <SectionHeader title={this.props.title} />
         {this.props.tags.map(function(tag, i){
           return (

src/screens/Notes.js

@@ -26,14 +26,9 @@ export default class Notes extends Abstract {
     this.loadTabbarIcons();
     this.initializeOptionsAndNotes();
     this.beginSyncTimer();
-
-    setTimeout(function () {
-      // this.forceUpdate();
-    }.bind(this), 1500);
   }
 
   componentWillUnmount() {
-    console.log("Notes component will unmount");
     Sync.getInstance().removeSyncObserver(this.syncObserver);
     Auth.getInstance().removeSignoutObserver(this.signoutObserver);
     clearInterval(this.syncTimer);
@@ -275,7 +270,7 @@ export default class Notes extends Abstract {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View style={styles.container, GlobalStyles.styles().container}>
         <View style={styles.decryptNoticeContainer}>
           <Text style={styles.decryptNotice}>Decrypting notes...</Text>
         </View>
@@ -298,7 +293,6 @@ const styles = StyleSheet.create({
 
   container: {
     flex: 1,
-    backgroundColor: 'white',
   },
 
   decryptNoticeContainer: {