cteated editor view && preview

android/app/build.gradle

@@ -137,6 +137,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-webview-bridge')
     compile project(':react-native-restart')
     compile project(':react-native-linear-gradient')
     compile project(':react-native-fast-image')

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

@@ -3,6 +3,7 @@ package com.esteem;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.dylanvann.fastimage.FastImageViewPackage;
@@ -28,6 +29,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new WebViewBridgePackage(),
             new ReactNativeRestartPackage(),
             new LinearGradientPackage(),
             new FastImageViewPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'esteem'
+include ':react-native-webview-bridge'
+project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')
 include ':react-native-restart'
 project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android')
 include ':react-native-linear-gradient'

ios/eSteem.xcodeproj/project.pbxproj

@@ -5,6 +5,7 @@
 	};
 	objectVersion = 46;
 	objects = {
+
 /* Begin PBXBuildFile section */
 		003440E6511D4B618B83C16D /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6CC37929F8C54DEFB4495E7A /* Zocial.ttf */; };
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
@@ -41,6 +42,7 @@
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
 		3292A9077C45479783C30033 /* Roboto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 635D32A58E2D4779AAFA7F9B /* Roboto.ttf */; };
 		3718BEC2FA5D424C84E66A62 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 757F88379FEC4A64953A0FB1 /* Octicons.ttf */; };
+		3BBC0A49A8634CAC95244CC7 /* libReact-Native-Webview-Bridge.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 64F08C4952A3471388D3D2B8 /* libReact-Native-Webview-Bridge.a */; };
 		4B838169BBA04121894A6D5E /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C1D174678B2A4F12B73C1E7C /* Octicons.ttf */; };
 		570FA51F2C284323B44647E5 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 74B4DB231C864C1396DE4B66 /* MaterialCommunityIcons.ttf */; };
 		7BD4C8014D7C471993888662 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F9522422A7344FC2868812F2 /* EvilIcons.ttf */; };
@@ -354,6 +356,13 @@
 			remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4;
 			remoteInfo = "jschelpers-tvOS";
 		};
+		478F70202178F4DC00AB7885 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 1E61E156AB924DDEB65748D8 /* React-Native-Webview-Bridge.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 4114DC4C1C187C3A003CD988;
+			remoteInfo = "React-Native-Webview-Bridge";
+		};
 		5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
@@ -418,6 +427,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = esteem/main.m; sourceTree = "<group>"; };
 		13E98A98124E4BEBA487D578 /* RCTRestart.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTRestart.xcodeproj; path = "../node_modules/react-native-restart/ios/RCTRestart.xcodeproj"; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
+		1E61E156AB924DDEB65748D8 /* React-Native-Webview-Bridge.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = "React-Native-Webview-Bridge.xcodeproj"; path = "../node_modules/react-native-webview-bridge/ios/React-Native-Webview-Bridge.xcodeproj"; sourceTree = "<group>"; };
 		1FEB71E782A04A389954C7EE /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		22C6C35C8E9649A8BA9A36B0 /* BVLinearGradient.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = BVLinearGradient.xcodeproj; path = "../node_modules/react-native-linear-gradient/BVLinearGradient.xcodeproj"; sourceTree = "<group>"; };
 		2C8069C858654E31982B1ADE /* Foundation.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Foundation.ttf; path = "../node_modules/native-base/Fonts/Foundation.ttf"; sourceTree = "<group>"; };
@@ -436,6 +446,7 @@
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		635D32A58E2D4779AAFA7F9B /* Roboto.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Roboto.ttf; path = "../node_modules/native-base/Fonts/Roboto.ttf"; sourceTree = "<group>"; };
 		643A180C70346210DBCDA844 /* libPods-esteem.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-esteem.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		64F08C4952A3471388D3D2B8 /* libReact-Native-Webview-Bridge.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = "libReact-Native-Webview-Bridge.a"; sourceTree = "<group>"; };
 		69526F6E067C4B44BA2C7C8D /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		6CC37929F8C54DEFB4495E7A /* Zocial.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Zocial.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; };
 		74B4DB231C864C1396DE4B66 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/native-base/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
@@ -495,6 +506,7 @@
 				8C72986AA22D4EEF991D46D5 /* libBVLinearGradient.a in Frameworks */,
 				CDB5D95490BC4A75BBC7469A /* libRCTRestart.a in Frameworks */,
 				A81CB2A034F70E89E26C4E24 /* libPods-esteem.a in Frameworks */,
+				3BBC0A49A8634CAC95244CC7 /* libReact-Native-Webview-Bridge.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -616,6 +628,7 @@
 				B9A39F8F2F40473BB249771F /* libFastImage.a */,
 				7DBB25C3CD894D43A67DA880 /* libBVLinearGradient.a */,
 				314D0FFC0C4E488D8038E9F0 /* libRCTRestart.a */,
+				64F08C4952A3471388D3D2B8 /* libReact-Native-Webview-Bridge.a */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -705,6 +718,14 @@
 			name = Frameworks;
 			sourceTree = "<group>";
 		};
+		478F701D2178F4DA00AB7885 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				478F70212178F4DC00AB7885 /* libReact-Native-Webview-Bridge.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -784,6 +805,7 @@
 				06103BFFE2CB48619746DE98 /* FastImage.xcodeproj */,
 				22C6C35C8E9649A8BA9A36B0 /* BVLinearGradient.xcodeproj */,
 				13E98A98124E4BEBA487D578 /* RCTRestart.xcodeproj */,
+				1E61E156AB924DDEB65748D8 /* React-Native-Webview-Bridge.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -937,7 +959,7 @@
 					};
 				};
 			};
-			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "eSteem" */;
+			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "esteem" */;
 			compatibilityVersion = "Xcode 3.2";
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
@@ -1005,6 +1027,10 @@
 					ProductGroup = 139FDEE71B06529A00C62182 /* Products */;
 					ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
 				},
+				{
+					ProductGroup = 478F701D2178F4DA00AB7885 /* Products */;
+					ProjectRef = 1E61E156AB924DDEB65748D8 /* React-Native-Webview-Bridge.xcodeproj */;
+				},
 				{
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
@@ -1295,6 +1321,13 @@
 			remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		478F70212178F4DC00AB7885 /* libReact-Native-Webview-Bridge.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libReact-Native-Webview-Bridge.a";
+			remoteRef = 478F70202178F4DC00AB7885 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1518,6 +1551,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = esteemTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1529,6 +1563,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1552,6 +1587,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = esteemTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1563,6 +1599,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1589,6 +1626,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = esteem/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1617,6 +1655,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = esteem/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1650,6 +1689,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = "esteem-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1660,6 +1700,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1692,6 +1733,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = "esteem-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1702,6 +1744,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1733,6 +1776,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = "esteem-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1743,6 +1787,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1774,6 +1819,7 @@
 					"$(SRCROOT)/../node_modules/react-native-fast-image/ios/FastImage/**",
 					"$(SRCROOT)/../node_modules/react-native-linear-gradient/BVLinearGradient",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-webview-bridge/ios",
 				);
 				INFOPLIST_FILE = "esteem-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1784,6 +1830,7 @@
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1935,7 +1982,7 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
-		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "eSteem" */ = {
+		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "esteem" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (
 				83CBBA201A601CBA00E9B192 /* Debug */,

package-lock.json

@@ -4309,14 +4309,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4331,20 +4329,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4461,8 +4456,7 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4474,7 +4468,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4489,7 +4482,6 @@
           "version": "3.0.4",
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4497,14 +4489,12 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4523,7 +4513,6 @@
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4604,8 +4593,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4617,7 +4605,6 @@
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4739,7 +4726,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9994,6 +9980,17 @@
         "yargs": "^8.0.2"
       }
     },
+    "react-native-webview-bridge": {
+      "version": "0.40.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview-bridge/-/react-native-webview-bridge-0.40.1.tgz",
+      "integrity": "sha512-JJmgt3P64KXganhRWivvzITCN5VUC2HdIDZkASUtY8PfsgJP61SAykYnIliUYl1qNq0Pkda4c6Gf1qF8RgfvVg==",
+      "requires": {
+        "create-react-class": "^15.6.0",
+        "invariant": "^2.2.2",
+        "keymirror": "0.1.1",
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-webview-bridge-updated": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/react-native-webview-bridge-updated/-/react-native-webview-bridge-updated-1.0.9.tgz",

package.json

@@ -30,12 +30,14 @@
     "react-native-keyboard-aware-scroll-view": "^0.7.2",
     "react-native-linear-gradient": "^2.4.2",
     "react-native-markdown-editor": "^1.0.1",
+    "react-native-markdown-view": "^1.1.4",
     "react-native-modal": "^6.5.0",
     "react-native-modal-dropdown": "^0.6.2",
     "react-native-modal-popover": "0.0.10",
     "react-native-restart": "0.0.6",
     "react-native-slider": "^0.11.0",
     "react-native-vector-icons": "^4.6.0",
+    "react-native-webview-bridge": "^0.40.1",
     "react-native-zss-rich-text-editor": "^1.1.0",
     "react-navigation": "^2.17.0",
     "react-navigation-redux-helpers": "^2.0.6",

src/components/editorElements/editorBar/view/editorBarView.js

@@ -1,31 +0,0 @@
-import React, { Component } from 'react';
-import { View, Text, KeyboardAvoidingView } from 'react-native';
-// Components
-//import { RichTextEditor, RichTextToolbar } from 'react-native-zss-rich-text-editor';
-// Styles
-import styles from './editorBarStyles';
-
-/**
- *            Props Name        Description
- * @props -->  props name here   description here
- */
-
-class EditorBarView extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-  }
-
-  render() {
-    return (
-      <KeyboardAvoidingView behavior="padding">
-        <View style={styles.container}>
-          {/* <RichTextToolbar getEditor={() => this.richtext} /> */}
-        </View>
-      </KeyboardAvoidingView>
-    );
-  }
-}
-
-export default EditorBarView;

src/components/editorElements/index.js

@@ -1,5 +1,5 @@
 import TitleArea from './titleArea/view/titleAreaView';
 import TagArea from './tagArea/view/tagAreaView';
-import EditorBar from './editorBar/view/editorBarView';
+import TextArea from './textArea/view/textAreaView';
 
-export { TitleArea, TagArea, EditorBar };
+export { TitleArea, TagArea, TextArea };

src/components/editorElements/tagArea/view/tagAreaView.js

@@ -76,7 +76,7 @@ export default class TagAreaView extends Component {
               editable={!chipsData}
               maxLength={50}
               placeholder="tags"
-              autoFocus={chips.length - 1 === i}
+              autoFocus={i !== 0 && chips.length - 1 === i}
               multiline={false}
               handleOnChange={text => this._handleOnChange(text, i)}
               handleOnBlur={() => this._handleOnBlur()}

src/components/editorElements/textArea/view/textAreaStyles.js

@@ -0,0 +1,8 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 16,
+  },
+});

src/components/editorElements/textArea/view/textAreaView.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+// Constants
+
+// Components
+import { MarkdownEditor } from '../../../markdownEditor';
+
+// Styles
+import styles from './textAreaStyles';
+
+export default class TextAreaView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  defaultMarkdownButton = ({ item, getState, setState }) => <Text>ugur</Text>;
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <MarkdownEditor
+          placeholderString="ugur"
+          // markdownButton={e => this.defaultMarkdownButton(e)}
+          placeholder="sss"
+          {...this.props}
+        />
+      </View>
+    );
+  }
+}

src/components/editorElements/titleArea/view/titleAreaView.js

@@ -34,6 +34,7 @@ export default class TitleAreaView extends Component {
           maxLength={250}
           placeholder="Title"
           multiline
+          autoFocus
           numberOfLines={4}
           onChangeText={text => onChange && onChange(text)}
           value={value}

src/components/editorHeader/container/editorHeaderContainer.js

@@ -10,7 +10,7 @@ import { EditorHeaderView } from '..';
 class EditorHeaderContainer extends Component {
   /* Props
     * ------------------------------------------------
-    *   @prop { type }    name                - Description....
+    *   @prop { funtion }    handleOnPressPreviewButton                - Preview button active handler....
     */
 
   constructor(props) {

src/components/editorHeader/view/editorHeaderView.js

@@ -25,7 +25,7 @@ class EditorHeaderView extends Component {
   // Component Functions
 
   render() {
-    const { handleOnPressBackButton } = this.props;
+    const { handleOnPressBackButton, handleOnPressPreviewButton, isPreviewActive } = this.props;
 
     return (
       <SafeAreaView>
@@ -45,8 +45,9 @@ class EditorHeaderView extends Component {
           <IconButton
             style={styles.iconButton}
             size={25}
+            onPress={() => handleOnPressPreviewButton()}
             iconStyle={styles.rightIcon}
-            name="ios-eye"
+            name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
           />
           <TextButton
             textStyle={styles.textButton}

src/components/markdownEditor/index.js

@@ -0,0 +1,4 @@
+import MarkdownEditor from './view/markdownEditorView';
+
+export { MarkdownEditor };
+export default MarkdownEditor;

src/components/markdownEditor/view/editorBarStyles.js

@@ -3,7 +3,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export default EStyleSheet.create({
   container: {
     flexDirection: 'row',
-    backgroundColor: '$white',
+    backgroundColor: 'red',
     alignItems: 'center',
     height: 48,
     shadowOpacity: 0.2,

src/components/markdownEditor/view/formats/applyListFormat.js

@@ -0,0 +1,32 @@
+import { replaceBetween } from './utils';
+
+export default ({ getState, item, setState }) => {
+  let { text } = getState();
+  const { selection } = getState();
+  text = text || '';
+  let newText;
+  let newSelection;
+  if (selection.start !== selection.end) {
+    newText = replaceBetween(
+      text,
+      selection,
+      `${item.prefix} ${text.substring(selection.start, selection.end)}\n`,
+    );
+    newSelection = { start: selection.end + 3, end: selection.end + 3 };
+  } else if (
+    selection.start === selection.end
+    && text.substring(selection.end - 1, selection.end) === '\n'
+  ) {
+    newText = replaceBetween(text, selection, `${item.prefix} `);
+    newSelection = { start: selection.start + 2, end: selection.start + 2 };
+  } else {
+    newText = replaceBetween(text, selection, `\n${item.prefix} `);
+    newSelection = { start: selection.start + 3, end: selection.start + 3 };
+  }
+
+  setState({ text: newText }, () => {
+    setTimeout(() => {
+      setState({ selection: newSelection });
+    }, 300);
+  });
+};

src/components/markdownEditor/view/formats/applyWebLinkFormat.js

@@ -0,0 +1,35 @@
+import { isStringWebLink, replaceBetween } from './utils';
+
+export const writeUrlTextHere = 'https://example.com';
+export const writeTextHereString = 'Text here!';
+
+export default ({ getState, item, setState }) => {
+  const { selection, text } = getState();
+  let newText;
+  let newSelection;
+  const selectedText = text.substring(selection.start, selection.end);
+  if (selection.start !== selection.end) {
+    if (isStringWebLink(selectedText)) {
+      newText = replaceBetween(text, selection, `[${writeTextHereString}](${selectedText})`);
+      newSelection = {
+        start: selection.start + 1,
+        end: selection.start + 1 + writeTextHereString.length,
+      };
+    } else {
+      newText = replaceBetween(text, selection, `[${selectedText}](${writeUrlTextHere})`);
+      newSelection = {
+        start: selection.end + 3,
+        end: selection.end + 3 + writeUrlTextHere.length,
+      };
+    }
+  } else {
+    newText = replaceBetween(text, selection, `[${writeTextHereString}](${writeUrlTextHere})`);
+    newSelection = {
+      start: selection.start + 1,
+      end: selection.start + 1 + writeTextHereString.length,
+    };
+  }
+  setState({ text: newText }, () => {
+    setState({ selection: newSelection });
+  });
+};

src/components/markdownEditor/view/formats/applyWrapFormat.js

@@ -0,0 +1,27 @@
+import { replaceBetween } from './utils';
+
+export default ({ getState, item, setState }) => {
+  const { text, selection } = getState();
+  const newText = replaceBetween(
+    text,
+    selection,
+    item.wrapper.concat(text.substring(selection.start, selection.end), item.wrapper),
+  );
+  let newPosition;
+  if (selection.start === selection.end) {
+    newPosition = selection.end + item.wrapper.length;
+  } else {
+    newPosition = selection.end + item.wrapper.length * 2;
+  }
+  const extra = {
+    selection: {
+      start: newPosition,
+      end: newPosition,
+    },
+  };
+  setState({ text: newText }, () => {
+    setTimeout(() => {
+      setState({ ...extra });
+    }, 25);
+  });
+};

src/components/markdownEditor/view/formats/applyWrapFormatNewLines.js

@@ -0,0 +1,55 @@
+import { replaceBetween } from './utils';
+
+export default ({ getState, item, setState }) => {
+  const { text, selection } = getState();
+  let newText = replaceBetween(
+    text,
+    selection,
+    `\n${item.wrapper.concat(
+      '\n',
+      text.substring(selection.start, selection.end),
+      '\n',
+      item.wrapper,
+      '\n',
+    )}`,
+  );
+  let newPosition;
+  if (selection.start === selection.end) {
+    newPosition = selection.end + item.wrapper.length + 2; // +2 For two new lines
+    newText = replaceBetween(
+      text,
+      selection,
+      `\n${item.wrapper.concat(
+        '\n',
+        text.substring(selection.start, selection.end),
+        '\n',
+        item.wrapper,
+        '\n',
+      )}`,
+    );
+  } else {
+    newPosition = selection.end + item.wrapper.length * 2 + 3; // +3 For three new lines
+    newText = replaceBetween(
+      text,
+      selection,
+      `${item.wrapper.concat(
+        '\n',
+        text.substring(selection.start, selection.end),
+        '\n',
+        item.wrapper,
+        '\n',
+      )}`,
+    );
+  }
+  const extra = {
+    selection: {
+      start: newPosition,
+      end: newPosition,
+    },
+  };
+  setState({ text: newText }, () => {
+    setTimeout(() => {
+      setState({ ...extra });
+    }, 25);
+  });
+};

src/components/markdownEditor/view/formats/formats.js

@@ -0,0 +1,90 @@
+import applyWrapFormat from './applyWrapFormat';
+import applyWrapFormatNewLines from './applyWrapFormatNewLines';
+import applyListFormat from './applyListFormat';
+import applyWebLinkFormat from './applyWebLinkFormat';
+
+export default [
+  {
+    key: 'B',
+    title: 'B',
+    wrapper: '**',
+    onPress: applyWrapFormat,
+    style: { fontWeight: 'bold' },
+  },
+  {
+    key: 'I',
+    title: 'I',
+    wrapper: '*',
+    onPress: applyWrapFormat,
+    style: { fontStyle: 'italic' },
+  },
+  {
+    key: 'U',
+    title: 'U',
+    wrapper: '__',
+    onPress: applyWrapFormat,
+    style: { textDecorationLine: 'underline' },
+  },
+  {
+    key: 'S',
+    title: 'S',
+    wrapper: '~~',
+    onPress: applyWrapFormat,
+    style: { textDecorationLine: 'line-through' },
+  },
+  {
+    key: 'C',
+    title: 'C',
+    wrapper: '`',
+    onPress: applyWrapFormat,
+  },
+  {
+    key: 'CC',
+    title: 'CC',
+    wrapper: '```',
+    onPress: applyWrapFormatNewLines,
+  },
+  {
+    key: 'L',
+    title: 'L',
+    prefix: '-',
+    onPress: applyListFormat,
+  },
+  { key: 'WEB', title: 'WEB', onPress: applyWebLinkFormat },
+  {
+    key: 'H1',
+    title: 'H1',
+    prefix: '#',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'H2',
+    title: 'H2',
+    prefix: '##',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'H3',
+    title: 'H3',
+    prefix: '###',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'H4',
+    title: 'H4',
+    prefix: '####',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'H5',
+    title: 'H5',
+    prefix: '#####',
+    onPress: applyListFormat,
+  },
+  {
+    key: 'H6',
+    title: 'H6',
+    prefix: '######',
+    onPress: applyListFormat,
+  },
+];

src/components/markdownEditor/view/formats/utils.js

@@ -0,0 +1,8 @@
+import regexValidator from './webLinkValidator';
+
+export const replaceBetween = (text: string, selection: Object, what: string) => text.substring(0, selection.start) + what + text.substring(selection.end);
+
+export const isStringWebLink = (text: string): boolean => {
+  const pattern = regexValidator;
+  return pattern.test(text);
+};

src/components/markdownEditor/view/formats/webLinkValidator.js

@@ -0,0 +1,45 @@
+// Regular Expression for URL validation
+//
+// Author: Diego Perini
+// Updated: 2010/12/05
+// License: MIT
+//
+// Copyright (c) 2010-2013 Diego Perini (http://www.iport.it)
+//
+export default new RegExp(
+  '^'
+    // protocol identifier
+    + '(?:(?:https?|ftp)://)'
+    // user:pass authentication
+    + '(?:\\S+(?::\\S*)?@)?'
+    + '(?:'
+    // IP address exclusion
+    // private & local networks
+    + '(?!(?:10|127)(?:\\.\\d{1,3}){3})'
+    + '(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})'
+    + '(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})'
+    // IP address dotted notation octets
+    // excludes loopback network 0.0.0.0
+    // excludes reserved space >= 224.0.0.0
+    // excludes network & broacast addresses
+    // (first & last IP address of each class)
+    + '(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])'
+    + '(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}'
+    + '(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))'
+    + '|'
+    // host name
+    + '(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)'
+    // domain name
+    + '(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*'
+    // TLD identifier
+    + '(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))'
+    // TLD may end with dot
+    + '\\.?'
+    + ')'
+    // port number
+    + '(?::\\d{2,5})?'
+    // resource path
+    + '(?:[/?#]\\S*)?'
+    + '$',
+  'i',
+);

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -0,0 +1,33 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  textWrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    fontSize: 16,
+  },
+  inlinePadding: {
+    padding: 8,
+  },
+  wrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    backgroundColor: '$white',
+  },
+  // markdownStyles: {
+  //   heading1: {
+  //     fontSize: 24,
+  //     color: 'purple',
+  //   },
+  //   link: {
+  //     color: 'pink',
+  //   },
+  //   mailTo: {
+  //     color: 'orange',
+  //   },
+  //   text: {
+  //     color: '#555555',
+  //   },
+  // },
+});

src/components/markdownEditor/view/markdownEditorView.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  View, TextInput, Platform, KeyboardAvoidingView, ScrollView,
+} from 'react-native';
+import { MarkdownView } from 'react-native-markdown-view';
+
+import { renderFormatButtons } from './renderButtons';
+import styles from './markdownEditorStyles';
+
+const markdownStyles = {
+  heading1: {
+    fontSize: 24,
+    color: 'purple',
+  },
+  link: {
+    color: 'pink',
+  },
+  mailTo: {
+    color: 'orange',
+  },
+  text: {
+    color: '#555555',
+  },
+};
+
+export default class MarkdownEditorView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: '',
+      selection: { start: 0, end: 0 },
+    };
+  }
+
+  textInput: TextInput;
+
+  componentDidMount() {
+    this.textInput.focus();
+  }
+
+  changeText = (input: string) => {
+    const { onMarkdownChange } = this.props;
+
+    this.setState({ text: input });
+
+    if (onMarkdownChange) {
+      onMarkdownChange(input);
+    }
+  };
+
+  onSelectionChange = (event) => {
+    this.setState({
+      selection: event.nativeEvent.selection,
+    });
+  };
+
+  getState = () => {
+    this.setState({
+      selection: {
+        start: 1,
+        end: 1,
+      },
+    });
+    return this.state;
+  };
+
+  renderPreview = () => {
+    const { text } = this.state;
+
+    return (
+      <View style={styles.textWrapper}>
+        <ScrollView removeClippedSubviews>
+          <MarkdownView styles={markdownStyles}>
+            {text === '' ? 'There is nothing to preview here' : text}
+          </MarkdownView>
+        </ScrollView>
+      </View>
+    );
+  };
+
+  render() {
+    const {
+      Formats, markdownButton, placeHolder, isPreviewActive,
+    } = this.props;
+    const { text, selection } = this.state;
+    return (
+      <View style={styles.wrapper}>
+        {!isPreviewActive ? (
+          <View 
+            style={styles.textWrapper}
+          
+          >
+            <TextInput
+              style={styles.textWrapper}
+              multiline
+              underlineColorAndroid="transparent"
+              onChangeText={this.changeText}
+              onSelectionChange={this.onSelectionChange}
+              value={text}
+              placeholder={placeHolder}
+              ref={textInput => (this.textInput = textInput)}
+              selection={selection}
+              selectionColor="#357ce6"
+            />
+          </View>
+        ) : (
+          this.renderPreview()
+        )}
+        <KeyboardAvoidingView behavior="padding">
+          {!isPreviewActive
+            && renderFormatButtons(
+              {
+                getState: this.getState,
+                setState: (state, callback) => {
+                  this.textInput.focus();
+                  this.setState(state, callback);
+                },
+              },
+              Formats,
+              markdownButton,
+            )}
+        </KeyboardAvoidingView>
+      </View>
+    );
+  }
+}

src/components/markdownEditor/view/renderButtons.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  FlatList, TouchableOpacity, Text, View, KeyboardAvoidingView,
+} from 'react-native';
+
+import Formats from './formats/formats';
+
+import styles from './editorBarStyles';
+
+const FOREGROUND_COLOR = '#788187';
+const defaultStyles = { padding: 8, color: FOREGROUND_COLOR, fontSize: 16 };
+
+const defaultMarkdownButton = ({ item, getState, setState }) => (
+  <TouchableOpacity onPress={() => item.onPress({ getState, setState, item })}>
+    <Text style={[defaultStyles, item.style]}>{item.title}</Text>
+  </TouchableOpacity>
+);
+
+export const renderFormatButtons = ({ getState, setState }, formats, markdownButton) => (
+  <KeyboardAvoidingView behavior="padding">
+    <View style={styles.container}>
+      <FlatList
+        data={formats || Formats}
+        keyboardShouldPersistTaps="always"
+        renderItem={({ item, index }) => (markdownButton
+          ? markdownButton({ item, getState, setState })
+          : defaultMarkdownButton({ item, getState, setState }))
+        }
+        horizontal
+      />
+    </View>
+  </KeyboardAvoidingView>
+);

src/screens/editor/screen/editorScreen.js

@@ -1,12 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { View } from 'react-native';
 
 // Constants
 
 // Components
 import { EditorHeader } from '../../../components/editorHeader';
-import { TitleArea, TagArea, EditorBar } from '../../../components/editorElements';
+import { TitleArea, TagArea, TextArea } from '../../../components/editorElements';
-
 // Styles
 import globalStyles from '../../../globalStyles';
 
@@ -18,23 +17,34 @@ export class EditorScreen extends Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isPreviewActive: false,
+    };
   }
 
   // Component Life Cycles
 
   // Component Functions
+  _handleOnPressPreviewButton = () => {
+    const { isPreviewActive } = this.state;
+
+    this.setState({ isPreviewActive: !isPreviewActive });
+  };
 
   render() {
-    // eslint-disable-next-line
+    const { isPreviewActive } = this.state;
+
     return (
       <View style={globalStyles.defaultContainer}>
-        <EditorHeader />
+        <EditorHeader
+          isPreviewActive={isPreviewActive}
+          handleOnPressPreviewButton={this._handleOnPressPreviewButton}
+        />
         <View style={globalStyles.containerHorizontal16}>
           <TitleArea />
           <TagArea />
+          <TextArea isPreviewActive={isPreviewActive} />
         </View>
-        <EditorBar />
       </View>
     );
   }

yarn.lock

@@ -1974,7 +1974,7 @@ create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.2, create-react-class@^15.6.3:
+create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
@@ -5809,6 +5809,15 @@ react-native-webview-bridge-updated@^1.0.0:
     invariant "2.2.0"
     keymirror "0.1.1"
 
+react-native-webview-bridge@^0.40.1:
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/react-native-webview-bridge/-/react-native-webview-bridge-0.40.1.tgz#8a64a108c5687101e1da86e87fd707350a3f89fa"
+  dependencies:
+    create-react-class "^15.6.0"
+    invariant "^2.2.2"
+    keymirror "0.1.1"
+    prop-types "^15.5.10"
+
 react-native-zss-rich-text-editor@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-native-zss-rich-text-editor/-/react-native-zss-rich-text-editor-1.1.0.tgz#c197d797a8ca65e46e2ccbe36e73fa2624d07c1c"