updated for image and container

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -9,14 +9,17 @@ export default EStyleSheet.create({
   },
   textWrapper: {
     flex: 1,
-    flexDirection: 'column',
     fontSize: 12,
-    marginVertical: 16,
+    paddingVertical: 16,
     paddingHorizontal: 16,
     color: '$primaryBlack',
     fontFamily: '$editorFont',
     textAlignVertical: 'top',
   },
+  previewContainer: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
   inlinePadding: {
     padding: 8,
   },

src/components/markdownEditor/view/markdownEditorView.js

@@ -1,19 +1,19 @@
 import React, { Component } from 'react';
 import {
-  View, KeyboardAvoidingView, ScrollView, FlatList, Text, Platform,
+  View, KeyboardAvoidingView, FlatList, Text, Platform,
 } from 'react-native';
 import ActionSheet from 'react-native-actionsheet';
 
 // Utils
 import { markDown2Html } from '../../../utils/markdownToHtml';
+import applyImageLink from './formats/applyWebLinkFormat';
+import Formats from './formats/formats';
 
 // Components
 import { IconButton } from '../../iconButton';
+import { PostBody } from '../../postElements';
 import { StickyBar } from '../../basicUIElements';
 import { TextInput } from '../../textInput';
-import applyImageLink from './formats/applyWebLinkFormat';
-import Formats from './formats/formats';
-import { PostBody } from '../../postElements';
 
 // Styles
 import styles from './markdownEditorStyles';
@@ -98,10 +98,8 @@ export default class MarkdownEditorView extends Component {
     const { text } = this.state;
 
     return (
-      <View style={styles.textWrapper}>
-        <ScrollView removeClippedSubviews>
-          {text ? <PostBody body={markDown2Html(text)} /> : <Text>...</Text>}
-        </ScrollView>
+      <View style={styles.previewContainer}>
+        {text ? <PostBody body={markDown2Html(text)} /> : <Text>...</Text>}
       </View>
     );
   };

src/utils/markdownToHtml.js

@@ -152,7 +152,7 @@ const changeMarkdownImage = input => input.replace(markdownImageRegex, (link) =>
   return link;
 });
 
-const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align: align-items: center;">');
+const centerStyling = input => input.replace(centerRegex, () => '<center style="text-align: center; align-items: center; justify-content: center;">');
 
 const steemitUrlHandle = input => input.replace(postRegex, (link) => {
   const postMatch = link.match(postRegex);