refactor: keyboard avoiding

README.md

@@ -35,7 +35,6 @@ src
 
 ## TODO
 
-- [ ] コメント入力
 - [ ] 体組成値のグラフ
 - [ ] デザインを整える
 - [ ] 未読バッチ

src/components/AutoGrowingTextInput.tsx

@@ -0,0 +1 @@
+// TODO

src/components/CommentBox.tsx

@@ -1,49 +1,14 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback } from "react";
 import styled from "styled-components/native";
-import { Input, Icon, Footer } from "native-base";
-import {
-  TouchableOpacity,
-  GestureResponderEvent,
-  KeyboardAvoidingView,
-  NativeModules,
-  StatusBarIOS,
-} from "react-native";
-import { Platform } from "@unimodules/core";
-import { GRAY_C, PRIMARY_PINK } from "../styles/color";
-
-const { StatusBarManager } = NativeModules;
+import { Input, Icon } from "native-base";
+import { TouchableOpacity, GestureResponderEvent } from "react-native";
+import { GRAY_C } from "../styles/color";
 
 interface Props {
   onSubmit: (text: string) => void;
 }
 
-const useStatusBarHeight = () => {
-  const [statusBarHeight, setStatusBarHeight] = useState(0);
-
-  useEffect(() => {
-    if (Platform.OS === "ios") {
-      StatusBarManager.getHeight(statusBarFrameData => {
-        setStatusBarHeight(statusBarFrameData.height);
-      });
-
-      const statusBarListener = StatusBarIOS.addListener(
-        "statusBarFrameWillChange",
-        statusBarData => {
-          setStatusBarHeight(statusBarData.frame.height);
-        }
-      );
-
-      return () => {
-        statusBarListener.remove();
-      };
-    }
-  });
-
-  return statusBarHeight;
-};
-
 export const CommentBox: React.FC<Props> = ({ onSubmit }) => {
-  const statusBarHeight = useStatusBarHeight();
   const [text, setText] = useState("");
   const handleSubmit = useCallback(() => {
     if (text) {
@@ -53,21 +18,14 @@ export const CommentBox: React.FC<Props> = ({ onSubmit }) => {
   }, [text]);
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      keyboardVerticalOffset={44 + statusBarHeight}
-      style={{ width: "100%" }}>
-      <Footer>
-        <InputContainer>
-          <StyledInput
-            placeholder="メッセージを送る"
-            onChangeText={setText}
-            value={text}
-          />
-          <SendButton onPress={handleSubmit} disabled={text.length === 0} />
-        </InputContainer>
-      </Footer>
-    </KeyboardAvoidingView>
+    <InputContainer>
+      <StyledInput
+        placeholder="メッセージを送る"
+        onChangeText={setText}
+        value={text}
+      />
+      <SendButton onPress={handleSubmit} disabled={text.length === 0} />
+    </InputContainer>
   );
 };
 

src/components/KeyboardAvoidingContainer.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { KeyboardAvoidingView } from "react-native";
+import { useStatusBarHeight } from "../hooks/device";
+
+export const KeyboardAvoidingContainer: React.FC<{}> = ({ children }) => {
+  const statusBarHeight = useStatusBarHeight();
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior="padding"
+      keyboardVerticalOffset={44 + statusBarHeight}>
+      {children}
+    </KeyboardAvoidingView>
+  );
+};

src/hooks/device.ts

@@ -0,0 +1,29 @@
+import { NativeModules, Platform, StatusBarIOS } from "react-native";
+import { useState, useEffect } from "react";
+
+const { StatusBarManager } = NativeModules;
+
+export const useStatusBarHeight = () => {
+  const [statusBarHeight, setStatusBarHeight] = useState(0);
+
+  useEffect(() => {
+    if (Platform.OS === "ios") {
+      StatusBarManager.getHeight(statusBarFrameData => {
+        setStatusBarHeight(statusBarFrameData.height);
+      });
+
+      const statusBarListener = StatusBarIOS.addListener(
+        "statusBarFrameWillChange",
+        statusBarData => {
+          setStatusBarHeight(statusBarData.frame.height);
+        }
+      );
+
+      return () => {
+        statusBarListener.remove();
+      };
+    }
+  });
+
+  return statusBarHeight;
+};

src/screens/AthleteDetailScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { NavigationScreenComponent, FlatList } from "react-navigation";
 import { useDispatch, useSelector } from "react-redux";
-import { Container, Content, ListItem, Footer, Input } from "native-base";
+import { Container, Content, ListItem, Footer } from "native-base";
 import styled from "styled-components/native";
 import dayjs, { Dayjs } from "dayjs";
 import { useAuthentication } from "../hooks/useAuthentication";
@@ -11,12 +11,12 @@ import {
   publishMessage,
 } from "../store/athlete/actions";
 import { RootState } from "../store";
-import { formatRelativeDateTime } from "../lib/datetime";
 import { Message, isMessage } from "../lib/firestore.d";
 import { Record, isRecord } from "../lib/foolog-api-client.d";
 import { RecordEntry } from "../components/RecordEntry";
 import { MessageEntry } from "../components/MessageEntry";
 import { CommentBox } from "../components/CommentBox";
+import { KeyboardAvoidingContainer } from "../components/KeyboardAvoidingContainer";
 
 interface Params {
   athleteId: string;
@@ -157,15 +157,18 @@ export const AthleteDetailScreen: NavigationScreenComponent<Params> = props => {
 
   return (
     <StyledContainer>
-      <Content>
-        <FlatList
-          data={entries}
-          renderItem={renderItem}
-          keyExtractor={item => item.id}
-        />
-      </Content>
-
-      <CommentBox onSubmit={publishMessage} />
+      <KeyboardAvoidingContainer>
+        <Content>
+          <FlatList
+            data={entries}
+            renderItem={renderItem}
+            keyExtractor={item => item.id}
+          />
+        </Content>
+        <Footer>
+          <CommentBox onSubmit={publishMessage} />
+        </Footer>
+      </KeyboardAvoidingContainer>
     </StyledContainer>
   );
 };