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

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,36 +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,
-          spreadsheetValue: key.spreadsheetValue,
-          isSpecialSymbol: key.isSpecialSymbol,
-        })
-      }}
     />
   )
 }
@@ -72,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',
   },
 })

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

@@ -1,6 +1,6 @@
 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,
   FONT_FAMILY,
@@ -25,6 +25,7 @@ import {
   MATH_ENTRY_WEIGHT_UNITS_SW_KEYBOARD_GROUPS,
 } from './keyboardGroups'
 import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keysValues'
+import { MAX_WIDTH_FOR_MOBILE_LAYOUT } from '../../constants'
 
 const UNITS_KEYBOARD_GROUPS = new Map([
   [
@@ -54,7 +55,10 @@ enum SelectedLayout {
 }
 
 export const UnitsLayout = (props: KeyboardLayoutProps) => {
-  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.ALGEBRA)
+  const { width } = useWindowDimensions()
+  const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(
+    width > MAX_WIDTH_FOR_MOBILE_LAYOUT ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS,
+  )
   const t = useText()
   const basicExtendedKeys =
     KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.BasicExtended]
@@ -100,6 +104,9 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           />
         ),
         key: '1',
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.ALGEBRA)
+        },
       },
       {
         title: (
@@ -109,28 +116,30 @@ export const UnitsLayout = (props: KeyboardLayoutProps) => {
           />
         ),
         key: '2',
+        onPressIn: () => {
+          setSelectedLayout(SelectedLayout.UNITS)
+        },
       },
     ]
   }, [activeTab, selectedLayout])
 
   return (
     <View style={styles.container}>
-      <SelectGroup
-        numOfRows={2}
-        options={selectOptions}
-        size={SelectOptionSize.SMALL}
-        style={{
-          container: styles.optionContainer,
-          option: { ...(IS_MOBILE && { container: { flexBasis: 45 } }) },
-        }}
-        color={props.color}
-        selectedOptions={[
-          selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
-        ]}
-        onOptionChange={(option) => {
-          setSelectedLayout(option.key === '1' ? SelectedLayout.ALGEBRA : SelectedLayout.UNITS)
-        }}
-      />
+      {width > MAX_WIDTH_FOR_MOBILE_LAYOUT && (
+        <SelectGroup
+          numOfRows={2}
+          options={selectOptions}
+          size={SelectOptionSize.SMALL}
+          style={{
+            container: styles.optionContainer,
+            option: { ...(IS_MOBILE && { container: { flexBasis: 45 } }) },
+          }}
+          color={props.color}
+          selectedOptions={[
+            selectedLayout === SelectedLayout.ALGEBRA ? selectOptions[0] : selectOptions[1],
+          ]}
+        />
+      )}
       {selectedLayout === SelectedLayout.UNITS ? (
         <UnitTabs
           tabs={tabs}
@@ -164,7 +173,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 16,
     paddingRight: 16,
-    width: 450,
   },
   basicExtendedContainer: {
     gap: 8,

package/src/features/keyboard/constants/keysValues.ts

@@ -4,16 +4,21 @@ import {
   MATH_CURRENCY_UK_KEYBOARD_GROUP,
   MATH_CURRENCY_US_KEYBOARD_GROUP,
   MATH_ENTRY_BASIC_KEYBOARD_GROUP,
+  MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP,
   MATH_TIME_SW_KEYBOARD_GROUP,
   MATH_TIME_US_KEYBOARD_GROUP,
 } from '../components/BasicLayout/keyboardGroup'
 import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from '../components/AlgebraLayout/keyboardGroups'
 import {
+  MATH_ENTRY_BASIC_EXTENDED_MOBILE,
+  MATH_ENTRY_BASIC_EXTENDED_MOBILE_SW,
   MATH_ENTRY_BASIC_SW_EXTENDED,
   MATH_ENTRY_BASIC_US_EXTENDED,
 } from '../components/BasicExtendedLayout/keyboardGroups'
 import {
   MATH_ENTRY_BASIC_EXTENDED_PLUS,
+  MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE,
+  MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE_SW,
   MATH_ENTRY_BASIC_EXTENDED_PLUS_SW,
 } from '../components/BasicExtendedPlusLayout/keyboardGroups'
 import {
@@ -34,7 +39,9 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
   [Locale.CA]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
     [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
+    [KeyboardType.BasicExtendedMobile]: MATH_ENTRY_BASIC_EXTENDED_MOBILE,
     [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicExtendedPlusMobile]: MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -47,7 +54,9 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
   [Locale.SCT]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
     [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
+    [KeyboardType.BasicExtendedMobile]: MATH_ENTRY_BASIC_EXTENDED_MOBILE,
     [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicExtendedPlusMobile]: MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -60,7 +69,9 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
   [Locale.GB]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
     [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
+    [KeyboardType.BasicExtendedMobile]: MATH_ENTRY_BASIC_EXTENDED_MOBILE,
     [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicExtendedPlusMobile]: MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -73,7 +84,9 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
   [Locale.EN]: {
     [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
     [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_US_EXTENDED,
+    [KeyboardType.BasicExtendedMobile]: MATH_ENTRY_BASIC_EXTENDED_MOBILE,
     [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS,
+    [KeyboardType.BasicExtendedPlusMobile]: MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],
@@ -84,9 +97,11 @@ export const KEYBOARD_GROUPS_BY_LOCALE: Record<Locale, Record<KeyboardType, Keyb
     [KeyboardType.Numpad]: MATH_ENTRY_NUMBERS_US_KEYBOARD_GROUP,
   },
   [Locale.SW]: {
-    [KeyboardType.Basic]: MATH_ENTRY_BASIC_KEYBOARD_GROUP,
+    [KeyboardType.Basic]: MATH_ENTRY_BASIC_SW_KEYBOARD_GROUP,
     [KeyboardType.BasicExtended]: MATH_ENTRY_BASIC_SW_EXTENDED,
+    [KeyboardType.BasicExtendedMobile]: MATH_ENTRY_BASIC_EXTENDED_MOBILE_SW,
     [KeyboardType.BasicExtendedPlus]: MATH_ENTRY_BASIC_EXTENDED_PLUS_SW,
+    [KeyboardType.BasicExtendedPlusMobile]: MATH_ENTRY_BASIC_EXTENDED_PLUS_MOBILE_SW,
     [KeyboardType.BasicUnits]: {
       ...MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS,
       keys: MATH_ENTRY_LENGTH_UNITS_US_KEYBOARD_GROUPS.keys[0],

package/src/features/keyboard/constants.ts

@@ -4,3 +4,5 @@ export const DEFAULT_KEY_ICON_PROPS = {
   size: 16,
   color: COLORS.NEUTRAL_9,
 } as const
+
+export const MAX_WIDTH_FOR_MOBILE_LAYOUT = 1180

package/src/features/keyboard/types/MathKeysGroups/textSymbols.tsx

@@ -20,47 +20,47 @@ export enum MathTextSymbol {
 export const MATH_TEXT_SYMBOLS: MathKeysGroup<typeof MathTextSymbol> = {
   [MathTextSymbol.A]: {
     label: 'a',
-    mathliveValue: '$a$',
+    mathliveValue: 'a',
     katexValue: 'a',
   },
   [MathTextSymbol.B]: {
     label: 'b',
-    mathliveValue: '$b$',
+    mathliveValue: 'b',
     katexValue: 'b',
   },
   [MathTextSymbol.C]: {
     label: 'c',
-    mathliveValue: '$c$',
+    mathliveValue: 'c',
     katexValue: 'c',
   },
   [MathTextSymbol.F]: {
     label: 'f',
-    mathliveValue: '$f$',
+    mathliveValue: 'f',
     katexValue: 'f',
   },
   [MathTextSymbol.G]: {
     label: 'g',
-    mathliveValue: '$g$',
+    mathliveValue: 'g',
     katexValue: 'g',
   },
   [MathTextSymbol.H]: {
     label: 'h',
-    mathliveValue: '$h$',
+    mathliveValue: 'h',
     katexValue: 'h',
   },
   [MathTextSymbol.X]: {
     icon: <XIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$x$',
+    mathliveValue: 'x',
     katexValue: 'x',
   },
   [MathTextSymbol.Y]: {
     icon: <YIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$y$',
+    mathliveValue: 'y',
     katexValue: 'y',
   },
   [MathTextSymbol.Z]: {
     icon: <ZIcon {...DEFAULT_KEY_ICON_PROPS} />,
-    mathliveValue: '$z$',
+    mathliveValue: 'z',
     katexValue: 'z',
   },
 }

package/src/features/keyboard/types/types.ts

@@ -1,14 +1,17 @@
 import { ReactNode } from 'react'
 import { SelectOptionColor } from '@magmamath/react-native-ui'
+import { GestureResponderEvent } from 'react-native'
 
 export const enum KeyboardType {
   AlgebraAdvanced = 'AlgebraAdvanced',
   Basic = 'Basic',
   BasicExtended = 'BasicExtended',
+  BasicExtendedMobile = 'BasicExtendedMobile',
   BasicTime = 'BasicTime',
   BasicCurrency = 'BasicCurrency',
   BasicUnits = 'BasicUnits',
   BasicExtendedPlus = 'BasicExtendedPlus',
+  BasicExtendedPlusMobile = 'BasicExtendedPlusMobile',
   Numpad = 'Numpad',
 }
 
@@ -22,6 +25,7 @@ export type KeyboardKey = {
 }
 
 export type KeyboardKeyValue = {
+  event: GestureResponderEvent
   katexValue: string
   mathliveValue?: string
   isSpecialSymbol?: boolean