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

package/src/features/keyboard/constants/keys/units.constants.tsx

@@ -0,0 +1,464 @@
+import React from 'react'
+import { DEFAULT_KEY_ICON_PROPS, KEYBOARD_STYLE_PRESETS } from '../keyboard.constants'
+import { MathOperatorsGroup } from '../../types/types'
+import { KroneIcon } from '../../../../shared/icons/keyboard/KroneIcon'
+import { DollarIcon } from '../../../../shared/icons/keyboard/DollarIcon'
+import { EuroIcon } from '../../../../shared/icons/keyboard/EuroIcon'
+import { PoundIcon } from '../../../../shared/icons/keyboard/PoundIcon'
+import { YenIcon } from '../../../../shared/icons/keyboard/YenIcon'
+import { PesoIcon } from '../../../../shared/icons/keyboard/PesoIcon'
+import { CentIcon } from '../../../../shared/icons/keyboard/CentIcon'
+
+export const MATH_CURRENCY_UNITS: MathOperatorsGroup = {
+  KRONE: {
+    icon: <KroneIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: 'Kr',
+    katexValue: 'Kr',
+  },
+  DOLLAR: {
+    icon: <DollarIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '\\$',
+    katexValue: '\$',
+    mathQuillValue: '\\$',
+  },
+  EURO: {
+    icon: <EuroIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '€',
+    katexValue: '€',
+  },
+  POUND: {
+    icon: <PoundIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '£',
+    katexValue: '£',
+  },
+  YEN: {
+    icon: <YenIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '¥',
+    katexValue: '¥',
+  },
+  PESO: {
+    icon: <PesoIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: 'p',
+    katexValue: 'p',
+  },
+  CENT: {
+    icon: <CentIcon {...DEFAULT_KEY_ICON_PROPS} />,
+    mathliveValue: '¢',
+    katexValue: '¢',
+  },
+} as const
+
+export const MATH_LENGTH_UNITS: MathOperatorsGroup = {
+  KILOMETER: {
+    label: 'km',
+    mathliveValue: 'km',
+    katexValue: 'km',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  METER: {
+    label: 'm',
+    mathliveValue: '\\mathrm{m}',
+    katexValue: 'm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  DECIMETER: {
+    label: 'dm',
+    mathliveValue: '\\mathrm{dm}',
+    katexValue: 'dm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  CENTIMETER: {
+    label: 'cm',
+    mathliveValue: '\\mathrm{cm}',
+    katexValue: 'cm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  MILLIMETER: {
+    label: 'mm',
+    mathliveValue: '\\mathrm{mm}',
+    katexValue: 'mm',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HECTARE: {
+    label: 'ha',
+    mathliveValue: '\\mathrm{ha}',
+    katexValue: 'ha',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  INCH: {
+    label: 'in',
+    mathliveValue: '\\mathrm{in}',
+    katexValue: 'in',
+    mathQuillValue: '\\in',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  FOOT: {
+    label: 'ft',
+    mathliveValue: '\\mathrm{ft}',
+    katexValue: 'ft',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  YARD: {
+    label: 'yd',
+    mathliveValue: '\\mathrm{yd}',
+    katexValue: 'yd',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  YARDS: {
+    label: 'yds',
+    mathliveValue: '\\mathrm{yds}',
+    katexValue: 'yds',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILE: {
+    label: 'mi',
+    mathliveValue: '\\mathrm{mi}',
+    katexValue: 'mi',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILE_SE: {
+    label: 'mil',
+    mathliveValue: '\\mathrm{mil}',
+    katexValue: 'mil',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+} as const
+
+export const MATH_AREA_UNITS: MathOperatorsGroup = {
+  SQUARE_KILOMETER: {
+    label: 'km²',
+    mathliveValue: '\\mathrm{km}^2',
+    katexValue: 'km^2',
+    mathQuillValue: 'km^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_METER: {
+    label: 'm²',
+    mathliveValue: '\\mathrm{m}^2',
+    katexValue: 'm^2',
+    mathQuillValue: 'm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  SQUARE_DECIMETER: {
+    label: 'dm²',
+    mathliveValue: '\\mathrm{dm}^2',
+    katexValue: 'dm^2',
+    mathQuillValue: 'dm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_CENTIMETER: {
+    label: 'cm²',
+    mathliveValue: '\\mathrm{cm}^2',
+    katexValue: 'cm^2',
+    mathQuillValue: 'cm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_MILLIMETER: {
+    label: 'mm²',
+    mathliveValue: '\\mathrm{mm}^2',
+    katexValue: 'mm^2',
+    mathQuillValue: 'mm^{2}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  SQUARE_INCH: {
+    label: 'in²',
+    mathliveValue: '\\mathrm{in}^2',
+    katexValue: 'in^2',
+    mathQuillValue: 'in^{2}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  SQUARE_FOOT: {
+    label: 'ft²',
+    mathliveValue: '\\mathrm{ft}^2',
+    katexValue: 'ft^2',
+    mathQuillValue: 'ft^{2}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  SQUARE_MILE: {
+    label: 'mi²',
+    mathliveValue: '\\mathrm{mi}^2',
+    katexValue: 'mi^2',
+    mathQuillValue: 'mi^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  SQUARE_YARD: {
+    label: 'yd²',
+    mathliveValue: '\\mathrm{yd}^2',
+    katexValue: 'yd^2',
+    mathQuillValue: 'yd^{2}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HECTARE: {
+    label: 'ha',
+    mathliveValue: '\\mathrm{ha}',
+    katexValue: 'ha',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+} as const
+
+export const MATH_VOLUME_UNITS = {
+  CUBIC_KILOMETER: {
+    label: 'km³',
+    mathliveValue: '\\mathrm{km}^3',
+    katexValue: 'km^3',
+    mathQuillValue: 'km^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_METER: {
+    label: 'm³',
+    mathliveValue: '\\mathrm{m}^3',
+    katexValue: 'm^3',
+    mathQuillValue: 'm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_DECIMETER: {
+    label: 'dm³',
+    mathliveValue: '\\mathrm{dm}^3',
+    katexValue: 'dm^3',
+    mathQuillValue: 'dm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_CENTIMETER: {
+    label: 'cm³',
+    mathliveValue: '\\mathrm{cm}^3',
+    katexValue: 'cm^3',
+    mathQuillValue: 'cm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_MILLIMETER: {
+    label: 'mm³',
+    mathliveValue: '\\mathrm{mm}^3',
+    katexValue: 'mm^3',
+    mathQuillValue: 'mm^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_INCH: {
+    label: 'in³',
+    mathliveValue: '\\mathrm{in}^3',
+    katexValue: 'in^3',
+    mathQuillValue: 'in^{3}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUBIC_FOOT: {
+    label: 'ft³',
+    mathliveValue: '\\mathrm{ft}^3',
+    katexValue: 'ft^3',
+    mathQuillValue: 'ft^{3}',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUBIC_MILE: {
+    label: 'mi³',
+    mathliveValue: '\\mathrm{mi}^3',
+    katexValue: 'mi^3',
+    mathQuillValue: 'mi^{3}',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  CUBIC_YARD: {
+    label: 'yd³',
+    mathliveValue: '\\mathrm{yd}^3',
+    katexValue: 'yd^3',
+    mathQuillValue: 'yd^{3}',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  MILLILITER: {
+    label: 'ml',
+    mathliveValue: '\\mathrm{mL}',
+    katexValue: 'ml',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  LITER: {
+    label: 'L',
+    mathliveValue: '\\mathrm{L}',
+    katexValue: 'L',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MILLILITER_SE: {
+    label: 'ml',
+    mathliveValue: '\\mathrm{ml}',
+    katexValue: 'ml',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  LITER_SE: {
+    label: 'l',
+    mathliveValue: '\\mathrm{l}',
+    katexValue: 'l',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  DL: {
+    label: 'dl',
+    mathliveValue: '\\mathrm{dl}',
+    katexValue: 'dl',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  CUP: {
+    label: 'cup',
+    mathliveValue: '\\mathrm{cup}',
+    katexValue: 'cup',
+    mathQuillValue: '\\cup',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  GAL: {
+    label: 'gal',
+    mathliveValue: '\\mathrm{gal}',
+    katexValue: 'gal',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  PINT: {
+    label: 'pt',
+    mathliveValue: '\\mathrm{pt}',
+    katexValue: 'pt',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  QUART: {
+    label: 'qt',
+    mathliveValue: '\\mathrm{qt}',
+    katexValue: 'qt',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  FLOZ: {
+    label: 'floz',
+    mathliveValue: '\\mathrm{floz}',
+    katexValue: 'floz',
+    style: KEYBOARD_STYLE_PRESETS.XL,
+  },
+  CL: {
+    label: 'cl',
+    mathliveValue: '\\mathrm{cl}',
+    katexValue: 'cl',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+} as const
+
+export const MATH_WEIGHT_UNITS: MathOperatorsGroup = {
+  KG: {
+    label: 'kg',
+    mathliveValue: '\\mathrm{kg}',
+    katexValue: 'kg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  G: {
+    label: 'g',
+    mathliveValue: '\\mathrm{g}',
+    katexValue: 'g',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  MG: {
+    label: 'mg',
+    mathliveValue: '\\mathrm{mg}',
+    katexValue: 'mg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  TON_SE: {
+    label: 'ton',
+    mathliveValue: '\\mathrm{ton}',
+    katexValue: 'ton',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  TON: {
+    label: 'T',
+    mathliveValue: '\\mathrm{T}',
+    katexValue: 'T',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  LB: {
+    label: 'lb',
+    mathliveValue: '\\mathrm{lb}',
+    katexValue: 'lb',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  OZ: {
+    label: 'oz',
+    mathliveValue: '\\mathrm{oz}',
+    katexValue: 'oz',
+    style: KEYBOARD_STYLE_PRESETS.SMALL,
+  },
+  GAL: {
+    label: 'gal',
+    mathliveValue: '\\mathrm{gal}',
+    katexValue: 'gal',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  HG: {
+    label: 'hg',
+    mathliveValue: '\\mathrm{hg}',
+    katexValue: 'hg',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+  T: {
+    label: 't',
+    mathliveValue: '\\mathrm{t}',
+    katexValue: 't',
+    style: KEYBOARD_STYLE_PRESETS.MEDIUM,
+  },
+} as const
+
+export const MATH_TIME_UNITS: MathOperatorsGroup = {
+  S: {
+    label: 's',
+    mathliveValue: '\\mathrm{s}',
+    katexValue: 's',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  M: {
+    label: 'min',
+    mathliveValue: '$\\mathrm{min}',
+    katexValue: 'min',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  H: {
+    label: 'h',
+    mathliveValue: '\\mathrm{h}',
+    katexValue: 'h',
+    style: KEYBOARD_STYLE_PRESETS.LARGE,
+  },
+  DAY: {
+    label: 'day',
+    mathliveValue: '\\mathrm{day}',
+    katexValue: 'day',
+  },
+  WEEK: {
+    label: 'week',
+    mathliveValue: '$\\mathrm{week}',
+    katexValue: 'week',
+  },
+  MONTH: {
+    label: 'month',
+    mathliveValue: '$\\mathrm{month}',
+    katexValue: 'month',
+  },
+  YEAR: {
+    label: 'year',
+    mathliveValue: '$\\mathrm{year}',
+    katexValue: 'year',
+  },
+  DAYS: {
+    label: 'days',
+    mathliveValue: '$\\mathrm{days}',
+    katexValue: 'days',
+  },
+  WEEKS: {
+    label: 'weeks',
+    mathliveValue: '$\\mathrm{weeks}',
+    katexValue: 'weeks',
+  },
+  MONTHS: {
+    label: 'months',
+    mathliveValue: '$\\mathrm{months}',
+    katexValue: 'months',
+  },
+  YEARS: {
+    label: 'years',
+    mathliveValue: '$\\mathrm{years}',
+    katexValue: 'years',
+  },
+  AM: {
+    label: 'am',
+    mathliveValue: '\\mathrm{am}',
+    katexValue: 'am',
+  },
+  PM: {
+    label: 'pm',
+    mathliveValue: '\\mathrm{pm}',
+    katexValue: 'pm',
+  },
+} as const

package/src/features/keyboard/helpers.ts

@@ -1,12 +1,13 @@
-import { KEYBOARD_GROUPS_BY_LOCALE } from './constants/keyboardGroupsByLocale'
-import { KeyboardGroup, KeyboardType } from './types/types'
-import { Locale } from '../../shared/translation/types'
-import { MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP } from './components/AlgebraLayout/keyboardGroups'
 import { IS_WEB } from '@magmamath/react-native-ui'
 import { getMobileBreakpointByCharType } from './constants/keyboardLayouts'
+import { KeyboardType, KeyboardUnitsGroupType, ResolvedKeyboard } from './types/types'
 
-export function getKeyboardGroup(locale: Locale, type: KeyboardType): KeyboardGroup {
-  return KEYBOARD_GROUPS_BY_LOCALE[locale]?.[type] ?? MATH_ENTRY_ALGEBRA_KEYBOARD_GROUP
+export const getMainKeyboardGroup = (keys: ResolvedKeyboard, type: KeyboardType) => {
+  return keys.operators[type]
+}
+
+export const getUnitsKeyboardGroup = (keys: ResolvedKeyboard, type: KeyboardUnitsGroupType) => {
+  return keys.units[type]
 }
 
 export const getIsIpadOrIphoneDevice = () => {

package/src/features/keyboard/index.ts

@@ -1,2 +1,5 @@
-export * from './types'
 export { Keyboard } from './components/Keyboard'
+export * from './types/types'
+export * from './constants/keys'
+export * from './constants/groups'
+export { resolveKeyboard } from './constants/keyboard.helpers'

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

@@ -1,8 +1,19 @@
-import { ReactNode } from 'react'
-import { ButtonStyle, SelectOptionColor } from '@magmamath/react-native-ui'
+import type { ReactNode } from 'react'
+import { SelectOptionColor } from '@magmamath/react-native-ui'
 import { GestureResponderEvent } from 'react-native'
 
-export const enum KeyboardType {
+export type KeyboardKey = {
+  icon?: ReactNode
+  mathliveValue: string
+  katexValue: string
+  isSpecialSymbol?: boolean
+  mathQuillValue?: string
+  spreadsheetValue?: string
+  label?: string
+  style?: Record<string, any>
+}
+
+export enum KeyboardType {
   AlgebraAdvanced = 'AlgebraAdvanced',
   Basic = 'Basic',
   BasicPlus = 'BasicPlus',
@@ -16,15 +27,32 @@ export const enum KeyboardType {
   Underlined = 'Underlined',
 }
 
-export type KeyboardKey = {
-  katexValue: string
-  label?: string
-  isSpecialSymbol?: boolean
-  mathliveValue?: string
-  spreadsheetValue?: string
-  mathQuillValue?: string
-  icon?: ReactNode
-  style?: ButtonStyle
+export enum KeyboardUnitsGroupType {
+  LENGTH = 'length',
+  AREA = 'area',
+  VOLUME = 'volume',
+  WEIGHT = 'weight',
+  TIME = 'time',
+}
+
+export type MathOperatorsGroup = Record<string, KeyboardKey>
+
+export type KeyboardGroup = {
+  keys: KeyboardKey[]
+  numOfRows?: number
+}
+
+export type KeyboardGroups = Record<string, KeyboardGroup>
+
+export type KeyboardRowsGroup = {
+  keys: KeyboardKey[][]
+}
+
+export type KeyboardRowsGroups = Record<string, KeyboardRowsGroup>
+
+export type ResolvedKeyboard = {
+  operators: Record<KeyboardType, KeyboardGroup>
+  units: Record<KeyboardUnitsGroupType, KeyboardRowsGroup>
 }
 
 export type KeyboardKeyValue = {
@@ -36,21 +64,11 @@ export type KeyboardKeyValue = {
   mathQuillValue?: string
 }
 
-export type KeyboardGroup = {
-  id: string
-  className?: string
-  keys: KeyboardKey[]
-  numOfRows?: number
-}
-
 export type KeyboardLayoutProps = {
+  keys: ResolvedKeyboard
   onKeyPress: (key: KeyboardKeyValue) => void
   onLayoutChange?: (isSecondaryLayout: boolean) => void
   color?: SelectOptionColor
   isDisabled?: boolean
   disabledKeys?: KeyboardKey[]
 }
-
-export type MathKeysGroup<T extends Record<string, string>> = {
-  [K in keyof T as T[K]]: KeyboardKey
-}

package/src/features/voice/playing/components/VoiceTranscriptionsDropdown.tsx

@@ -4,10 +4,20 @@ import {
   CaretDownIcon,
   COLORS,
   IS_WEB,
+  ScrollableListScrollView,
 } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
-import { TouchableOpacity, StyleProp, ViewStyle, FlatList, View, StyleSheet } from 'react-native'
+import {
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  FlatList,
+  LayoutChangeEvent,
+  ScrollView,
+  View,
+  StyleSheet,
+} from 'react-native'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { AnswerAudio, VoiceTranscriptionItem } from '../../types'
 import { useVoiceTranscriptionsDropdown } from '../hooks/useVoiceTranscriptionsDropdown'
@@ -42,6 +52,8 @@ export const VoiceTranscriptionsDropdown = ({
   const [attempts, setAttempts] = useState<VoiceTranscriptionItem[]>([])
 
   const scrollRef = useRef<FlatList | null>(null)
+  const scrollViewRef = useRef<ScrollView | null>(null)
+  const itemLayoutsRef = useRef<Map<string, number>>(new Map())
   const answersRef = useRef(answers)
   answersRef.current = answers
 
@@ -74,8 +86,23 @@ export const VoiceTranscriptionsDropdown = ({
     model.dropdown,
   )
 
+  const handleItemLayout = useCallback((id: string, event: LayoutChangeEvent) => {
+    itemLayoutsRef.current.set(id, event.nativeEvent.layout.y)
+  }, [])
+
   const scrollToAttempt = useCallback(
     (attemptNumber: number) => {
+      if (IS_WEB) {
+        const item = attempts.find((item) => item.attemptNumber === attemptNumber)
+        if (item) {
+          const y = itemLayoutsRef.current.get(item._id)
+          if (y !== undefined) {
+            scrollViewRef.current?.scrollTo({ y, animated: true })
+          }
+        }
+        return
+      }
+
       const index = attempts.findIndex((item) => item.attemptNumber === attemptNumber)
       if (index !== -1) {
         scrollRef.current?.scrollToIndex({ index, animated: true, viewPosition: 0 })
@@ -188,19 +215,32 @@ export const VoiceTranscriptionsDropdown = ({
 
       <Animated.View style={[listAnimatedStyle, { overflow: 'hidden' }]}>
         <View onLayout={onListLayout} style={styles.listContainer}>
-          <ScrollableList
-            bounces={false}
-            ref={scrollRef}
-            hideShadow
-            data={attempts}
-            keyExtractor={(item) => item._id}
-            onScrollToIndexFailed={handleScrollToIndexFailed}
-            renderItem={renderItem}
-            style={IS_WEB && styles.list}
-            contentContainerStyle={styles.listContent}
-            //for some resons on web FlatList doesn't render last items in huge list, so we need to render them all at once
-            initialNumToRender={IS_WEB ? 20 : undefined}
-          />
+          {IS_WEB ? (
+            <ScrollableListScrollView
+              bounces={false}
+              ref={scrollViewRef}
+              hideShadow
+              style={styles.list}
+              contentContainerStyle={styles.listContent}
+            >
+              {attempts.map((item) => (
+                <View key={item._id} onLayout={(e) => handleItemLayout(item._id, e)}>
+                  {renderItem({ item })}
+                </View>
+              ))}
+            </ScrollableListScrollView>
+          ) : (
+            <ScrollableList
+              bounces={false}
+              ref={scrollRef}
+              hideShadow
+              data={attempts}
+              keyExtractor={(item) => item._id}
+              onScrollToIndexFailed={handleScrollToIndexFailed}
+              renderItem={renderItem}
+              contentContainerStyle={styles.listContent}
+            />
+          )}
         </View>
       </Animated.View>
 

package/src/index.ts

@@ -1,4 +1,4 @@
-export { useFeaturesLocalization, setFeaturesLocalization, Locale } from './shared/translation'
+export { useFeaturesLocalization, setFeaturesLocalization } from './shared/translation'
 export { generateRandomId } from './lib/helpers/helpers'
 export * from './features/chatbot'
 export * from './features/feedback'