コードをコンポーネントとして抽出する

App.jsx

@@ -9,9 +9,10 @@ import {
 } from '@expo-google-fonts/roboto';
 
 import AppLoading from 'expo-app-loading';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import Header from './src/components/Header';
 import MemoList from './src/components/MemoList';
+import CircleButton from './src/components/CircleButton';
 
 export default function App() {
   // eslint-disable-next-line prefer-const
@@ -28,9 +29,7 @@ export default function App() {
     <View style={styles.container}>
       <Header />
       <MemoList />
-      <View style={styles.circleButton}>
-        <Text style={styles.circleButtonLabel}>+</Text>
-      </View>
+      <CircleButton>+</CircleButton>
     </View>
   );
 }
@@ -40,46 +39,4 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
-
-  memoListItem: {
-    backgroundColor: 'rgba(244,223,186,0.3)',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 19,
-    borderBottomColor: '#CA965C',
-    borderBottomWidth: 1,
-  },
-  memoListTitle: {
-    fontSize: 16,
-    lineHeight: 32,
-    fontWeight: 'bold',
-  },
-  memoListDate: {
-    fontSize: 10,
-    lineHeight: 16,
-    color: '#666666',
-  },
-  circleButton: {
-    backgroundColor: '#876445',
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    bottom: 40,
-    right: 40,
-    shadowColor: '#000000',
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.25,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  circleButtonLabel: {
-    color: '#fff',
-    fontSize: 40,
-    lineHeight: 40,
-  },
 });

src/components/CircleButton.jsx

@@ -0,0 +1,41 @@
+import { string } from 'prop-types';
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+function CircleButton(props) {
+  const { children } = props;
+  return (
+    <View style={styles.circleButton}>
+      <Text style={styles.circleButtonLabel}>{children}</Text>
+    </View>
+  );
+}
+CircleButton.propTypes = {
+  children: string.isRequired,
+};
+
+const styles = StyleSheet.create({
+  circleButton: {
+    backgroundColor: '#876445',
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    bottom: 40,
+    right: 40,
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  circleButtonLabel: {
+    color: '#fff',
+    fontSize: 40,
+    lineHeight: 40,
+  },
+});
+
+export default CircleButton;