@chem-po/react-native 0.0.8 → 0.0.10

package/src/components/form/input/input.tsx

@@ -6,7 +6,13 @@ import {
   usePlaceholderColor,
   useThemeValue,
 } from '@chem-po/react'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, useEffect, useMemo } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  useEffect,
+  useMemo,
+} from 'react'
 import { Animated, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { AnimatedText } from '../../text/AnimatedText'
 import { FieldProps } from '../types'
@@ -46,6 +52,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     meta: { error, active, touched },
     input,
     inEditable,
+    style,
   } = props
 
   const { value } = input
@@ -78,7 +85,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     outputRange: [placeholderColor, shadowColor],
   })
 
-  const { _type, label } = field
+  const { _type, label: Label } = field
   const showPlaceholder = useMemo(
     () => _type === 'multipleSelect' || (!!value && _type !== 'file' && _type !== 'boolean'),
     [value, _type],
@@ -112,16 +119,24 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
   const Component = useMemo(() => Components[_type] as ComponentType<T>, [_type])
 
   return (
-    <View style={[staticStyles.container]}>
-      {label && !inEditable ? <Text style={staticStyles.label}>{label}</Text> : null}
-      <AnimatedText
-        style={staticStyles.placeholder}
-        show={showPlaceholder}
-        color={placeholderColor}
-        height={16}
-        marginBottom={6}>
-        {field.placeholder ?? ''}
-      </AnimatedText>
+    <View style={[staticStyles.container, style]}>
+      {Label && !inEditable ? (
+        typeof Label === 'string' ? (
+          <Text style={staticStyles.label}>{Label}</Text>
+        ) : (
+          <Label />
+        )
+      ) : null}
+      {inEditable ? null : (
+        <AnimatedText
+          style={staticStyles.placeholder}
+          show={showPlaceholder}
+          color={placeholderColor}
+          height={16}
+          marginBottom={6}>
+          {field.placeholder ?? ''}
+        </AnimatedText>
+      )}
       <Animated.View style={[staticStyles.inputContainer, animatedStyles]}>
         <Component ref={ref} {...props} />
       </Animated.View>

package/src/components/form/input/multipleSelect/index.tsx

@@ -1,12 +1,12 @@
 import { InputRef } from '@chem-po/core'
 import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { FieldProps } from '../../types'
 
 export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
   ({ field, input, inEditable }, ref) => {
-    const { options, renderOption, getOptionKey } = field
+    const { options, renderOption: RenderOption, getOptionKey } = field
     const { onChange, value, onFocus, onBlur } = input
     const colorMode = useColorMode()
 
@@ -34,7 +34,7 @@ export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleS
             key={getOptionKey ? getOptionKey(o) : o}
             style={[styles.option, value?.includes(o) && styles.selectedOption]}
             onPress={() => handleOptionPress(o)}>
-            {renderOption(o, colorMode, !!value?.includes(o))}
+            <RenderOption value={o} colorMode={colorMode} isSelected={!!value?.includes(o)} />
           </TouchableOpacity>
         ))}
       </View>

package/src/components/form/input/number/index.tsx

@@ -1,17 +1,16 @@
 import { InputRef } from '@chem-po/core'
 import { CurrencyAmountField, NumberField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { StyleSheet, Text, TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { useInputStyle } from '../hooks/useInputStyle'
+import { inputStyles } from '../styles'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, size, prefix, inEditable: _, ...props }, ref) => {
+  ({ input: { onChange, value, ...input }, field, prefix, inEditable: _, style }, ref) => {
     const { type, defaultValue, placeholder } = field
     const color = useTextColor()
-    const { style } = useInputStyle(size)
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
@@ -34,8 +33,7 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
         {prefix && <Text style={styles.prefix}>{prefix}</Text>}
         <TextInput
           ref={inputRef}
-          style={[styles.input, style, { color }]}
-          // style={styles.input}
+          style={[inputStyles.input, { color }, style]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           keyboardType="numeric"
@@ -86,13 +84,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: '100%',
   },
-  input: {
-    flex: 1,
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: 'transparent',
-  },
   prefix: {
     marginRight: 4,
     fontSize: 16,

package/src/components/form/input/select/index.tsx

@@ -1,4 +1,4 @@
-import { InputRef } from '@chem-po/core'
+import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
 import {
   SelectField,
   useBackgroundColor,
@@ -7,11 +7,19 @@ import {
   usePlaceholderColor,
 } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { ForwardedRef, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'
 import { InputClearButton } from '../common/InputClearButton'
+import { inputStyles } from '../styles'
 
 type SelectOption<T extends SelectField> = T['options'][number]
 
@@ -19,7 +27,7 @@ const BaseSelectComponent = <T extends SelectField>(
   { field, input, meta }: FieldProps<T>,
   ref: ForwardedRef<InputRef>,
 ) => {
-  const { placeholder, options, renderOption, getOptionKey, optional } = field
+  const { placeholder, options, renderOption: RenderOption, getOptionKey, optional } = field
   const { onChange, value, onFocus, onBlur } = input
   const { active } = meta
   const [buttonLayout, setButtonLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
@@ -54,14 +62,14 @@ const BaseSelectComponent = <T extends SelectField>(
     })
   }
 
-  const renderOptionText = (option: T['options'][number], isSelected: boolean) => {
-    if (typeof renderOption === 'function') {
-      return renderOption(option, 'light', isSelected)
+  const RenderOptionText = (props: RenderSelectOptionProps<T['defaultValue']>) => {
+    if (typeof RenderOption === 'function') {
+      return RenderOption({ ...props, value: props.value ?? '' })
     }
-    if (typeof option === 'object') {
-      return <Txt>{JSON.stringify(option)}</Txt>
+    if (typeof props.value === 'object') {
+      return <Txt>{JSON.stringify(props.value)}</Txt>
     }
-    return <Txt>{String(option)}</Txt>
+    return <Txt>{String(props.value)}</Txt>
   }
 
   const getKey = (option: SelectOption<T>): string => {
@@ -87,7 +95,7 @@ const BaseSelectComponent = <T extends SelectField>(
     <View style={styles.wrapper}>
       <View ref={buttonRef} onLayout={handleButtonLayout} style={styles.container}>
         <TouchableOpacity
-          style={[styles.button]}
+          style={[styles.button, inputStyles.input]}
           onPress={() => {
             if (active) {
               onBlur()
@@ -97,7 +105,7 @@ const BaseSelectComponent = <T extends SelectField>(
           }}>
           <View style={styles.buttonTextContainer}>
             {selected ? (
-              renderOptionText(selected, true)
+              <RenderOptionText value={selected} colorMode="light" isSelected={true} />
             ) : (
               <Text style={[styles.placeholder, { color: placeholderColor }]}>{placeholder}</Text>
             )}
@@ -140,7 +148,9 @@ const BaseSelectComponent = <T extends SelectField>(
                       isSelected && { backgroundColor: selectedOptionBg },
                     ]}
                     onPress={() => handleOptionPress(option)}>
-                    <View>{renderOptionText(option, isSelected)}</View>
+                    <View>
+                      <RenderOptionText value={option} colorMode="light" isSelected={isSelected} />
+                    </View>
                   </TouchableOpacity>
                 )
               })}
@@ -165,10 +175,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
     backgroundColor: 'transparent',
     borderRadius: 4,
   },

package/src/components/form/input/socialMedia/index.tsx

@@ -1,6 +1,6 @@
 import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
 import { SocialMediaField } from '@chem-po/react'
-import {
+import React, {
   FC,
   ForwardedRef,
   forwardRef,

package/src/components/form/input/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native'
+
+export const inputStyles = StyleSheet.create({
+  input: {
+    width: '100%',
+    paddingHorizontal: 6,
+    fontSize: 16,
+    paddingVertical: 4,
+    outlineWidth: 0,
+  },
+})

package/src/components/form/input/text/index.tsx

@@ -1,13 +1,14 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
 import { FieldProps } from '../../types'
+import { inputStyles } from '../styles'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field }, ref) => {
+  ({ input, inEditable, meta, field, style }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
     const { value, onChange, ...inputProps } = input
@@ -31,10 +32,11 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         <TextInput
           ref={inputRef}
           style={[
-            styles.input,
-            inEditable && styles.inEditable,
+            inputStyles.input,
+            // inEditable && styles.inEditable,
             type === 'password' && styles.passwordInput,
             { color },
+            style,
           ]}
           secureTextEntry={isHidden}
           placeholderTextColor={placeholderColor}
@@ -61,17 +63,11 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
 TextComponent.displayName = 'TextComponent'
 
 const styles = StyleSheet.create({
-  input: {
-    width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  inEditable: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    height: 'auto',
-  },
+  // inEditable: {
+  //   paddingHorizontal: 0,
+  //   paddingVertical: 0,
+  //   height: 'auto',
+  // },
   passwordInput: {
     paddingRight: 40,
   },

package/src/components/form/input/text/textarea.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { StyleSheet, TextInput } from 'react-native'
 import { FieldProps } from '../../types'
 

package/src/components/form/input/time/index.tsx

@@ -1,13 +1,14 @@
 import { InputRef, padZeros } from '@chem-po/core'
 import { TimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
+import { inputStyles } from '../styles'
 
 export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
   ({ input: { onChange, value, onFocus, onBlur }, field: { placeholder, optional } }, ref) => {
@@ -56,7 +57,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={styles.button}
+          style={[styles.button, inputStyles.input]}
           onPress={() => {
             setVisible(true)
             onFocus()
@@ -92,9 +93,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
   },
   text: {
     fontSize: 16,

package/src/components/form/view/file.tsx

@@ -1,6 +1,6 @@
 import { ImageViewOptions } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { FileView } from '../input/file'
 

package/src/components/form/view/index.tsx

@@ -1,7 +1,8 @@
 import { formatField } from '@chem-po/core'
 import { Field } from '@chem-po/react'
-import { useMemo } from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useMemo } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'
@@ -18,9 +19,11 @@ const styles = StyleSheet.create({
   },
   value: {
     opacity: 1,
+    fontSize: 16,
   },
   valueEmpty: {
     opacity: 0.6,
+    fontSize: 16,
   },
 })
 
@@ -45,10 +48,8 @@ const DefaultFieldView = ({
 
   return (
     <View style={[styles.container, style]}>
-      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
-      <Text style={value !== undefined && value !== null ? styles.value : styles.valueEmpty}>
-        {formatted ?? 'None'}
-      </Text>
+      {!noLabel && <Txt style={styles.label}>{placeholder}</Txt>}
+      <Txt style={value ? styles.value : styles.valueEmpty}>{formatted ?? 'None'}</Txt>
     </View>
   )
 }

package/src/components/form/view/multipleSelect.tsx

@@ -1,5 +1,5 @@
-import { MultipleSelectField } from '@chem-po/react'
-import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import { MultipleSelectField, useColorMode } from '@chem-po/react'
+import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 const styles = StyleSheet.create({
   container: {
@@ -32,16 +32,18 @@ export const MultipleSelectFieldView = ({
   noLabel?: boolean
   style?: ViewStyle
 }) => {
-  const { placeholder, renderOption, getOptionKey } = field
-  const colorScheme = useColorScheme() ?? 'light'
+  const { placeholder, renderOption: RenderOption } = field
+  const colorMode = useColorMode()
 
   return (
     <View style={[styles.container, style]}>
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
       {value ? (
         value.map((v: any) => (
-          <View key={getOptionKey ? getOptionKey(v) : v} style={styles.optionContainer}>
-            {renderOption(v, colorScheme, true)}
+          <View
+            //  key={getOptionKey ? getOptionKey(v) : v}
+            style={styles.optionContainer}>
+            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
           </View>
         ))
       ) : (

package/src/components/form/view/select.tsx

@@ -1,5 +1,7 @@
-import { SelectField, usePlaceholderColor } from '@chem-po/react'
-import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import { RenderSelectOptionProps } from '@chem-po/core'
+import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
+import React from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 
 const styles = StyleSheet.create({
@@ -13,7 +15,9 @@ const styles = StyleSheet.create({
   },
 })
 
-const DefaultRenderOption = (value: any) => {
+const DefaultRenderOption = <T extends SelectField>({
+  value,
+}: RenderSelectOptionProps<T['defaultValue']>) => {
   return <Txt>{typeof value === 'string' ? value : JSON.stringify(value)}</Txt>
 }
 
@@ -29,13 +33,17 @@ export const SelectFieldView = ({
   style?: ViewStyle
 }) => {
   const { placeholder, renderOption: customRender } = field
-  const colorScheme = useColorScheme() ?? 'light'
+  const colorMode = useColorMode()
   const placeholderColor = usePlaceholderColor()
-  const renderOption = customRender ?? DefaultRenderOption
+  const RenderOption = customRender ?? DefaultRenderOption
   return (
     <View style={[styles.container, style]}>
       {!noLabel && <Text style={[styles.label, { color: placeholderColor }]}>{placeholder}</Text>}
-      {value ? renderOption(value, colorScheme, true) : 'None'}
+      <RenderOption
+        value={value && value !== '' ? value : 'None'}
+        colorMode={colorMode}
+        isSelected={true}
+      />
     </View>
   )
 }

package/src/components/icons/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import React, { FC } from 'react'
 import { Path, Svg } from 'react-native-svg'
 
 interface IconProps {

package/src/components/loading/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import { useColorModeValue } from '@chem-po/react'
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import {
   ActivityIndicator,
   ActivityIndicatorProps,

package/src/components/loading/Loading.tsx

@@ -1,7 +1,7 @@
 import { ThemedAsset, useAppAssets, useTheme } from '@chem-po/react'
 import LottieView from 'lottie-react-native'
-import { useMemo } from 'react'
-import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Animated, Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 export const LottieLoadingLogo = ({
   size = 30,
@@ -137,16 +137,46 @@ export const LoadingOverlay = ({
 }) => {
   const { colorMode } = useTheme()
   const bgColor = colorMode === 'dark' ? 'rgba(0, 0, 0, 0.53)' : 'rgba(255, 255, 255, 0.67)'
+  const opacity = useMemo(() => new Animated.Value(0), [])
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  useEffect(() => {
+    if (isLoading) {
+      setIsAnimating(true)
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }).start()
+    } else {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(() => {
+        setIsAnimating(false)
+      })
+    }
+  }, [isLoading, opacity])
+
+  if (!isLoading && !isAnimating) return null
 
   return (
-    <View
-      style={[styles.overlay, { backgroundColor: bgColor }, { opacity: isLoading ? 1 : 0 }, style]}>
+    <Animated.View
+      style={[
+        styles.overlay,
+        {
+          backgroundColor: bgColor,
+          opacity,
+        },
+        style,
+      ]}>
       {!text ? (
         <LoadingLogo inFeed={inFeed} size={100} isLoading={isLoading} />
       ) : (
         <Loading text={text} />
       )}
-    </View>
+    </Animated.View>
   )
 }
 

package/src/components/loading/LoadingImage.tsx

@@ -1,6 +1,6 @@
 import { useMounted } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'

package/src/components/loading/LoadingSwitch.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { Animated, StyleSheet, Switch, Text, View } from 'react-native'
 import { Loading } from './Loading'
 

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,6 +1,6 @@
 import { useScreen } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { LoadingLogo } from '../loading/Loading'
 

package/src/components/text/AnimatedText.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, TextStyle } from 'react-native'
 
 export interface AnimatedTextProps {

package/src/components/text/Txt.tsx

@@ -1,4 +1,5 @@
 import { useTextColor } from '@chem-po/react'
+import React from 'react'
 import { Text, TextProps } from 'react-native'
 
 export const Txt = ({ children, ...props }: TextProps) => {

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,5 +1,6 @@
 import { useBackgroundColor, useIconColor, useTheme } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
+import React from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 export const DarkModeToggle = () => {

package/src/contexts/root.tsx

@@ -1,6 +1,6 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
 import { ChempoProps, ChempoProvider } from '@chem-po/react'
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { NotifierWrapper } from 'react-native-notifier'
 import { en, registerTranslation } from 'react-native-paper-dates'
 import { nativeToast } from '../constants/toast'