chore: allow pass height in percentage

README.md

@@ -58,8 +58,8 @@ TODO
 | containerStyles | ViewStyle | {} | no | Override container styles |
 | hideHeader | boolean | false | no | Hide category names | 
 | expandable | boolean | true | no | Show knob and enable expand on swipe up |
-| defaultHeight | number | 0.4 | no | Specify collapsed container height (1 is full screen height) |
+| defaultHeight | number \| string | "40%" | no | Specify collapsed container height (number is points, string is a percentage of the screen height) |
-| expandedHeight | number | 0.8 | no | Specify expanded container height (1 is full screen height) *only if expandable is true* |
+| expandedHeight | number \| string | "80%" | no | Specify expanded container height (number is points, string is a percentage of the screen height) _works only if expandable is true_ |
 | backdropColor | string | "#00000055" | no | Change backdrop color and alpha |
 | categoryColor | string | "#000000" | no | Change category item color |
 | activeCategoryColor | string | "#005b96" | no | Change active category item color |

example/src/App.tsx

@@ -26,6 +26,8 @@ export default function App() {
         onEmojiSelected={handlePick}
         open={isModalOpen}
         onClose={() => setIsModalOpen(false)}
+        defaultHeight={100}
+        expandedHeight={200}
       />
 
       {/* //////////////////////////////////////////// */}

src/EmojiPicker.tsx

@@ -6,6 +6,7 @@ import { defaultKeyboardContext, KeyboardProvider } from './KeyboardProvider';
 import type { KeyboardProps } from './KeyboardContext';
 import type { EmojiType } from './types';
 import { ModalWithBackdrop } from './components/ModalWithBackdrop';
+import { getHeight } from './utils';
 
 export const EmojiPicker = ({
   onEmojiSelected,
@@ -18,7 +19,7 @@ export const EmojiPicker = ({
   const { height: screenHeight } = useWindowDimensions();
   const offsetY = React.useRef(new Animated.Value(0)).current;
   const height = React.useRef(
-    new Animated.Value(screenHeight * defaultHeight)
+    new Animated.Value(getHeight(defaultHeight, screenHeight))
   ).current;
   const translateY = React.useRef(new Animated.Value(0)).current;
 

src/KeyboardContext.tsx

@@ -16,8 +16,8 @@ export type KeyboardProps = {
   headerStyles?: TextStyle;
   expandable?: boolean;
   hideHeader?: boolean;
-  defaultHeight?: number;
+  defaultHeight?: number | string;
-  expandedHeight?: number;
+  expandedHeight?: number | string;
   backdropColor?: string;
   categoryColor?: string;
   activeCategoryColor?: string;

src/KeyboardProvider.tsx

@@ -21,8 +21,8 @@ export const defaultKeyboardContext: Required<KeyboardProps> = {
   headerStyles: {},
   expandable: true,
   hideHeader: false,
-  defaultHeight: 0.4,
+  defaultHeight: '40%',
-  expandedHeight: 0.8,
+  expandedHeight: '80%',
   backdropColor: '#00000055',
   categoryColor: '#000000',
   activeCategoryColor: '#005b96',

src/components/Knob.tsx

@@ -5,6 +5,7 @@ import {
   PanGestureHandlerGestureEvent,
   State,
 } from 'react-native-gesture-handler';
+import { getHeight } from '../utils';
 import { KeyboardContext } from '../KeyboardContext';
 
 type KnobProps = {
@@ -33,16 +34,16 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
       if (translationY < -30) {
         Animated.spring(height, {
           useNativeDriver: false,
-          toValue: screenHeight * ctx.expandedHeight,
+          toValue: getHeight(ctx.expandedHeight, screenHeight),
         }).start();
       } else if (translationY > 150) {
-        height.setValue(screenHeight * ctx.defaultHeight);
+        height.setValue(getHeight(ctx.defaultHeight, screenHeight));
         offsetY.setValue(0);
         onClose();
       } else {
         Animated.spring(height, {
           useNativeDriver: false,
-          toValue: screenHeight * ctx.defaultHeight,
+          toValue: getHeight(ctx.defaultHeight, screenHeight),
         }).start();
       }
     }

src/utils.ts

@@ -0,0 +1,4 @@
+export const getHeight = (value: string | number, screenHeight: number) =>
+  typeof value === 'number'
+    ? value
+    : (screenHeight / 100) * parseInt(value.replace('%', ''), 10);