add Icon font

package.json

@@ -9,12 +9,14 @@
   },
   "dependencies": {
     "expo": "^35.0.0",
+    "expo-font": "^7.0.0",
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
+    "@expo/vector-icons": "^10.0.6",
     "babel-eslint": "^10.0.3",
     "babel-preset-expo": "^7.1.0",
     "eslint": "^6.6.0",

src/elements/CircleButton.js

@@ -1,9 +1,28 @@
 import React from 'react';
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import * as Font from 'expo-font';
+import { createIconSet } from '@expo/vector-icons';
+import fontAwesome from '../../assets/fonts/fa-solid-900.ttf';
+
+const glyphMap = { pencil: '\uf303', plus: '\uf067' };
+const fontAw = require('../../assets/fonts/fa-solid-900.ttf');
+
+const CustomIcon = createIconSet(glyphMap, 'FontAwesome', fontAw);
 
 class CircleButton extends React.Component {
+  state = {
+    fontLoaded: false,
+  }
+
+  async componentWillMount() {
+    await Font.loadAsync({
+      FontAwesome: fontAwesome,
+    });
+    this.setState({ fontLoaded: true });
+  }
+
   render() {
-    const { style, color } = this.props;
+    const { name, style, color } = this.props;
 
     let bgColor = '#e31676';
     let textColor = '#fff';
@@ -14,16 +33,12 @@ class CircleButton extends React.Component {
     }
 
     return (
-      <View style={
-        [
-          styles.CircleButton,
-          style,
-          { backgroundColor: bgColor },
-        ]
-      }>
-        <Text style={[styles.CircleButtonTitle, { color: textColor }]}>
-          {this.props.children}
-        </Text>
+      <View style={[styles.CircleButton, style, { backgroundColor: bgColor }]}>
+        {
+          this.state.fontLoaded ? (
+            <CustomIcon name={name} style={[styles.CircleButtonTitle, { color: textColor }]} />
+          ) : null
+        }
       </View>
     );
   }
@@ -44,7 +59,8 @@ const styles = StyleSheet.create({
     shadowRadius: 3,
   },
   CircleButtonTitle: {
-    fontSize: 32,
+    fontFamily: 'FontAwesome',
+    fontSize: 24,
     lineHeight: 32,
   },
 });

src/screens/MemoDetailScreen.js

@@ -18,7 +18,7 @@ class MemoDetailScreen extends React.Component {
           </Text>
         </View>
 
-        <CircleButton color="white" style={styles.editButton}>+</CircleButton>
+        <CircleButton name="pencil" color="white" style={styles.editButton} />
       </View>
     );
   }

src/screens/MemoListScreen.js

@@ -9,7 +9,7 @@ class MemoListScreen extends React.Component {
     return (
       <View style={styles.container}>
         <MemoList />
-        <CircleButton>+</CircleButton>
+        <CircleButton name="plus" />
       </View>
     );
   }