created generic icon component && working on editorBottomBar

src/components/editorHeader/view/editorHeaderView.js

@@ -47,7 +47,7 @@ class EditorHeaderView extends Component {
             size={25}
             onPress={() => handleOnPressPreviewButton()}
             iconStyle={styles.rightIcon}
-            name={isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
+            name={!isPreviewActive ? 'ios-eye' : 'ios-eye-off'}
           />
           <TextButton
             textStyle={styles.textButton}

src/components/icon/index.js

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

src/components/icon/view/iconView.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Platform } from 'react-native';
+
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import Feather from 'react-native-vector-icons/Feather';
+
+class IconView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // for ios its turn ios-eye-off-outline
+  // for android its turn to md-off-outline
+  _getIconName = () => {
+    const { name, androidName } = this.props;
+
+    if (name) {
+      const isIos = Platform.OS === 'ios';
+      let iconName;
+
+      if (!isIos) {
+        iconName = androidName || `md-${name.split('ios-')}`;
+      }
+      return iconName;
+    }
+    return null;
+  };
+
+  _getIcon = () => {
+    const { iconType } = this.props;
+    const name = this._getIconName();
+
+    switch (iconType) {
+      case 'Feather':
+        return <Feather {...this.props} />;
+      case 'FontAwesome':
+        return <FontAwesome {...this.props} />;
+      case 'SimpleLineIcons':
+        return <SimpleLineIcons {...this.props}>{this.props.children}</SimpleLineIcons>;
+      case 'MaterialCommunityIcons':
+        return (
+          <MaterialCommunityIcons name={name} {...this.props}>
+            {this.props.children}
+          </MaterialCommunityIcons>
+        );
+      default:
+        return <Ionicons {...this.props} />;
+    }
+  };
+
+  render() {
+    return this._getIcon();
+  }
+}
+
+export default IconView;

src/components/iconButton/view/iconButtonView.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { TouchableHighlight } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Icon } from '../../icon';
 
 import styles from './iconButtonStyles';
 
@@ -10,7 +10,14 @@ import styles from './iconButtonStyles';
 */
 
 const IconButton = ({
-  name, color, size, onPress, backgroundColor, style, iconStyle,
+  name,
+  color,
+  size,
+  onPress,
+  backgroundColor,
+  style,
+  iconStyle,
+  iconType,
 }) => (
   <Fragment>
     <TouchableHighlight
@@ -18,7 +25,7 @@ const IconButton = ({
       onPress={() => onPress && onPress()}
       underlayColor={backgroundColor || 'white'}
     >
-      <Ionicons
+      <Icon
         style={[
           color && { color },
           backgroundColor && { backgroundColor },
@@ -27,6 +34,7 @@ const IconButton = ({
         ]}
         name={name}
         size={size}
+        iconType={iconType}
       />
     </TouchableHighlight>
   </Fragment>

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

@@ -7,53 +7,78 @@ export default [
   {
     key: 'B',
     title: 'B',
+    icon: 'bold',
+    iconType: 'Feather',
     wrapper: '**',
     onPress: applyWrapFormat,
-    style: { fontWeight: 'bold' },
+    // style: { fontWeight: 'bold' },
   },
   {
     key: 'I',
     title: 'I',
+    icon: 'italic',
+    iconType: 'Feather',
     wrapper: '*',
     onPress: applyWrapFormat,
-    style: { fontStyle: 'italic' },
   },
   {
     key: 'U',
     title: 'U',
+    icon: 'underline',
+    iconType: 'Feather',
     wrapper: '__',
     onPress: applyWrapFormat,
-    style: { textDecorationLine: 'underline' },
   },
   {
     key: 'S',
     title: 'S',
     wrapper: '~~',
+    icon: 'strikethrough',
+    iconType: 'FontAwesome',
     onPress: applyWrapFormat,
-    style: { textDecorationLine: 'line-through' },
+  },
+  {
+    key: '>',
+    title: '>',
+    prefix: '>',
+    icon: 'ios-quote',
+    onPress: applyListFormat,
   },
   {
     key: 'C',
     title: 'C',
+    icon: 'code',
+    iconType: 'Feather',
     wrapper: '`',
     onPress: applyWrapFormat,
   },
   {
     key: 'CC',
     title: 'CC',
+    icon: 'ios-code-working',
     wrapper: '```',
     onPress: applyWrapFormatNewLines,
   },
   {
     key: 'L',
     title: 'L',
+    icon: 'list',
+    iconType: 'Feather',
     prefix: '-',
     onPress: applyListFormat,
   },
-  { key: 'WEB', title: 'WEB', onPress: applyWebLinkFormat },
+  {
+    key: 'WEB',
+    title: 'WEB',
+    icon: 'link-2',
+    iconType: 'Feather',
+    onPress: applyWebLinkFormat,
+  },
   {
     key: 'H1',
     title: 'H1',
+    icon: 'format-size',
+    iconType: 'MaterialCommunityIcons',
     prefix: '#',
     onPress: applyListFormat,
   },

src/components/markdownEditor/view/markdownEditorView.js

@@ -4,15 +4,13 @@ import {
   TextInput,
   KeyboardAvoidingView,
   ScrollView,
-  TouchableOpacity,
-  Text,
   FlatList,
 } from 'react-native';
 import { MarkdownView } from 'react-native-markdown-view';
 
 // Components
 import Formats from './formats/formats';
-
+import { IconButton } from '../../iconButton';
 // Styles
 import styles from './markdownEditorStyles';
 import previewStyles from './markdownPreviewStyles';
@@ -71,9 +69,11 @@ export default class MarkdownEditorView extends Component {
   };
 
   _renderMarkupButton = ({ item, getState, setState }) => (
-    <TouchableOpacity onPress={() => item.onPress({ getState, setState, item })}>
-      <Text style={item.style}>{item.title}</Text>
-    </TouchableOpacity>
+    <IconButton
+      iconType={item.iconType}
+      name={item.icon}
+      onPress={() => item.onPress({ getState, setState, item })}
+    />
   );
 
   _renderEditorButtons = ({ getState, setState }) => (