update example project with a toolbar

Author: DaniAkash

ReactNativeDraftjsExample/App.js

@@ -6,33 +6,121 @@
  * @flow
  */
 
-import React, { Fragment } from "react";
+import React, { useState } from "react";
 import {
   SafeAreaView,
   StyleSheet,
-  ScrollView,
+  TouchableOpacity,
   View,
-  Text,
-  StatusBar
+  Text
 } from "react-native";
 import KeyboardSpacer from "react-native-keyboard-spacer";
 import RNDraftView from "react-native-draftjs";
 
+const ControlButton = ({ text, action, isActive }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.controlButtonContainer,
+        isActive ? { backgroundColor: "gold" } : {}
+      ]}
+      onPress={action}
+    >
+      <Text>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const EditorToolBar = ({
+  activeStyles,
+  blockType,
+  toggleStyle,
+  toggleBlockType
+}) => {
+  return (
+    <View style={styles.toolbarContainer}>
+      <ControlButton
+        text={"B"}
+        isActive={activeStyles.includes("BOLD")}
+        action={() => toggleStyle("BOLD")}
+      />
+      <ControlButton
+        text={"I"}
+        isActive={activeStyles.includes("ITALIC")}
+        action={() => toggleStyle("ITALIC")}
+      />
+      <ControlButton
+        text={"H"}
+        isActive={blockType === "header-one"}
+        action={() => toggleBlockType("header-one")}
+      />
+      <ControlButton
+        text={"ul"}
+        isActive={blockType === "unordered-list-item"}
+        action={() => toggleBlockType("unordered-list-item")}
+      />
+      <ControlButton
+        text={"ol"}
+        isActive={blockType === "ordered-list-item"}
+        action={() => toggleBlockType("ordered-list-item")}
+      />
+    </View>
+  );
+};
+
 const App = () => {
+  const _draftRef = React.createRef();
+  const [activeStyles, setActiveStyles] = useState([]);
+  const [blockType, setActiveBlockType] = useState("unstyled");
+
+  const editorLoaded = () => {
+    _draftRef.current && _draftRef.current.focus();
+  };
+
+  const toggleStyle = style => {
+    _draftRef.current && _draftRef.current.setStyle(style);
+  };
+
+  const toggleBlockType = blockType => {
+    _draftRef.current && _draftRef.current.setBlockType(blockType);
+  };
+
   return (
-    <Fragment>
-      <View style={styles.containerStyle}>
-        <RNDraftView />
-        <KeyboardSpacer />
-      </View>
-    </Fragment>
+    <SafeAreaView style={styles.containerStyle}>
+      <RNDraftView
+        onEditorReady={editorLoaded}
+        style={{ flex: 1 }}
+        placeholder={"Some placeholder Text..."}
+        ref={_draftRef}
+        onStyleChanged={setActiveStyles}
+        onBlockTypeChanged={setActiveBlockType}
+      />
+      <EditorToolBar
+        activeStyles={activeStyles}
+        blockType={blockType}
+        toggleStyle={toggleStyle}
+        toggleBlockType={toggleBlockType}
+      />
+      <KeyboardSpacer />
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   containerStyle: {
     flex: 1,
     marginTop: 36
+  },
+  toolbarContainer: {
+    height: 56,
+    flexDirection: "row",
+    backgroundColor: "silver",
+    alignItems: "center",
+    justifyContent: "space-around"
+  },
+  controlButtonContainer: {
+    padding: 8,
+    borderRadius: 2
   }
 });