@magmamath/students-features 0.9.0-rc11 → 0.9.0-rc13

package/src/features/keyboard/components/AlgebraLayout/AlgebraLayout.tsx

@@ -1,12 +1,13 @@
 import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { COLORS, SelectGroup, SelectOptionSize, IS_MOBILE } from '@magmamath/react-native-ui'
 import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
 import { IntegralABIcon } from '../../../../shared/icons/MATH/IntegralABIcon/IntegralABIcon'
 import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
+import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../../constants'
 
 enum SelectedLayout {
   BASIC = 'basic',
@@ -16,11 +17,14 @@ enum SelectedLayout {
 export const AlgebraLayout = (props: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
   const t = useText()
+  const { width } = useWindowDimensions()
 
   const algebraKeyboardGroup =
     KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.AlgebraAdvanced]
   const basicKeyboardGroup =
-    KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+    width > MAX_WIDTH_FOR_MOBILE_LAYOUT
+      ? KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+      : KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlusMobile]
 
   const KEYBOARD_GROUPS = useMemo(
     () =>
@@ -40,15 +44,17 @@ export const AlgebraLayout = (props: KeyboardLayoutProps) => {
             size={20}
           />
         ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.BASIC),
         key: '1',
       },
       {
         title: (
           <IntegralABIcon
             color={selectedLayout === SelectedLayout.ALGEBRA ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
-            size={20}
+            size={22}
           />
         ),
+        onPressIn: () => setSelectedLayout(SelectedLayout.ALGEBRA),
         key: '2',
       },
     ]
@@ -56,21 +62,20 @@ export const AlgebraLayout = (props: KeyboardLayoutProps) => {
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.BASIC : SelectedLayout.ALGEBRA)
-        }}
-      />
+      {width > MAX_WIDTH_FOR_MOBILE_LAYOUT && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.BASIC ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
       <KeysList
         keys={KEYBOARD_GROUPS.get(selectedLayout)?.keys || []}
         numOfRows={3}
@@ -78,9 +83,9 @@ export const AlgebraLayout = (props: KeyboardLayoutProps) => {
         style={{
           container: styles.keysContainer,
           option: {
-            button: styles.keyButton,
+            button: width > MAX_WIDTH_FOR_MOBILE_LAYOUT ? styles.keyButton : styles.mobileKeyButton,
             text: [styles.keyText, selectedLayout === SelectedLayout.ALGEBRA && { fontSize: 11 }],
-            ...(IS_MOBILE && { container: { flexBasis: 53, maxWidth: 53 } }),
+            container: IS_MOBILE ? { flexBasis: 53, maxWidth: 53 } : styles.keyContainer,
           },
         }}
       />
@@ -94,12 +99,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
-    width: 575,
   },
   keyButton: {
     minWidth: 43,
     maxWidth: 58,
   },
+  mobileKeyButton: {
+    width: 40,
+    paddingHorizontal: 12,
+  },
   keyText: {
     fontWeight: 700,
     fontSize: 14,
@@ -107,6 +115,10 @@ const styles = StyleSheet.create({
   keysContainer: {
     gap: 9,
   },
+  keyContainer: {
+    flexGrow: 0,
+    flexBasis: 'auto',
+  },
   optionContainer: {
     flexGrow: 0,
     flexShrink: 0,

package/src/features/keyboard/components/BasicExtendedLayout/BasicExtendedLayout.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
+import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { Locale } from '@magmamath/students-features'
+import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const BasicExtendedLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
-  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
+  const { width } = useWindowDimensions()
+  const keysGroup =
+    width > 1180
+      ? KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
+      : KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedMobile]
 
   return (
     <View style={styles.container}>
@@ -21,7 +24,7 @@ export const BasicExtendedLayout = (props: KeyboardLayoutProps) => {
           option: {
             button: styles.option,
             text: styles.text,
-            ...(IS_MOBILE && { container: IS_MOBILE && { flexBasis: 50 } }),
+            container: IS_MOBILE ? { flexBasis: 50 } : styles.optionContainer,
           },
         }}
         {...props}
@@ -41,9 +44,14 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   option: {
-    minWidth: 42,
+    width: 40,
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexBasis: 'auto',
   },
   text: {
     fontStyle: 'italic',
+    fontWeight: 700,
   },
 })

package/src/features/keyboard/components/BasicExtendedLayout/keyboardGroups.tsx

@@ -1,6 +1,8 @@
 import { MATH_BASIC_OPERATORS } from '../../types/MathKeysGroups/basicOperators'
 import { MATH_TEXT_SYMBOLS } from '../../types/MathKeysGroups/textSymbols'
 import { KeyboardGroup } from '../../types/types'
+import { MATH_SYMBOLS } from '../../types/MathKeysGroups/symbols'
+import { MATH_GEOMETRY_SYMBOLS } from '../../types/MathKeysGroups/geometry'
 
 export const MATH_ENTRY_BASIC_SW_EXTENDED: KeyboardGroup = {
   id: 'math-entry-basic-sw-extended',
@@ -24,6 +26,32 @@ export const MATH_ENTRY_BASIC_SW_EXTENDED: KeyboardGroup = {
   ],
 }
 
+export const MATH_ENTRY_BASIC_EXTENDED_MOBILE_SW: KeyboardGroup = {
+  id: 'math-entry-basic-extended-mobile-sw',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
 export const MATH_ENTRY_BASIC_US_EXTENDED: KeyboardGroup = {
   id: 'math-entry-basic-us-extended',
   keys: [
@@ -45,3 +73,29 @@ export const MATH_ENTRY_BASIC_US_EXTENDED: KeyboardGroup = {
     MATH_BASIC_OPERATORS.PERMILLE,
   ],
 }
+
+export const MATH_ENTRY_BASIC_EXTENDED_MOBILE: KeyboardGroup = {
+  id: 'math-entry-basic-extended-mobile',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}

package/src/features/keyboard/components/BasicExtendedPlusLayout/BasicExtendedPlusLayout.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
-import { useText } from '../../../../shared/translation'
+import { Locale, useText } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { Locale } from '@magmamath/students-features'
 
 export const BasicExtendedPlusLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
-  const keysGroup = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+  const { width } = useWindowDimensions()
+  const keysGroup =
+    width > 1180
+      ? KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlus]
+      : KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtendedPlusMobile]
 
   return (
     <View style={styles.container}>
@@ -19,9 +22,9 @@ export const BasicExtendedPlusLayout = (props: KeyboardLayoutProps) => {
         style={{
           container: styles.keysContainer,
           option: {
-            button: styles.option,
-            text: styles.text,
-            ...(IS_MOBILE && { container: { flexBasis: 50, maxWidth: 50 } }),
+            button: styles.optionButton,
+            text: styles.optionText,
+            ...(IS_MOBILE && { container: styles.optionContainer }),
           },
         }}
         {...props}
@@ -40,10 +43,15 @@ const styles = StyleSheet.create({
   keysContainer: {
     gap: 10,
   },
-  option: {
-    minWidth: 42,
+  optionButton: {
+    width: 42,
   },
-  text: {
+  optionContainer: {
+    flexBasis: 50,
+    maxWidth: 50,
+  },
+  optionText: {
+    fontWeight: 700,
     fontStyle: 'italic',
   },
 })

package/src/features/keyboard/components/BasicExtendedPlusLayout/keyboardGroups.tsx

@@ -36,6 +36,32 @@ export const MATH_ENTRY_BASIC_EXTENDED_PLUS: KeyboardGroup = {
   ],
 }
 
+export const MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE: KeyboardGroup = {
+  id: 'math-entry-basic-extended-plus-mobile',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.COMMA,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}
+
 export const MATH_ENTRY_BASIC_EXTENDED_PLUS_SW: KeyboardGroup = {
   id: 'math-entry-basic-extended-plus-sw',
   keys: [
@@ -48,7 +74,7 @@ export const MATH_ENTRY_BASIC_EXTENDED_PLUS_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.PLUS_MINUS,
     MATH_SYMBOLS.PI,
     MATH_GEOMETRY_SYMBOLS.RADIAN,
-    MATH_BASIC_OPERATORS.MULTIPLICATION,
+    MATH_BASIC_OPERATORS.C_DOT,
     MATH_BASIC_OPERATORS.FRACTION,
     MATH_BASIC_OPERATORS.SLASH,
     MATH_BASIC_OPERATORS.DOT,
@@ -67,3 +93,29 @@ export const MATH_ENTRY_BASIC_EXTENDED_PLUS_SW: KeyboardGroup = {
     MATH_BASIC_OPERATORS.GREATER_THAN,
   ],
 }
+
+export const MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE_SW: KeyboardGroup = {
+  id: 'math-entry-basic-extended-plus-mobile-sw',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.PARENTHESES,
+    MATH_BASIC_OPERATORS.SQUARE_POWER,
+    MATH_BASIC_OPERATORS.SQUARE_ROOT,
+    MATH_BASIC_OPERATORS.GREATER_THAN,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.FRACTION,
+    MATH_BASIC_OPERATORS.DOT,
+    MATH_BASIC_OPERATORS.NTH_POWER,
+    MATH_BASIC_OPERATORS.NTH_ROOT,
+    MATH_SYMBOLS.PI,
+    MATH_BASIC_OPERATORS.LESS_THAN,
+    MATH_TEXT_SYMBOLS.X,
+    MATH_TEXT_SYMBOLS.Y,
+    MATH_TEXT_SYMBOLS.Z,
+    MATH_SYMBOLS.THETA,
+    MATH_GEOMETRY_SYMBOLS.DEGREE,
+    MATH_GEOMETRY_SYMBOLS.RADIAN,
+  ],
+}

package/src/features/keyboard/components/BasicLayout/BasicLayout.tsx

@@ -1,14 +1,21 @@
 import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps } from '../../types/types'
 import { MATH_ENTRY_BASIC_KEYBOARD_GROUP } from './keyboardGroup'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
+import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../../constants'
 
 export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
   const keys = props.children
     ? MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys
     : MATH_ENTRY_BASIC_KEYBOARD_GROUP.keys.slice(0, -1)
+  const { width } = useWindowDimensions()
+
+  if (width <= MAX_WIDTH_FOR_MOBILE_LAYOUT && !props.children) {
+    return null
+  }
+
   return (
     <View style={styles.container}>
       <KeysList
@@ -19,6 +26,7 @@ export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
           container: styles.keysContainer,
           option: {
             button: styles.keyOption,
+            text: styles.keyText,
             ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
           },
         }}
@@ -44,4 +52,8 @@ const styles = StyleSheet.create({
   keyOption: {
     width: 42,
   },
+  keyText: {
+    fontSize: 16,
+    fontWeight: 700,
+  },
 })

package/src/features/keyboard/components/BasicLayout/TimeBasicLayout.tsx

@@ -5,7 +5,6 @@ import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { useText, Locale } from '../../../../shared/translation'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
   const t = useText()
@@ -19,7 +18,7 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
         style={{
           option: {
             text: styles.keysText,
-            ...(IS_MOBILE && { container: { flexBasis: 45, maxWidth: 45 } }),
+            container: styles.optionContainer,
           },
           container: styles.keysContainer,
         }}
@@ -31,7 +30,8 @@ export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
 
 const styles = StyleSheet.create({
   optionContainer: {
-    flex: 1,
+    flexBasis: 49,
+    maxWidth: 49,
   },
   keysContainer: {
     gap: 9,

package/src/features/keyboard/components/BasicLayout/keyboardGroup.ts

@@ -14,6 +14,18 @@ export const MATH_ENTRY_BASIC_KEYBOARD_GROUP: KeyboardGroup = {
   ],
 }
 
+export const MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP: KeyboardGroup = {
+  id: 'math-entry-basic-sw',
+  keys: [
+    MATH_BASIC_OPERATORS.ADDITION,
+    MATH_BASIC_OPERATORS.SUBTRACTION,
+    MATH_BASIC_OPERATORS.EQUALS,
+    MATH_BASIC_OPERATORS.C_DOT,
+    MATH_BASIC_OPERATORS.DIVISION,
+    MATH_BASIC_OPERATORS.DOT,
+  ],
+}
+
 export const MATH_TIME_SW_KEYBOARD_GROUP: KeyboardGroup = {
   id: 'math-entry-time-sw',
   numOfRows: 3,

package/src/features/keyboard/components/Keyboard.tsx

@@ -1,16 +1,10 @@
 import React, { useEffect, useRef } from 'react'
-import {
-  Animated,
-  Easing,
-  StyleProp,
-  StyleSheet,
-  useWindowDimensions,
-  ViewStyle,
-} from 'react-native'
+import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
 import { getLayoutByCharType, KEYBOARD_LAYOUTS } from '../constants/keyboardLayouts'
 import { KeyboardKey, KeyboardKeyValue, KeyboardType } from '../types/types'
 import { Numpad } from './Numpad/Numpad'
+import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../constants'
 
 type KeyboardProps = {
   onKeyPress: ({ katexValue, mathliveValue, isSpecialSymbol }: KeyboardKeyValue) => void
@@ -25,12 +19,12 @@ type KeyboardProps = {
 
 export const Keyboard = ({ style, characterType, visible = true, ...props }: KeyboardProps) => {
   const slideAnim = useRef(new Animated.Value(600)).current
-  const maxWidth =
-    characterType &&
-    KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].characterTypes.includes(characterType)
-      ? 1300
-      : 1180
   const { width } = useWindowDimensions()
+  const Layout = getLayoutByCharType(characterType)
+  const isBasicMobileLayout =
+    characterType &&
+    width <= MAX_WIDTH_FOR_MOBILE_LAYOUT &&
+    KEYBOARD_LAYOUTS[KeyboardType.Basic].characterTypes.includes(characterType)
 
   useEffect(() => {
     Animated.spring(slideAnim, {
@@ -43,12 +37,6 @@ export const Keyboard = ({ style, characterType, visible = true, ...props }: Key
     }).start()
   }, [visible])
 
-  if (width < 820) {
-    return null
-  }
-
-  const Layout = getLayoutByCharType(characterType)
-
   return (
     <Animated.View
       style={[
@@ -60,7 +48,7 @@ export const Keyboard = ({ style, characterType, visible = true, ...props }: Key
       ]}
     >
       <Layout {...props} />
-      {width >= maxWidth && <Numpad {...props} />}
+      <Numpad {...props} withBorder={!isBasicMobileLayout} />
     </Animated.View>
   )
 }

package/src/features/keyboard/components/KeysList/KeysList.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import { GestureResponderEvent, Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import {
   ButtonStyle,
   SelectGroup,
@@ -20,6 +20,8 @@ type KeysListProps = {
   }
 } & KeyboardLayoutProps
 
+const isIOSWeb = Platform.OS === 'web' && /iPad|iPhone|iPod/.test(navigator.userAgent)
+
 export const KeysList = ({
   keys,
   numOfRows,
@@ -33,35 +35,46 @@ export const KeysList = ({
     <SelectGroup
       style={{
         container: [styles.container, style?.container],
-        row: { gap: 4 },
+        row: styles.row,
         option: {
-          container: {
-            flexGrow: 0,
-            flexShrink: 0,
-            flexBasis: 'auto',
-          },
+          container: styles.optionContainer,
           ...style?.option,
         },
       }}
       numOfRows={numOfRows}
       color={SelectOptionColor.GREY}
       disabled={isDisabled}
-      options={keys.map((key, index) => ({
-        key: key.katexValue,
-        title: key.icon ? key.icon : key.label,
-        disabled:
-          (isSpecialButtonsDisabled && DISABLED_KEYS.includes(key)) || disabledKeys?.includes(key),
-      }))}
+      options={keys.map((key) => {
+        const pressHandler = (e: GestureResponderEvent) => {
+          onKeyPress?.({
+            event: e,
+            katexValue: key.katexValue,
+            mathliveValue: key.mathliveValue,
+            spreadsheetValue: key.spreadsheetValue,
+            isSpecialSymbol: key.isSpecialSymbol,
+          })
+        }
+
+        return {
+          key: key.katexValue,
+          title: key.icon ? key.icon : key.label,
+          delayPressIn: 0,
+          onPressIn: (e) => {
+            onKeyPress?.({
+              event: e,
+              katexValue: key.katexValue,
+              mathliveValue: key.mathliveValue,
+              spreadsheetValue: key.spreadsheetValue,
+              isSpecialSymbol: key.isSpecialSymbol,
+            })
+          },
+          ...(isIOSWeb ? { onPress: pressHandler } : { onPressIn: pressHandler }),
+          disabled:
+            (isSpecialButtonsDisabled && DISABLED_KEYS.includes(key)) ||
+            disabledKeys?.includes(key),
+        }
+      })}
       size={SelectOptionSize.SMALL}
-      onOptionChange={(option) => {
-        const key = keys.find((k) => k.katexValue === option.key)
-        if (!key) return
-        onKeyPress?.({
-          katexValue: key.katexValue,
-          mathliveValue: key.mathliveValue,
-          isSpecialSymbol: key.isSpecialSymbol,
-        })
-      }}
     />
   )
 }
@@ -71,4 +84,12 @@ const styles = StyleSheet.create({
     width: 'auto',
     gap: 9,
   },
+  row: {
+    gap: 3,
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+  },
 })

package/src/features/keyboard/components/Numpad/Numpad.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, View } from 'react-native'
-import { COLORS, SPACING } from '@magmamath/react-native-ui'
+import { COLORS, SPACING, IS_MOBILE } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { Locale, useText } from '../../../../shared/translation'
 import { getKeyboardGroup } from '../../helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const Numpad = (props: KeyboardLayoutProps) => {
+type NumpadProps = {
+  withBorder?: boolean
+} & KeyboardLayoutProps
+
+export const Numpad = ({ withBorder = true, ...props }: NumpadProps) => {
   const t = useText()
   const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, withBorder && { borderColor: COLORS.NEUTRAL_3 }]}>
       <KeysList
         keys={keyboardGroup.keys}
         numOfRows={3}
@@ -21,7 +24,7 @@ export const Numpad = (props: KeyboardLayoutProps) => {
           option: {
             text: styles.keyText,
             button: styles.keyButton,
-            ...(IS_MOBILE && { container: { flexBasis: 45 } }),
+            container: IS_MOBILE ? { flexBasis: 45 } : styles.optionContainer,
           },
         }}
         {...props}
@@ -33,8 +36,9 @@ export const Numpad = (props: KeyboardLayoutProps) => {
 const styles = StyleSheet.create({
   container: {
     borderLeftWidth: 1,
-    borderColor: COLORS.NEUTRAL_3,
+    borderColor: 'transparent',
     paddingLeft: SPACING[800],
+    marginLeft: 'auto',
   },
   keysContainer: {
     display: 'flex',
@@ -49,6 +53,10 @@ const styles = StyleSheet.create({
     fontWeight: 700,
   },
   keyButton: {
-    width: 42,
+    width: 40,
+  },
+  optionContainer: {
+    flexGrow: 0,
+    flexBasis: 'auto',
   },
 })