メモが０件の場合のUX

.eslintrc.json

@@ -17,6 +17,15 @@
     "linebreak-style": 0,
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "react/prop-types": ["error", { "ignore": ["navigation"] }],
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "object-curly-newline": [
+      "error",
+      {
+        "ObjectExpression": "always",
+        "ObjectPattern": { "multiline": true },
+        "ImportDeclaration": "never",
+        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
+      }
+    ]
   }
 }

src/components/Button.jsx

@@ -1,21 +1,23 @@
-import { func, string } from 'prop-types';
+import { func, shape, string } from 'prop-types';
 import React from 'react';
 import { TouchableOpacity, StyleSheet, Text } from 'react-native';
 
 function Button(props) {
-  const { label, onPress } = props;
+  const { label, onPress, style } = props;
   return (
-    <TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
+    <TouchableOpacity style={[styles.buttonContainer, style]} onPress={onPress}>
       <Text style={styles.buttonLabel}>{label}</Text>
     </TouchableOpacity>
   );
 }
 Button.propTypes = {
   label: string.isRequired,
   onPress: func,
+  style: shape(),
 };
 Button.defaultProps = {
   onPress: null,
+  style: null,
 };
 const styles = StyleSheet.create({
   buttonContainer: {

src/screens/MemoDetailScreen.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { shape, string } from 'prop-types';
-// eslint-disable-next-line object-curly-newline
 import { View, Text, ScrollView, StyleSheet } from 'react-native';
 import firebase from 'firebase';
 

src/screens/MemoListScreen.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Alert } from 'react-native';
+import { View, StyleSheet, Alert, Text } from 'react-native';
 import firebase from 'firebase';
 import CircleButton from '../components/CircleButton';
 import LogOutButton from '../components/LogOutButton';
 import MemoList from '../components/MemoList';
+import Button from '../components/Button';
 
 function MemoListScreen(props) {
   const { navigation } = props;
@@ -43,6 +44,22 @@ function MemoListScreen(props) {
     }
     return unscribe;
   }, []);
+  if (memos.length === 0) {
+    return (
+      <View style={emptyStyles.container}>
+        <View style={emptyStyles.inner}>
+          <Text style={emptyStyles.title}>最初のメモを作成しよう！</Text>
+          <Button
+            style={emptyStyles.button}
+            label="作成する"
+            onPress={() => {
+              navigation.navigate('MemoCreate');
+            }}
+          />
+        </View>
+      </View>
+    );
+  }
   return (
     <View style={styles.container}>
       <MemoList memos={memos} />
@@ -62,4 +79,23 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
   },
 });
+const emptyStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inner: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 24,
+  },
+  button: {
+    alignSelf: 'center',
+  },
+});
 export default MemoListScreen;