@magmamath/students-features 1.1.2 → 1.2.0-rc-0000

package/src/features/endOfAssignment/components/CorrectAnswer/AnimatedCard.tsx

@@ -8,7 +8,6 @@ import Animated, {
   withTiming,
   withDelay,
   interpolate,
-  interpolateColor,
   runOnUI,
   runOnJS,
 } from 'react-native-reanimated'
@@ -67,16 +66,6 @@ export const AnimatedCard = memo(
     const starOffsetLeft = gbdAmount > 9 ? 70 : 55
 
     const animatedCardStyle = useAnimatedStyle(() => {
-      const progress = interpolate(
-        statsOpacity.value,
-        [OPACITY.initial, OPACITY.final],
-        [OPACITY.initial, OPACITY.final],
-      )
-      const backgroundColor = interpolateColor(
-        progress,
-        [OPACITY.initial, OPACITY.final],
-        [VARIANT_COLORS[variant].initial, VARIANT_COLORS[variant].final],
-      )
       const height = interpolate(
         cardWidth.value,
         [CARD_DIMENSIONS.initialWidth, CARD_DIMENSIONS.finalWidth],
@@ -86,9 +75,16 @@ export const AnimatedCard = memo(
         opacity: cardOpacity.value,
         width: cardWidth.value,
         height,
-        backgroundColor,
+        backgroundColor: VARIANT_COLORS[variant].initial,
       }
-    }, [statsOpacity, cardOpacity, cardWidth])
+    }, [variant, cardOpacity, cardWidth])
+
+    const animatedStatsStyle = useAnimatedStyle(
+      () => ({
+        opacity: statsOpacity.value,
+      }),
+      [statsOpacity],
+    )
 
     const animatedBadgeStyle = useAnimatedStyle(
       () => ({
@@ -101,24 +97,16 @@ export const AnimatedCard = memo(
       [badgeTranslateX, badgeRotation, badgeScale],
     )
 
-    const animatedStatsStyle = useAnimatedStyle(() => {
-      return {
-        opacity: statsOpacity.value,
-      }
-    }, [statsOpacity])
-
     const statsSubtitle = (() => {
       if (variant === AnimatedCardVariant.CORRECT_ANSWER) {
-        if (solvedAmount > 1) {
-          return textContent.stats?.correctAnswersPlural
-        }
-        return textContent.stats?.correctAnswers
-      } else {
-        if (gbdAmount > 1) {
-          return textContent.stats?.goodCalculationsPlural
-        }
-        return textContent.stats?.goodCalculations
+        return solvedAmount > 1
+          ? textContent.stats?.correctAnswersPlural
+          : textContent.stats?.correctAnswers
       }
+
+      return gbdAmount > 1
+        ? textContent.stats?.goodCalculationsPlural
+        : textContent.stats?.goodCalculations
     })()
 
     const runCelebration = () => {
@@ -182,6 +170,13 @@ export const AnimatedCard = memo(
         <Celebrations modelRef={celebrationsRef} style={styles.celebrations} />
 
         <Animated.View style={[styles.card, animatedCardStyle]}>
+          <Animated.View
+            style={[
+              styles.colorOverlay,
+              { backgroundColor: VARIANT_COLORS[variant].final },
+              animatedStatsStyle,
+            ]}
+          />
           <Animated.View style={styles.cardContent}>
             <Animated.View style={[styles.badgeContainer, animatedBadgeStyle]}>
               <EOABadge
@@ -237,6 +232,10 @@ const styles = StyleSheet.create({
   card: {
     padding: SPACING[200],
     borderRadius: SPACING[400],
+    overflow: 'hidden',
+  },
+  colorOverlay: {
+    ...StyleSheet.absoluteFillObject,
   },
   cardContent: {
     flex: 1,

package/src/features/endOfAssignment/components/CorrectAnswer/CorrectAnswerSparks.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import { Spark } from './Spark'
@@ -15,7 +15,7 @@ const CA_SPARKS_MAP = [
   { id: '3', x: 268, y: 44, size: 28, initialDelay: SPARKS_ANIMATION_DELAY * 1.4 },
 ]
 
-export const CorrectAnswerSparks = ({ color, shouldStartAnimation }: CorrectAnswerProps) => {
+export const CorrectAnswerSparks = memo(({ color, shouldStartAnimation }: CorrectAnswerProps) => {
   if (!shouldStartAnimation) {
     return null
   }
@@ -27,7 +27,7 @@ export const CorrectAnswerSparks = ({ color, shouldStartAnimation }: CorrectAnsw
       ))}
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

package/src/features/endOfAssignment/components/CorrectAnswer/GoodDrawingSparks.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Spark } from './Spark'
 import { SPARKS_ANIMATION_DELAY } from '../../constants'
@@ -16,7 +16,7 @@ type GoodDrawingSparksProps = {
   color: string
 }
 
-export const GoodDrawingSparks = ({ color, shouldStartAnimation }: GoodDrawingSparksProps) => {
+export const GoodDrawingSparks = memo(({ color, shouldStartAnimation }: GoodDrawingSparksProps) => {
   if (!shouldStartAnimation) {
     return null
   }
@@ -28,7 +28,7 @@ export const GoodDrawingSparks = ({ color, shouldStartAnimation }: GoodDrawingSp
       ))}
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

package/src/features/endOfAssignment/components/CorrectAnswer/Spark.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { COLORS } from '@magmamath/react-native-ui'
 import { SparkIcon } from '../../ui/SparkIcon'
 import { useSparkAnimation } from '../../hooks/useSparkAnimation'
@@ -25,21 +25,23 @@ const SPARKS_SPRING_CONFIG = {
 const HOLD_DELAY = 800
 const ROTATION_ANGLE = 90
 
-export const Spark = ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
-  const { animatedStyle } = useSparkAnimation({
-    id,
-    initialDelay,
-    rotationAngle: ROTATION_ANGLE,
-    holdDelay: HOLD_DELAY,
-    springConfig: SPARKS_SPRING_CONFIG,
-    x,
-    y,
-    size,
-  })
+export const Spark = memo(
+  ({ id, x, y, size, initialDelay = 350, color = COLORS.GREEN_3 }: SparkProps) => {
+    const { staticStyle, animatedStyle } = useSparkAnimation({
+      id,
+      initialDelay,
+      rotationAngle: ROTATION_ANGLE,
+      holdDelay: HOLD_DELAY,
+      springConfig: SPARKS_SPRING_CONFIG,
+      x,
+      y,
+      size,
+    })
 
-  return (
-    <Animated.View style={animatedStyle}>
-      <SparkIcon size={size} color={color} />
-    </Animated.View>
-  )
-}
+    return (
+      <Animated.View style={[staticStyle, animatedStyle]}>
+        <SparkIcon size={size} color={color} />
+      </Animated.View>
+    )
+  },
+)

package/src/features/endOfAssignment/constants.ts

@@ -11,7 +11,10 @@ export const MODALS_WITH_BACKGROUND = [
   EOAModalVariant.EXAM_FINISHED_HAS_CORRECT_ANSWERS,
 ]
 
-export const VARIANT_COLORS: Record<AnimatedCardVariant, { initial: string; final: string; primary: string }> = {
+export const VARIANT_COLORS: Record<
+  AnimatedCardVariant,
+  { initial: string; final: string; primary: string }
+> = {
   [AnimatedCardVariant.CORRECT_ANSWER]: {
     initial: COLORS.GREEN_2,
     final: COLORS.GREEN_4,
@@ -26,7 +29,7 @@ export const VARIANT_COLORS: Record<AnimatedCardVariant, { initial: string; fina
 
 export const ANIMATION_DELAYS = {
   step3: 500,
-  celebrations: 140
+  celebrations: 140,
 }
 
 export const CARD_DIMENSIONS = {
@@ -49,5 +52,5 @@ export const BADGE_PARAMS = {
   initialScale: 0.5,
 }
 
-export const SPRING_CONFIG = { stiffness: 241, damping: 18, mass: 0.75 }
-export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 15, mass: 0.75 }
+export const SPRING_CONFIG = { stiffness: 241, damping: 20, mass: 0.75 }
+export const SPRING_CONFIG_STEP_3 = { stiffness: 168.8, damping: 17, mass: 0.75 }

package/src/features/endOfAssignment/hooks/useSparkAnimation.tsx

@@ -1,13 +1,12 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import {
   useSharedValue,
   withDelay,
   withRepeat,
   withSequence,
   withSpring,
-  useAnimatedReaction,
   useAnimatedStyle,
-  interpolate,
+  cancelAnimation,
 } from 'react-native-reanimated'
 import { SpringConfig } from 'react-native-reanimated/lib/typescript/animation/springUtils'
 
@@ -22,6 +21,9 @@ type UseSparkAnimationProps = {
   size: number
 }
 
+const FADE_OUT_THRESHOLD = 1
+const CYCLE_RESET_THRESHOLD = 0.1
+
 export const useSparkAnimation = ({
   id,
   initialDelay,
@@ -33,20 +35,44 @@ export const useSparkAnimation = ({
   size,
 }: UseSparkAnimationProps) => {
   const progress = useSharedValue(0)
-  const rotation = useSharedValue(0)
+  const prevProgress = useSharedValue(0)
+  const isFadingOut = useSharedValue(false)
+
+  const signedAngle = (id === '2' ? -1 : 1) * rotationAngle
 
-  useAnimatedReaction(
-    () => progress.value,
-    (current, previous) => {
-      if (typeof previous === 'number' && current < previous * 0.95) {
-        rotation.value = id === '2' ? -rotationAngle : rotationAngle
-      } else {
-        rotation.value = current * (id === '2' ? -rotationAngle : rotationAngle)
-      }
-    },
-    [rotation, progress],
+  const staticStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      top: y,
+      left: x,
+      width: size,
+      height: size,
+      zIndex: 10,
+    }),
+    [x, y, size],
   )
 
+  const animatedStyle = useAnimatedStyle(() => {
+    const p = progress.value
+    const passedPeak = prevProgress.value >= FADE_OUT_THRESHOLD && p < FADE_OUT_THRESHOLD
+    const newCycleStarted = p < CYCLE_RESET_THRESHOLD
+
+    if (passedPeak) {
+      isFadingOut.value = true
+    } else if (newCycleStarted) {
+      isFadingOut.value = false
+    }
+    prevProgress.value = p
+
+    // When fading out, lock rotation at full angle so the star doesn't spin back
+    const rotation = isFadingOut.value ? signedAngle : p * signedAngle
+
+    return {
+      opacity: p,
+      transform: [{ rotate: `${rotation}deg` }],
+    }
+  }, [progress])
+
   useEffect(() => {
     progress.value = withDelay(
       initialDelay,
@@ -58,21 +84,9 @@ export const useSparkAnimation = ({
         -1,
       ),
     )
-  }, [])
 
-  const animatedStyle = useAnimatedStyle(() => {
-    const opacity = interpolate(progress.value, [0, 1], [0, 1])
-    return {
-      position: 'absolute',
-      top: y,
-      left: x,
-      width: size,
-      height: size,
-      opacity,
-      transform: [{ rotate: `${rotation.value}deg` }],
-      zIndex: 10,
-    }
-  }, [progress, rotation])
+    return () => cancelAnimation(progress)
+  }, [])
 
-  return { animatedStyle }
+  return { staticStyle, animatedStyle }
 }

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

@@ -2,26 +2,23 @@ import React, { useMemo, useState } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { COLORS, IS_MOBILE, SelectGroup, SelectOptionSize } from '@magmamath/react-native-ui'
-import { Locale, useText } from '../../../../shared/translation'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
 import { SelectedLayout } from './types'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { getSelectOptions } from './helpers'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
-export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps) => {
+export const AlgebraLayout = ({ onLayoutChange, keys, ...props }: KeyboardLayoutProps) => {
   const [selectedLayout, setSelectedLayout] = useState<SelectedLayout>(SelectedLayout.BASIC)
-  const t = useText()
   const { width } = useWindowDimensions()
   const selectOptions = getSelectOptions({ selectedLayout, setSelectedLayout, onLayoutChange })
   const isDesktop =
     width > KEYBOARD_LAYOUTS[KeyboardType.AlgebraAdvanced].mobileBreakpoint && !IS_MOBILE
-  const locale = t('locale') as Locale
 
   const keyboardGroups = useMemo(() => {
-    const algebra = getKeyboardGroup(locale, KeyboardType.AlgebraAdvanced)
-    const basic = getKeyboardGroup(
-      locale,
+    const algebra = getMainKeyboardGroup(keys, KeyboardType.AlgebraAdvanced)
+    const basic = getMainKeyboardGroup(
+      keys,
       isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
     )
 
@@ -29,7 +26,7 @@ export const AlgebraLayout = ({ onLayoutChange, ...props }: KeyboardLayoutProps)
       [SelectedLayout.BASIC, basic],
       [SelectedLayout.ALGEBRA, algebra],
     ])
-  }, [locale, isDesktop])
+  }, [isDesktop, keys])
 
   const currentKeys = keyboardGroups.get(selectedLayout)?.keys ?? []
 

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { COLORS } from '@magmamath/react-native-ui'
 import { AlgebraIcon } from '../../../../shared/icons/AlgebraIcon'
-import { IntegralABIcon } from '../../../../shared/icons/keyboard/IntegralABIcon/IntegralABIcon'
+import { IntegralABIcon } from '../../../../shared/icons/IntegralABIcon'
 import { SelectedLayout } from './types'
 
 type LayoutOption = {

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

@@ -2,15 +2,14 @@ import React, { PropsWithChildren } from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { KEYBOARD_GROUPS_BY_LOCALE } from '../../constants/keyboardGroupsByLocale'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
+import { getMainKeyboardGroup } from '../../helpers'
+
+export const BasicLayout = ({ keys, ...props }: KeyboardLayoutProps & PropsWithChildren) => {
+  const keysByLocale = getMainKeyboardGroup(keys, KeyboardType.Basic)
+  const keysToShow = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
 
-export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
-  const t = useText()
-  const keysByLocale = KEYBOARD_GROUPS_BY_LOCALE[t('locale') as Locale][KeyboardType.Basic]
-  const keys = props.children ? keysByLocale.keys : keysByLocale.keys.slice(0, -1)
   const { width } = useWindowDimensions()
   const isMobile = width <= KEYBOARD_LAYOUTS[KeyboardType.Basic].mobileBreakpoint || IS_MOBILE
 
@@ -20,7 +19,7 @@ export const BasicLayout = (props: KeyboardLayoutProps & PropsWithChildren) => {
 
   return (
     <View style={styles.container}>
-      <KeysList keys={keys} numOfRows={2} {...props} />
+      <KeysList keys={keysToShow} numOfRows={2} {...props} />
       {props.children || null}
     </View>
   )

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

@@ -2,15 +2,13 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 
-export const CurrencyBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicCurrency)
+export const CurrencyBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicCurrency)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList keys={keysGroup.keys} numOfRows={keysGroup.keys.length} {...props} />
     </BasicLayout>
   )

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

@@ -3,16 +3,14 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet } from 'react-native'
 import { BasicLayout } from './BasicLayout'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { useText, Locale } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const TimeBasicLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.BasicTime)
+export const TimeBasicLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.BasicTime)
 
   return (
-    <BasicLayout {...props}>
+    <BasicLayout keys={keys} {...props}>
       <KeysList
         keys={keysGroup.keys}
         numOfRows={keysGroup.numOfRows || keysGroup.keys.length}

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

@@ -2,18 +2,16 @@ import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
-import { MOBILE_LAYOUT_WIDTH } from '../../constants/constants'
+import { getMainKeyboardGroup } from '../../helpers'
+import { MOBILE_LAYOUT_WIDTH } from '../../constants/keyboard.constants'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 
-export const BasicPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
-  const locale = t('locale') as Locale
+export const BasicPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
   const isMobile = width <= MOBILE_LAYOUT_WIDTH || IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isMobile ? KeyboardType.BasicPlusMobile : KeyboardType.BasicPlus,
   )
 

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

@@ -2,19 +2,18 @@ import React from 'react'
 import { StyleSheet, useWindowDimensions, View } from 'react-native'
 import { KeysList } from '../KeysList/KeysList'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { getMainKeyboardGroup } from '../../helpers'
 import { IS_MOBILE } from '@magmamath/react-native-ui'
 import { KEYBOARD_LAYOUTS } from '../../constants/keyboardLayouts'
 
-export const BasicPlusPlusLayout = (props: KeyboardLayoutProps) => {
-  const t = useText()
+export const BasicPlusPlusLayout = ({ keys, ...props }: KeyboardLayoutProps) => {
   const { width } = useWindowDimensions()
-  const locale = t('locale') as Locale
+
   const isDesktop =
     width > KEYBOARD_LAYOUTS[KeyboardType.BasicPlusPlus].mobileBreakpoint && !IS_MOBILE
-  const keysGroup = getKeyboardGroup(
-    locale,
+
+  const keysGroup = getMainKeyboardGroup(
+    keys,
     isDesktop ? KeyboardType.BasicPlusPlus : KeyboardType.BasicPlusPlusMobile,
   )
 

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, StyleSheet, useWindowDimensions, ViewStyle } from 'react-native'
 import { COLORS, IS_MOBILE, IS_WEB, SelectOptionColor, SHADOWS } from '@magmamath/react-native-ui'
-import { KeyboardKey, KeyboardKeyValue } from '../types'
 import { Numpad } from './Numpad/Numpad'
 import { MainLayout } from './MainLayout/MainLayout'
 import {
@@ -10,9 +9,13 @@ import {
   slideInAnimationSettings,
 } from './MainLayout/constants'
 import { isMobileWidth } from '../helpers'
+import { KeyboardConfig } from '@magmamath/frontend-config'
+import { KeyboardKey, KeyboardKeyValue } from '../types/types'
+import { resolveKeyboard } from '../constants/keyboard.helpers'
 
 type KeyboardProps = {
   onKeyPress: (key: KeyboardKeyValue) => void
+  keys: KeyboardConfig
   characterType?: number
   style?: StyleProp<ViewStyle>
   color?: SelectOptionColor
@@ -28,6 +31,7 @@ export const Keyboard = ({
   isMainLayoutDisabled,
   ...props
 }: KeyboardProps) => {
+  const resolvedKeys = useMemo(() => resolveKeyboard(props.keys), [props.keys])
   const slideAnim = useRef(new Animated.Value(KEYBOARD_SLIDE_DISTANCE)).current
 
   const { width } = useWindowDimensions()
@@ -62,10 +66,11 @@ export const Keyboard = ({
     >
       <MainLayout
         {...props}
+        keys={resolvedKeys}
         isDisabled={isMainLayoutDisabled || props.isDisabled}
         characterType={characterType}
       />
-      <Numpad {...props} style={mobileStyles} />
+      <Numpad {...props} keys={resolvedKeys} style={mobileStyles} />
     </Animated.View>
   )
 }

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

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import {
   ButtonStyle,
+  IS_MOBILE,
   SelectGroup,
   SelectOptionColor,
   SelectOptionSize,
 } from '@magmamath/react-native-ui'
 import { KeyboardKey, KeyboardLayoutProps } from '../../types/types'
 import { mapKeyToOption } from './helpers'
-import { IS_MOBILE } from '@magmamath/react-native-ui'
 
 type KeysListProps = {
   keys: KeyboardKey[]
@@ -18,7 +18,7 @@ type KeysListProps = {
   style?: {
     option?: ButtonStyle
   }
-} & KeyboardLayoutProps
+} & Omit<KeyboardLayoutProps, 'keys'>
 
 export const KeysList = ({
   keys,

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
-import { SelectOptionColor, IS_MOBILE, IS_WEB } from '@magmamath/react-native-ui'
+import { IS_MOBILE, IS_WEB, SelectOptionColor } from '@magmamath/react-native-ui'
 import { getLayoutByCharType, isBasicPlusPlusLayout } from '../../constants/keyboardLayouts'
-import { KeyboardKey, KeyboardKeyValue } from '../../types/types'
 import { UnderlinedLayout } from '../UnderlinedLayout/UnderlinedLayout'
+import { KeyboardKey, KeyboardKeyValue, ResolvedKeyboard } from '../../types/types'
 
 type LayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   characterType?: number
   color?: SelectOptionColor

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

@@ -3,16 +3,16 @@ import { KeysList } from '../KeysList/KeysList'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { SPACING } from '@magmamath/react-native-ui'
 import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { useText } from '../../../../shared/translation'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type NumpadProps = {
   style?: StyleProp<ViewStyle>
 } & KeyboardLayoutProps
 
-export const Numpad = ({ style, ...props }: NumpadProps) => {
+export const Numpad = ({ style, keys, ...props }: NumpadProps) => {
   const t = useText()
-  const keyboardGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Numpad)
+  const keyboardGroup = getMainKeyboardGroup(keys, KeyboardType.Numpad)
 
   return (
     <View style={[styles.container, style]}>

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

@@ -1,17 +1,18 @@
 import React from 'react'
 import { KeysList } from '../KeysList/KeysList'
-import { KeyboardLayoutProps, KeyboardType } from '../../types/types'
-import { Locale, useText } from '../../../../shared/translation'
-import { getKeyboardGroup } from '../../helpers'
+import { KeyboardLayoutProps, KeyboardType, ResolvedKeyboard } from '../../types/types'
+import { getMainKeyboardGroup } from '../../helpers'
 
 type UnderlinedLayoutProps = {
+  keys: ResolvedKeyboard
   showSlashKey?: boolean
 } & KeyboardLayoutProps
 
-export const UnderlinedLayout = (props: UnderlinedLayoutProps) => {
-  const t = useText()
-  const keysGroup = getKeyboardGroup(t('locale') as Locale, KeyboardType.Underlined)
-  const keys = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
+export const UnderlinedLayout = ({ keys, ...props }: UnderlinedLayoutProps) => {
+  const keysGroup = getMainKeyboardGroup(keys, KeyboardType.Underlined)
+  const keysToShow = props.showSlashKey ? keysGroup.keys : keysGroup.keys.slice(0, -1)
 
-  return <KeysList keys={keys} numOfRows={props.showSlashKey ? 2 : keys.length} {...props} />
+  return (
+    <KeysList keys={keysToShow} numOfRows={props.showSlashKey ? 2 : keysToShow.length} {...props} />
+  )
 }