From 45af5803d18cf7a29e858753d0765e3995ce6e40 Mon Sep 17 00:00:00 2001
From: TDHTTTT <gmail@tdhttt.com>
Date: Sat, 20 Aug 2022 16:32:43 -0700
Subject: [PATCH 1/4] dynamically layout the Note and Result based on keyboard
 - use flexbox to dynamically layout - use KeyboardAvoidingView to adjust the
 height so that flexbox can   adjust according   - TODO: have more control
 with flexGrow/flexShrink    
 ([reference](https://reactnative.dev/docs/flexbox#flex-basis-grow-and-shrink))

---
 pages/Editor.js | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/pages/Editor.js b/pages/Editor.js
index a801ab6..d64d175 100644
--- a/pages/Editor.js
+++ b/pages/Editor.js
@@ -9,7 +9,7 @@ import {
   TouchableWithoutFeedback,
 } from "react-native";
 
-import { useWindowDimensions } from "react-native";
+import { useWindowDimensions, KeyboardAvoidingView } from "react-native";
 import { useKeepAwake } from "expo-keep-awake";
 import { useTheme, CommonActions } from "@react-navigation/native";
 import { useHeaderHeight } from "@react-navigation/elements";
@@ -275,6 +275,11 @@ export default function Editor({
     findWord(query);
   };
 
+  const onFocusResult = () => {
+    // let query = getWordPerLine(noteContent, cursorPos);
+    // findWord(query);
+  };
+
   const updateGlobalState = () => {
     const index = globalData.findIndex((item) => item.id === noteID.current);
 
@@ -300,7 +305,9 @@ export default function Editor({
     windowHeight - 165 - keyboard.keyboardHeight - headerHeight;
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <KeyboardAvoidingView 
+      behavior="height"
+      style={[styles.container, { backgroundColor: colors.background }]}>
       <StatusBar style={dark ? "light" : "dark"} />
 
       <ScrollView
@@ -308,7 +315,7 @@ export default function Editor({
         keyboardShouldPersistTaps="always"
         ref={scrollParentInput}
         style={{
-          height: noteHeight,
+          flex: 2
         }}
         persistentScrollbar={true}
         removeClippedSubviews={true}
@@ -364,14 +371,14 @@ export default function Editor({
       {/* ####### Result ##### */}
       <ScrollView
         ref={scrollParentResult}
-        contentContainerStyle={{ paddingBottom: 30, flexGrow: 1 }}
+        contentContainerStyle={{ paddingBottom: 30 }}
         persistentScrollbar={true}
-        keyboardDismissMode="none"
-        keyboardShouldPersistTaps="always"
+        keyboardDismissMode="onDrag"
+        keyboardShouldPersistTaps="never"
+        onFocus={onFocusResult}
         style={[
           styles.resultContainer,
           {
-            top: noteHeight,
             backgroundColor: colors.backgroundLevel2,
           },
         ]}
@@ -391,14 +398,16 @@ export default function Editor({
           />
         )}
       </ScrollView>
-    </View>
+    </KeyboardAvoidingView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     // This is need for android to work the meaning scrollview
-    flex: Platform.OS === "android" ? 1 : 0,
+    flex: 1,
+    flexDirection: "column",
+    alignContent: "space-between",
   },
   input: {
     paddingHorizontal: 10,
@@ -417,10 +426,11 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 24,
     fontFamily: "iA Writer Quattro",
     width: "100%",
-    position: "absolute",
-    height: 165,
+    minheight: 165,
     backgroundColor: "#E6E6E6",
     padding: 16,
     paddingTop: 12,
+    flex: 1,
+    flexGrow: 1,
   },
 });

From 99c4f907e90eebaf239d0459fd9cbaf434e5d95e Mon Sep 17 00:00:00 2001
From: TDHTTTT <gmail@tdhttt.com>
Date: Sat, 20 Aug 2022 16:52:55 -0700
Subject: [PATCH 2/4] get rid off unused functions

---
 pages/Editor.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/pages/Editor.js b/pages/Editor.js
index d64d175..2a5bf25 100644
--- a/pages/Editor.js
+++ b/pages/Editor.js
@@ -275,11 +275,6 @@ export default function Editor({
     findWord(query);
   };
 
-  const onFocusResult = () => {
-    // let query = getWordPerLine(noteContent, cursorPos);
-    // findWord(query);
-  };
-
   const updateGlobalState = () => {
     const index = globalData.findIndex((item) => item.id === noteID.current);
 
@@ -375,7 +370,6 @@ export default function Editor({
         persistentScrollbar={true}
         keyboardDismissMode="onDrag"
         keyboardShouldPersistTaps="never"
-        onFocus={onFocusResult}
         style={[
           styles.resultContainer,
           {

From 40f8ef766e44ca9d44158170adea723cd9123a81 Mon Sep 17 00:00:00 2001
From: TDHTTTT <gmail@tdhttt.com>
Date: Sat, 27 Aug 2022 17:28:51 -0700
Subject: [PATCH 3/4] fix minHeight typo

---
 pages/Editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/Editor.js b/pages/Editor.js
index 2a5bf25..ce59937 100644
--- a/pages/Editor.js
+++ b/pages/Editor.js
@@ -420,7 +420,7 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 24,
     fontFamily: "iA Writer Quattro",
     width: "100%",
-    minheight: 165,
+    minHeight: 165,
     backgroundColor: "#E6E6E6",
     padding: 16,
     paddingTop: 12,

From da3e51640184a46e803ef17a15e2ddb3e1ccce47 Mon Sep 17 00:00:00 2001
From: TDHTTTT <gmail@tdhttt.com>
Date: Sat, 27 Aug 2022 17:32:13 -0700
Subject: [PATCH 4/4] onDrag don't dismiss keyboard

---
 pages/Editor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/Editor.js b/pages/Editor.js
index ce59937..68782c1 100644
--- a/pages/Editor.js
+++ b/pages/Editor.js
@@ -368,7 +368,7 @@ export default function Editor({
         ref={scrollParentResult}
         contentContainerStyle={{ paddingBottom: 30 }}
         persistentScrollbar={true}
-        keyboardDismissMode="onDrag"
+        keyboardDismissMode="none"
         keyboardShouldPersistTaps="never"
         style={[
           styles.resultContainer,