2 files changed, 38 insertions, 0 deletions
diff --git a/src/lib/hooks/useIsKeyboardVisible.ts b/src/lib/hooks/useIsKeyboardVisible.ts
new file mode 100644
index 000000000..5b2a86eb0
--- /dev/null
+++ b/src/lib/hooks/useIsKeyboardVisible.ts
@@ -0,0 +1,35 @@
+import {useState, useEffect} from 'react'
+import {Keyboard} from 'react-native'
+import {isIOS} from 'platform/detection'
+
+export function useIsKeyboardVisible({
+  iosUseWillEvents,
+}: {
+  iosUseWillEvents?: boolean
+} = {}) {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false)
+
+  // NOTE
+  // only iOS suppose the "will" events
+  // -prf
+  const showEvent =
+    isIOS && iosUseWillEvents ? 'keyboardWillShow' : 'keyboardDidShow'
+  const hideEvent =
+    isIOS && iosUseWillEvents ? 'keyboardWillHide' : 'keyboardDidHide'
+
+  useEffect(() => {
+    const keyboardShowListener = Keyboard.addListener(showEvent, () =>
+      setKeyboardVisible(true),
+    )
+    const keyboardHideListener = Keyboard.addListener(hideEvent, () =>
+      setKeyboardVisible(false),
+    )
+
+    return () => {
+      keyboardHideListener.remove()
+      keyboardShowListener.remove()
+    }
+  }, [showEvent, hideEvent])
+
+  return [isKeyboardVisible]
+}
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index fb631c0bf..c5a710fff 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -89,6 +89,9 @@ export const s = StyleSheet.create({
   // text decoration
   underline: {textDecorationLine: 'underline'},
 
+  // font variants
+  tabularNum: {fontVariant: ['tabular-nums']},
+
   // font sizes
   f9: {fontSize: 9},
   f10: {fontSize: 10},