Add height provider (#75)

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -2,6 +2,7 @@ import { Picker } from "emoji-mart";
 import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { useLow } from "../../contexts/narrowProvider";
 import { uintToImgUrl } from "../../helpers/uintToImgUrl";
 import { lightTheme, Theme } from "../../styles/themes";
 import { EmojiIcon } from "../Icons/EmojiIcon";
@@ -59,6 +60,8 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
     [content, imageUint]
   );
 
+  const low = useLow();
+
   return (
     <View>
       {showEmoji && (
@@ -74,6 +77,8 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
               bottom: "100%",
               right: "0",
               color: theme.secondary,
+              height: low ? "200px" : "355px",
+              overflow: "auto",
             }}
             showPreview={false}
             showSkinTones={false}

packages/react-chat/src/contexts/narrowProvider.tsx

@@ -2,10 +2,19 @@ import React, { createContext, useContext } from "react";
 
 import { useRefBreak } from "../hooks/useRefBreak";
 
-const NarrowContext = createContext<boolean>(false);
+const NarrowContext = createContext<{ narrow: boolean; low: boolean }>({
+  narrow: false,
+  low: false,
+});
 
 export function useNarrow() {
-  return useContext(NarrowContext);
+  const { narrow } = useContext(NarrowContext);
+  return narrow;
+}
+
+export function useLow() {
+  const { low } = useContext(NarrowContext);
+  return low;
 }
 
 interface NarrowProviderProps {
@@ -15,5 +24,6 @@ interface NarrowProviderProps {
 
 export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
   const narrow = useRefBreak(myRef?.current?.offsetWidth ?? 0, 736);
-  return <NarrowContext.Provider value={narrow} children={children} />;
+  const low = useRefBreak(myRef?.current?.offsetHeight ?? 0, 465);
+  return <NarrowContext.Provider value={{ narrow, low }} children={children} />;
 }