fixed keyboardavoding & style

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

@@ -1,13 +1,9 @@
 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
     * ------------------------------------------------
@@ -22,18 +18,8 @@ export default class TextAreaView extends Component {
   // 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>
-    );
+    return <MarkdownEditor {...this.props} />;
   }
 }

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: 'red',
+    backgroundColor: '$white',
     alignItems: 'center',
     height: 48,
     shadowOpacity: 0.2,

src/components/markdownEditor/view/markdownEditorStyles.js

@@ -1,33 +1,30 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  textWrapper: {
-    flex: 1,
-    flexDirection: 'column',
-    fontSize: 16,
-  },
-  inlinePadding: {
-    padding: 8,
-  },
-  wrapper: {
+  container: {
     flex: 1,
     flexDirection: 'column',
     alignItems: 'stretch',
     backgroundColor: '$white',
   },
-  // markdownStyles: {
-  //   heading1: {
-  //     fontSize: 24,
-  //     color: 'purple',
-  //   },
-  //   link: {
-  //     color: 'pink',
-  //   },
-  //   mailTo: {
-  //     color: 'orange',
-  //   },
-  //   text: {
-  //     color: '#555555',
-  //   },
-  // },
+  textWrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    fontSize: 12,
+    marginVertical: 16,
+    paddingHorizontal: 16,
+  },
+  inlinePadding: {
+    padding: 8,
+  },
+  editorButtons: {
+    flexDirection: 'row',
+    backgroundColor: '$white',
+    alignItems: 'center',
+    height: 48,
+    shadowOpacity: 0.2,
+    shadowOffset: {
+      height: 1.5,
+    },
+  },
 });

src/components/markdownEditor/view/markdownEditorView.js

@@ -1,29 +1,23 @@
-import React from 'react';
+import React, { Component } from 'react';
 import {
-  View, TextInput, Platform, KeyboardAvoidingView, ScrollView,
+  View,
+  TextInput,
+  KeyboardAvoidingView,
+  ScrollView,
+  TouchableOpacity,
+  Text,
+  FlatList,
 } from 'react-native';
 import { MarkdownView } from 'react-native-markdown-view';
 
-import { renderFormatButtons } from './renderButtons';
+// Components
+import Formats from './formats/formats';
+
+// Styles
 import styles from './markdownEditorStyles';
+import previewStyles from './markdownPreviewStyles';
 
-const markdownStyles = {
-  heading1: {
-    fontSize: 24,
-    color: 'purple',
-  },
-  link: {
-    color: 'pink',
-  },
-  mailTo: {
-    color: 'orange',
-  },
-  text: {
-    color: '#555555',
-  },
-};
-
-export default class MarkdownEditorView extends React.Component {
+export default class MarkdownEditorView extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -32,13 +26,11 @@ export default class MarkdownEditorView extends React.Component {
     };
   }
 
-  textInput: TextInput;
-
   componentDidMount() {
     this.textInput.focus();
   }
 
-  changeText = (input: string) => {
+  changeText = (input) => {
     const { onMarkdownChange } = this.props;
 
     this.setState({ text: input });
@@ -48,13 +40,13 @@ export default class MarkdownEditorView extends React.Component {
     }
   };
 
-  onSelectionChange = (event) => {
+  _handleOnSelectionChange = (event) => {
     this.setState({
       selection: event.nativeEvent.selection,
     });
   };
 
-  getState = () => {
+  _getState = () => {
     this.setState({
       selection: {
         start: 1,
@@ -64,13 +56,13 @@ export default class MarkdownEditorView extends React.Component {
     return this.state;
   };
 
-  renderPreview = () => {
+  _renderPreview = () => {
     const { text } = this.state;
 
     return (
       <View style={styles.textWrapper}>
         <ScrollView removeClippedSubviews>
-          <MarkdownView styles={markdownStyles}>
+          <MarkdownView styles={previewStyles}>
             {text === '' ? 'There is nothing to preview here' : text}
           </MarkdownView>
         </ScrollView>
@@ -78,49 +70,55 @@ export default class MarkdownEditorView extends React.Component {
     );
   };
 
+  _renderMarkupButton = ({ item, getState, setState }) => (
+    <TouchableOpacity onPress={() => item.onPress({ getState, setState, item })}>
+      <Text style={item.style}>{item.title}</Text>
+    </TouchableOpacity>
+  );
+
+  _renderEditorButtons = ({ getState, setState }) => (
+    <View style={styles.editorButtons}>
+      <FlatList
+        data={Formats}
+        keyboardShouldPersistTaps="always"
+        renderItem={({ item }) => this._renderMarkupButton({ item, getState, setState })}
+        horizontal
+      />
+    </View>
+  );
+
   render() {
-    const {
-      Formats, markdownButton, placeHolder, isPreviewActive,
-    } = this.props;
+    const { placeHolder, isPreviewActive } = this.props;
     const { text, selection } = this.state;
+
     return (
-      <View style={styles.wrapper}>
+      <KeyboardAvoidingView style={styles.container} behavior="padding">
         {!isPreviewActive ? (
-          <View 
+          <TextInput
             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>
+            multiline
+            underlineColorAndroid="transparent"
+            onChangeText={this.changeText}
+            onSelectionChange={this._handleOnSelectionChange}
+            value={text}
+            placeholder={placeHolder}
+            placeholderTextColor="#c1c5c7"
+            ref={textInput => (this.textInput = textInput)}
+            selection={selection}
+            selectionColor="#357ce6"
+          />
         ) : (
-          this.renderPreview()
+          this._renderPreview()
         )}
-        <KeyboardAvoidingView behavior="padding">
-          {!isPreviewActive
-            && renderFormatButtons(
-              {
-                getState: this.getState,
-                setState: (state, callback) => {
-                  this.textInput.focus();
-                  this.setState(state, callback);
-                },
-              },
-              Formats,
-              markdownButton,
-            )}
-        </KeyboardAvoidingView>
-      </View>
+        {!isPreviewActive
+          && this._renderEditorButtons({
+            getState: this._getState,
+            setState: (state, callback) => {
+              this.textInput.focus();
+              this.setState(state, callback);
+            },
+          })}
+      </KeyboardAvoidingView>
     );
   }
 }

src/components/markdownEditor/view/markdownPreviewStyles.js

@@ -0,0 +1,16 @@
+export const markdownPreviewStyles = {
+  heading1: {
+    fontSize: 24,
+    color: 'red',
+    backgroundColor: 'red',
+  },
+  link: {
+    color: 'pink',
+  },
+  mailTo: {
+    color: 'orange',
+  },
+  text: {
+    color: '#555555',
+  },
+};

src/components/markdownEditor/view/renderButtons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  FlatList, TouchableOpacity, Text, View, KeyboardAvoidingView,
+  FlatList, TouchableOpacity, Text, View,
 } from 'react-native';
 
 import Formats from './formats/formats';
@@ -16,18 +16,16 @@ const defaultMarkdownButton = ({ item, getState, setState }) => (
   </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>
+export const renderEditorButtons = ({ getState, setState }, formats, markdownButton) => (
+  <View style={styles.container}>
+    <FlatList
+      data={formats || Formats}
+      keyboardShouldPersistTaps="always"
+      renderItem={({ item, index }) => (markdownButton
+        ? markdownButton({ item, getState, setState })
+        : defaultMarkdownButton({ item, getState, setState }))
+      }
+      horizontal
+    />
+  </View>
 );

src/globalStyles.js

@@ -2,7 +2,6 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   containerHorizontal16: {
-    flex: 1,
     paddingHorizontal: 16,
   },
   defaultContainer: {

src/screens/editor/screen/editorScreen.js

@@ -43,8 +43,8 @@ export class EditorScreen extends Component {
         <View style={globalStyles.containerHorizontal16}>
           <TitleArea />
           <TagArea />
-          <TextArea isPreviewActive={isPreviewActive} />
         </View>
+        <TextArea placeHolder="What would you like to write about today?" isPreviewActive={isPreviewActive} />
       </View>
     );
   }