feat: add editor on ios & android.

apps/mobile/App.js

@@ -2,17 +2,42 @@ import React, {useState, useEffect} from 'react';
 import NavigationService, {
   AppContainer,
 } from './src/services/NavigationService';
-import {StatusBar, View, SafeAreaView, TouchableOpacity} from 'react-native';
+import {
+  StatusBar,
+  View,
+  SafeAreaView,
+  TouchableOpacity,
+  DeviceEventEmitter,
+  Platform,
+} from 'react-native';
 import {COLOR_SCHEME, SIZE, opacity, WEIGHT} from './src/common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ActionButton from 'react-native-action-button';
 
 const App = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const [fab, setFab] = useState(true);
+
   useEffect(() => {
+    DeviceEventEmitter.addListener('hide', () => {
+      setFab(false);
+    });
+    DeviceEventEmitter.addListener('show', () => {
+      setFab(true);
+    });
+    if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
       StatusBar.setBarStyle('dark-content');
+    }
+    return () => {
+      DeviceEventEmitter.removeListener('hide', () => {
+        setFab(false);
+      });
+      DeviceEventEmitter.removeListener('show', () => {
+        setFab(true);
+      });
+    };
   });
   return (
     <>
@@ -22,6 +47,7 @@ const App = () => {
         }}
       />
 
+      {fab ? (
         <ActionButton elevation={5} buttonColor={colors.accent}>
           <ActionButton.Item
             buttonColor="#9b59b6"
@@ -31,7 +57,7 @@ const App = () => {
             }}
             title=""
             hideShadow={true}
-          onPress={() => console.log('notes tapped!')}>
+            onPress={() => NavigationService.navigate('Editor')}>
             <Icon
               name="md-create"
               style={{
@@ -61,27 +87,10 @@ const App = () => {
               }}
             />
           </ActionButton.Item>
-        <ActionButton.Item
-          textStyle={{
-            fontFamily: WEIGHT.regular,
-            color: 'white',
-          }}
-          hideShadow={true}
-          buttonColor="#1abc9c"
-          title=""
-          onPress={() => {
-            NavigationService.navigate('ReminderEditor');
-          }}>
-          <Icon
-            name="ios-clock"
-            style={{
-              fontSize: 20,
-              height: 22,
-              color: 'white',
-            }}
-          />
-        </ActionButton.Item>
         </ActionButton>
+      ) : (
+        undefined
+      )}
     </>
   );
 };

apps/mobile/ios/Notes.xcodeproj/project.pbxproj

@@ -19,12 +19,14 @@
 		2DCD954D1E0B4F2C00145EB5 /* NotesTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* NotesTests.m */; };
 		4FFCB73C43232E07469EEB31 /* libPods-NotesTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 89ABD2DB3BB5CC5C08F50BC5 /* libPods-NotesTests.a */; };
 		58062BBC8B02A59BE1E73AED /* libPods-Notes.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FF962EEB8D0C9B17231DA150 /* libPods-Notes.a */; };
-		655E77342380917B0049D452 /* Quicksand-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E772E2380917B0049D452 /* Quicksand-Bold.ttf */; };
+		655394C623888EBE008A1476 /* texteditor.html in Resources */ = {isa = PBXBuildFile; fileRef = 655394BD23888EBE008A1476 /* texteditor.html */; };
+		655394C723888EBE008A1476 /* fonts.css in Resources */ = {isa = PBXBuildFile; fileRef = 655394BE23888EBE008A1476 /* fonts.css */; };
+		655394C823888EBE008A1476 /* Quicksand-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C023888EBE008A1476 /* Quicksand-Bold.ttf */; };
+		655394C923888EBE008A1476 /* Quicksand-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C123888EBE008A1476 /* Quicksand-Medium.ttf */; };
+		655394CA23888EBE008A1476 /* Quicksand-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C223888EBE008A1476 /* Quicksand-Regular.ttf */; };
+		655394CB23888EBE008A1476 /* Quicksand-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */; };
+		655394CC23888EBE008A1476 /* Quicksand-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C423888EBE008A1476 /* Quicksand-Light.ttf */; };
 		655E77352380917B0049D452 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E772F2380917B0049D452 /* Ionicons.ttf */; };
-		655E77362380917B0049D452 /* Quicksand-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E77302380917B0049D452 /* Quicksand-Medium.ttf */; };
-		655E77372380917B0049D452 /* Quicksand-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E77312380917B0049D452 /* Quicksand-Regular.ttf */; };
-		655E77382380917B0049D452 /* Quicksand-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E77322380917B0049D452 /* Quicksand-SemiBold.ttf */; };
-		655E77392380917B0049D452 /* Quicksand-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E77332380917B0049D452 /* Quicksand-Light.ttf */; };
 		773523A6669C9373D8945A06 /* libPods-Notes-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 177E12D91F5B0732079F75AB /* libPods-Notes-tvOSTests.a */; };
 /* End PBXBuildFile section */
 
@@ -63,12 +65,14 @@
 		36FE4CF96F141D64B0A0C1FF /* libPods-Notes-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Notes-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		44BBC9BD618AE3BC78E5ED24 /* Pods-Notes-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOS.release.xcconfig"; path = "Target Support Files/Pods-Notes-tvOS/Pods-Notes-tvOS.release.xcconfig"; sourceTree = "<group>"; };
 		58ACEDFE1446560AB8875A8B /* Pods-Notes.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes.debug.xcconfig"; path = "Target Support Files/Pods-Notes/Pods-Notes.debug.xcconfig"; sourceTree = "<group>"; };
-		655E772E2380917B0049D452 /* Quicksand-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Bold.ttf"; sourceTree = "<group>"; };
+		655394BD23888EBE008A1476 /* texteditor.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = texteditor.html; sourceTree = "<group>"; };
+		655394BE23888EBE008A1476 /* fonts.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = fonts.css; sourceTree = "<group>"; };
+		655394C023888EBE008A1476 /* Quicksand-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Bold.ttf"; sourceTree = "<group>"; };
+		655394C123888EBE008A1476 /* Quicksand-Medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Medium.ttf"; sourceTree = "<group>"; };
+		655394C223888EBE008A1476 /* Quicksand-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Regular.ttf"; sourceTree = "<group>"; };
+		655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-SemiBold.ttf"; sourceTree = "<group>"; };
+		655394C423888EBE008A1476 /* Quicksand-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Light.ttf"; sourceTree = "<group>"; };
 		655E772F2380917B0049D452 /* Ionicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Ionicons.ttf; sourceTree = "<group>"; };
-		655E77302380917B0049D452 /* Quicksand-Medium.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Medium.ttf"; sourceTree = "<group>"; };
-		655E77312380917B0049D452 /* Quicksand-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Regular.ttf"; sourceTree = "<group>"; };
-		655E77322380917B0049D452 /* Quicksand-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-SemiBold.ttf"; sourceTree = "<group>"; };
-		655E77332380917B0049D452 /* Quicksand-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Light.ttf"; sourceTree = "<group>"; };
 		6FB6DE7AD66669BE4A951A9E /* Pods-Notes-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.debug.xcconfig"; sourceTree = "<group>"; };
 		87D2DFC238DED597B12E218E /* Pods-Notes-tvOSTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.release.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.release.xcconfig"; sourceTree = "<group>"; };
 		89ABD2DB3BB5CC5C08F50BC5 /* libPods-NotesTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NotesTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -176,6 +180,29 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		655394BB23888EBE008A1476 /* web */ = {
+			isa = PBXGroup;
+			children = (
+				655394BD23888EBE008A1476 /* texteditor.html */,
+				655394BE23888EBE008A1476 /* fonts.css */,
+				655394BF23888EBE008A1476 /* fonts */,
+			);
+			name = web;
+			path = ../src/views/Editor/web;
+			sourceTree = "<group>";
+		};
+		655394BF23888EBE008A1476 /* fonts */ = {
+			isa = PBXGroup;
+			children = (
+				655394C023888EBE008A1476 /* Quicksand-Bold.ttf */,
+				655394C123888EBE008A1476 /* Quicksand-Medium.ttf */,
+				655394C223888EBE008A1476 /* Quicksand-Regular.ttf */,
+				655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */,
+				655394C423888EBE008A1476 /* Quicksand-Light.ttf */,
+			);
+			path = fonts;
+			sourceTree = "<group>";
+		};
 		655E772D2380917B0049D452 /* Fonts */ = {
 			isa = PBXGroup;
 			children = (
@@ -194,11 +221,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
-				655E772E2380917B0049D452 /* Quicksand-Bold.ttf */,
+				655394BB23888EBE008A1476 /* web */,
-				655E77302380917B0049D452 /* Quicksand-Medium.ttf */,
-				655E77312380917B0049D452 /* Quicksand-Regular.ttf */,
-				655E77322380917B0049D452 /* Quicksand-SemiBold.ttf */,
-				655E77332380917B0049D452 /* Quicksand-Light.ttf */,
 				655E772D2380917B0049D452 /* Fonts */,
 				13B07FAE1A68108700A75B9A /* Notes */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
@@ -363,14 +386,16 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				655394C723888EBE008A1476 /* fonts.css in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				655E77372380917B0049D452 /* Quicksand-Regular.ttf in Resources */,
+				655394C623888EBE008A1476 /* texteditor.html in Resources */,
-				655E77342380917B0049D452 /* Quicksand-Bold.ttf in Resources */,
 				655E77352380917B0049D452 /* Ionicons.ttf in Resources */,
+				655394CB23888EBE008A1476 /* Quicksand-SemiBold.ttf in Resources */,
+				655394CC23888EBE008A1476 /* Quicksand-Light.ttf in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
-				655E77382380917B0049D452 /* Quicksand-SemiBold.ttf in Resources */,
+				655394C823888EBE008A1476 /* Quicksand-Bold.ttf in Resources */,
-				655E77362380917B0049D452 /* Quicksand-Medium.ttf in Resources */,
+				655394CA23888EBE008A1476 /* Quicksand-Regular.ttf in Resources */,
-				655E77392380917B0049D452 /* Quicksand-Light.ttf in Resources */,
+				655394C923888EBE008A1476 /* Quicksand-Medium.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -461,6 +486,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
+				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 			);
@@ -478,6 +504,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 			);

apps/mobile/ios/Podfile.lock

@@ -182,6 +182,8 @@ PODS:
     - React-cxxreact (= 0.61.4)
     - React-jsi (= 0.61.4)
   - React-jsinspector (0.61.4)
+  - react-native-webview (7.5.1):
+    - React
   - React-RCTActionSheet (0.61.4):
     - React-Core/RCTActionSheetHeaders (= 0.61.4)
   - React-RCTAnimation (0.61.4):
@@ -246,6 +248,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -297,6 +300,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -346,6 +351,7 @@ SPEC CHECKSUMS:
   React-jsi: ca921f4041505f9d5197139b2d09eeb020bb12e8
   React-jsiexecutor: 8dfb73b987afa9324e4009bdce62a18ce23d983c
   React-jsinspector: d15478d0a8ada19864aa4d1cc1c697b41b3fa92f
+  react-native-webview: 2aadbfef6b9eaa9e89b306ae3e31e6e870a6306d
   React-RCTActionSheet: 7369b7c85f99b6299491333affd9f01f5a130c22
   React-RCTAnimation: d07be15b2bd1d06d89417eb0343f98ffd2b099a7
   React-RCTBlob: 8e0b23d95c9baa98f6b0e127e07666aaafd96c34

apps/mobile/src/components/NoteItem/index.js

@@ -74,14 +74,17 @@ const NoteItem = props => {
       </View>
       <View
         style={{
-          justifyContent: 'center',
+          justifyContent: 'flex-start',
           alignItems: 'flex-start',
+          width: '100%',
         }}>
         <Text
           style={{
             fontSize: SIZE.xs + 1,
             color: colors.icon,
             fontFamily: WEIGHT.regular,
+            width: '100%',
+            maxWidth: '100%',
           }}>
           {item.headline}
         </Text>

apps/mobile/src/components/Recents/index.js

@@ -32,8 +32,7 @@ const h = Dimensions.get('window').height;
 const data = [
   {
     title: 'One day about',
-    headline:
+    headline: 'Lorem Ipsum  Lorem Ipsum has',
-      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has',
     timestamp: '2 hours ago',
     type: 'note',
   },
@@ -71,8 +70,8 @@ export const RecentList = () => {
       },
     },
     {
-      name: 'Reminders',
+      name: 'All Notes',
-      icon: 'ios-clock',
+      icon: 'md-create',
       func: () => {
         NavigationService.navigate('Reminders');
       },
@@ -164,8 +163,6 @@ export const RecentList = () => {
                 </TouchableOpacity>
               ))}
             </ScrollView>
-
-            <Reminder />
           </>
         }
         renderItem={({item, index}) => <NoteItem item={item} index={index} />}

apps/mobile/src/services/NavigationService.js

@@ -37,7 +37,7 @@ const TopLevelNavigator = createStackNavigator(
     },
   },
   {
-    initialRouteName: 'Editor',
+    initialRouteName: 'Home',
   },
 );
 

apps/mobile/src/views/Editor/index.js

@@ -1,12 +1,15 @@
 import React, {useEffect, useState, createRef} from 'react';
 import {
-  ScrollView,
   View,
-  Text,
-  TouchableOpacity,
-  TextInput,
   SafeAreaView,
-  StatusBar,
+  Keyboard,
+  LayoutAnimation,
+  Platform,
+  Linking,
+  DeviceEventEmitter,
+  KeyboardAvoidingView,
+  Dimensions,
+  TextInput,
 } from 'react-native';
 import {
   COLOR_SCHEME,
@@ -18,8 +21,13 @@ import {
   FONT,
   WEIGHT,
 } from '../../common/common';
+import WebView from 'react-native-webview';
 import Icon from 'react-native-vector-icons/Ionicons';
-import RichText from 'react-native-rich-text';
+import {useForceUpdate} from '../ListsEditor';
+import {NavigationEvents} from 'react-navigation';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
 const saveText = (type, title, content) => {
   let data = {
     type,
@@ -31,30 +39,157 @@ const saveText = (type, title, content) => {
 
 const Editor = ({navigation}) => {
   const [colors, setColors] = useState(COLOR_SCHEME);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  let EditorWebView = createRef();
+  const _textRender = createRef();
   let _heading = '';
   let _text = '';
-  const _textRender = createRef();
+  let keyboardDidShowListener;
+  let keyboardDidHideListener;
 
-  return (
+  const _keyboardDidShow = e => {
-    <SafeAreaView
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setKeyboardHeight(e.endCoordinates.height);
+  };
+
+  const post = value => EditorWebView.current.postMessage(value);
+
+  const _keyboardDidHide = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setKeyboardHeight(0);
+  };
+
+  function onChangeText(data) {
+    if (data !== '') {
+      let m = JSON.parse(data);
+      console.log(m);
+    }
+  }
+
+  useEffect(() => {
+    DeviceEventEmitter.emit('hide');
+    keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      _keyboardDidShow,
+    );
+    keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      _keyboardDidHide,
+    );
+    return () => {
+      DeviceEventEmitter.emit('show');
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  });
+
+  const _renderWebpage = () => {
+    return Platform.OS === 'ios' ? (
+      <KeyboardAvoidingView behavior="padding" style={{height: '100%'}}>
+        <View
           style={{
             height: '100%',
           }}>
-      <View
+          <TextInput
+            placeholder="Untitled Note"
+            placeholderTextColor={colors.icon}
             style={{
               width: '100%',
-          paddingHorizontal: '5%',
+              fontFamily: WEIGHT.bold,
-          paddingVertical: pv,
+              fontSize: SIZE.xxl,
+              paddingHorizontal: '3%',
+              paddingVertical: 0,
+              marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
+            }}
+          />
 
-          alignSelf: 'center',
+          <WebView
-          marginTop: 25,
+            ref={EditorWebView}
-        }}>
+            onError={error => console.log(error)}
-        <Icon name="ios-arrow-back" size={SIZE.xl} color="black" />
+            javaScriptEnabled
+            onShouldStartLoadWithRequest={request => {
+              if (request.url.includes('https')) {
+                Linking.openURL(request.url);
+                return false;
+              } else {
+                return true;
+              }
+            }}
+            cacheEnabled={true}
+            cacheMode="LOAD_CACHE_ELSE_NETWORK"
+            domStorageEnabled
+            scrollEnabled={false}
+            bounces={true}
+            scalesPageToFit={true}
+            source={require('./web/texteditor.html')}
+            style={{height: '100%', maxHeight: '100%'}}
+            onMessage={evt => {
+              if (evt.nativeEvent.data !== '') {
+                onChangeText(evt.nativeEvent.data);
+              }
+            }}
+          />
         </View>
+      </KeyboardAvoidingView>
+    ) : (
+      <View
+        style={{
+          height: '100%',
+        }}>
+        <TextInput
+          placeholder="Untitled Note"
+          placeholderTextColor={colors.icon}
+          style={{
+            width: '100%',
+            fontFamily: WEIGHT.bold,
+            fontSize: SIZE.xxl,
+            paddingHorizontal: '3%',
+            paddingVertical: 0,
+            marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
+          }}
+        />
 
-      <RichText value="">
+        <WebView
-        <RichText.Editor onChangeText={text => console.log(text)} />
+          ref={EditorWebView}
-      </RichText>
+          onError={error => console.log(error)}
+          javaScriptEnabled
+          domStorageEnabled
+          cacheEnabled
+          cacheMode="LOAD_CACHE_ELSE_NETWORK"
+          onShouldStartLoadWithRequest={request => {
+            if (request.url.includes('https')) {
+              Linking.openURL(request.url);
+              return false;
+            } else {
+              return true;
+            }
+          }}
+          scrollEnabled={false}
+          bounces
+          scalesPageToFit
+          source={{
+            uri: 'file:///android_asset/texteditor.html',
+            baseUrl: 'baseUrl:"file:///android_asset/',
+          }}
+          style={{height: '100%', maxHeight: '100%'}}
+          onMessage={evt => {
+            if (evt.nativeEvent.data !== '') {
+              onChangeText(evt.nativeEvent.data);
+            }
+          }}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <SafeAreaView style={{height: '100%'}}>
+      {_renderWebpage()}
+      <NavigationEvents
+        onWillFocus={() => {
+          DeviceEventEmitter.emit('hide');
+        }}
+      />
     </SafeAreaView>
   );
 };

apps/mobile/src/views/Editor/web/fonts.css

@@ -0,0 +1,59 @@
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Light.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Medium.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/Quicksand-SemiBold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./fonts/Quicksand-Bold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

apps/mobile/src/views/Home/index.js

@@ -49,7 +49,7 @@ export const Home = ({navigation}) => {
           justifyContent: 'center',
           alignItems: 'center',
           alignSelf: 'center',
-          backgroundColor: colors.accent,
+          backgroundColor: 'white',
         }}>
         <Image
           style={{
@@ -61,8 +61,8 @@ export const Home = ({navigation}) => {
         />
         <Text
           style={{
-            fontFamily: WEIGHT.regular,
+            fontFamily: WEIGHT.semibold,
-            color: 'white',
+            color: colors.accent,
             fontSize: SIZE.md,
             marginTop: 10,
           }}>
@@ -72,7 +72,7 @@ export const Home = ({navigation}) => {
         <Text
           style={{
             fontFamily: WEIGHT.regular,
-            color: 'white',
+            color: colors.accent,
             fontSize: SIZE.xs,
             marginTop: 10,
           }}>
@@ -82,16 +82,16 @@ export const Home = ({navigation}) => {
         <View
           style={{
             borderRadius: 2.5,
-            backgroundColor: 'white',
+            backgroundColor: colors.accent,
             marginTop: 10,
             paddingHorizontal: 5,
             paddingVertical: 2,
           }}>
           <Text
             style={{
-              fontFamily: WEIGHT.regular,
+              fontFamily: WEIGHT.bold,
               fontSize: SIZE.xxs,
-              color: colors.accent,
+              color: 'white',
             }}>
             Basic User
           </Text>
@@ -219,7 +219,7 @@ export const Home = ({navigation}) => {
             justifyContent: 'space-between',
             alignItems: 'center',
             paddingHorizontal: '5%',
-            marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+            marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
             marginBottom: h * 0.04,
           }}>
           <Text

apps/mobile/src/views/ListsEditor/index.js

@@ -61,7 +61,7 @@ const ListsEditor = ({navigation}) => {
           justifyContent: 'space-between',
           alignItems: 'center',
           paddingHorizontal: '5%',
-          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
           marginBottom: h * 0.04,
         }}>
         <TextInput

apps/mobile/src/views/ReminderEditor/index.js

@@ -54,7 +54,7 @@ const ReminderEditor = ({navigation}) => {
           justifyContent: 'space-between',
           alignItems: 'center',
           paddingHorizontal: '5%',
-          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04,
           marginBottom: h * 0.04,
         }}>
         <Text