@codeleap/mobile 3.2.19 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.2.19",
+  "version": "3.3.2",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -36,7 +36,8 @@
     "react-native-super-grid": "4.6.1",
     "react-native-image-viewing": "0.2.2",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "react-native-avoid-softinput": "3.1.5"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",

package/src/components/Autocomplete/index.tsx

@@ -77,6 +77,7 @@ export const Autocomplete = <T extends string|number = string, Multi extends boo
     onItemPressed = () => {},
     listPlaceholder,
     style,
+    loading: loadingProp = false,
     ...listProps
   } = allProps
 
@@ -199,6 +200,8 @@ export const Autocomplete = <T extends string|number = string, Multi extends boo
 
   const Search = searchComponent
 
+  const showLoading = TypeGuards.isFunction(loadingProp) ? loadingProp(loading) : (loadingProp || loading)
+
   return <View style={[variantStyles.wrapper, style]}>
     <Search
       placeholder={placeholder}
@@ -222,9 +225,9 @@ export const Autocomplete = <T extends string|number = string, Multi extends boo
       // @ts-ignore
       keyExtractor={(i) => i.value}
       renderItem={renderListItem}
-      fakeEmpty={loading}
-      loading={loading}
+      loading={showLoading}
       placeholder={listPlaceholder}
+      keyboardAware={false}
       {...listProps}
     />
   </View>

package/src/components/Autocomplete/types.ts

@@ -70,6 +70,7 @@ export type AutocompleteProps<T = any, Multi extends boolean = false> = {
     debugName: string
     searchComponent?: React.ComponentType<SearchInputProps>
     listPlaceholder?: Partial<EmptyPlaceholderProps>
+    loading: boolean | ((isLoading: boolean) => boolean)
   }
     & Omit<FlatListProps<T>, 'renderItem'|'styles'|'style'>
     & ComponentVariants<typeof AutocompletePresets>

package/src/components/Drawer/index.tsx

@@ -23,11 +23,6 @@ export const Drawer:React.FC<DrawerProps> = (props) => {
     {...modalProps}
     scrollProps={{
       ...scrollProps,
-      keyboardAware: {
-
-        enabled: false,
-        ...scrollProps?.keyboardAware,
-      },
     }}
   />
 }

package/src/components/List/index.tsx

@@ -7,7 +7,7 @@ import {
   TypeGuards,
 } from '@codeleap/common'
 
-import { FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet } from 'react-native'
+import { FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, FlatList } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { RefreshControl, RefreshControlProps } from '../RefreshControl'
@@ -15,6 +15,7 @@ import { ListComposition, ListPresets } from './styles'
 import { StylesOf } from '../../types'
 
 import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
+import { useKeyboardPaddingStyle } from '../../utils'
 
 export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
@@ -51,6 +52,7 @@ export type FlatListProps<
     refreshControlProps?: Partial<RefreshControlProps>
     fakeEmpty?: boolean
     loading?: boolean
+    keyboardAware?: boolean
   } & ComponentVariants<typeof ListPresets>
 
 const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
@@ -59,7 +61,7 @@ const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
   )
 }
 
-const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
+const ListCP = forwardRef<FlatList, FlatListProps>(
   (flatListProps, ref) => {
     const {
       variants = [],
@@ -69,9 +71,9 @@ const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
       component,
       refreshing,
       placeholder,
-      keyboardAware,
       refreshControlProps = {},
       loading = false,
+      keyboardAware = true,
       fakeEmpty = loading,
       contentContainerStyle,
       ...props
@@ -111,23 +113,23 @@ const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
       loading: TypeGuards.isBoolean(placeholder?.loading) ? placeholder.loading : loading,
     }
 
+    const keyboardStyle = useKeyboardPaddingStyle([
+      variantStyles.content,
+      contentContainerStyle,
+      isEmpty && variantStyles['content:empty'],
+    ], keyboardAware && !props.horizontal)
+
     return (
-      <KeyboardAwareFlatList
+      <FlatList
         style={[
           variantStyles.wrapper,
           style,
           isEmpty && variantStyles['wrapper:empty'],
-
         ]}
-        contentContainerStyle={[
-          variantStyles.content,
-          contentContainerStyle,
-          isEmpty && variantStyles['content:empty'],
-        ]}
-        // @ts-expect-error React's refs suck
+        contentContainerStyle={keyboardStyle}
+        // @ts-expect-error This works
         ItemSeparatorComponent={separator}
         ListHeaderComponentStyle={variantStyles.header}
-
         refreshControl={!!onRefresh && (
           <RefreshControl
             refreshing={refreshing}
@@ -139,7 +141,7 @@ const ListCP = forwardRef<KeyboardAwareFlatList, FlatListProps>(
         ListEmptyComponent={<EmptyPlaceholder {..._placeholder}/>}
         {...props}
         data={fakeEmpty ? [] : props.data}
-        ref={ ref as React.LegacyRef<KeyboardAwareFlatList> }
+        ref={ ref }
         renderItem={renderItem}
 
       />

package/src/components/Modal/index.tsx

@@ -22,7 +22,6 @@ import { Backdrop } from '../Backdrop'
 import { useAnimatedVariantStyles, useBackButton } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
-import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { ActionIcon } from '../ActionIcon'
 
 export * from './styles'
@@ -47,7 +46,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   header?: React.ReactElement
   closeOnHardwareBackPress?: boolean
   renderHeader?: (props: ModalHeaderProps) => React.ReactElement
-  keyboardAware?: GetKeyboardAwarePropsOptions
+  keyboardAware?: boolean
   scrollProps?: PropsOf<typeof Scroll, 'ref'>
 }
 
@@ -197,15 +196,10 @@ export const Modal = (modalProps:ModalProps) => {
         style={scrollStyle}
         contentContainerStyle={getStyles('scrollContent')}
         showsVerticalScrollIndicator={false}
-        keyboardAware= {{
-          adapt: 'maxHeight',
-          baseStyleProp: 'style',
-          animated: true,
-          enabled: visible,
-          // enableOnAndroid: true,
-        }}
+        keyboardAware
         animated
-        // ref={scrollRef}
+        // @ts-ignore
+        ref={scrollRef}
         { ...scrollProps}
       >
         {dismissOnBackdrop &&

package/src/components/Scroll/index.tsx

@@ -11,15 +11,16 @@ import { ViewProps } from '../View'
 import { RefreshControl, RefreshControlProps } from '../RefreshControl'
 import { StylesOf } from '../../types'
 import { ScrollComposition, ScrollPresets } from './styles'
-import { GetKeyboardAwarePropsOptions } from '../../utils'
+import { GetKeyboardAwarePropsOptions, useKeyboardPaddingStyle } from '../../utils'
 import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
-
+import { useSoftInputState } from 'react-native-avoid-softinput'
+import { useMemo } from 'react'
 export type ScrollProps = KeyboardAwareScrollViewProps &
   ViewProps & {
     onRefresh?: () => void
     refreshTimeout?: number
     changeData?: any
-    keyboardAware?: GetKeyboardAwarePropsOptions
+    keyboardAware?: boolean
     refreshing?: boolean
     styles?: StylesOf<ScrollComposition>
     refreshControlProps?: Partial<RefreshControlProps>
@@ -39,7 +40,7 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>(
       styles = {},
       refreshControlProps = {},
       contentContainerStyle,
-      keyboardAware,
+      keyboardAware = true,
       animated = true,
       ...props
     } = scrollProps
@@ -79,12 +80,14 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>(
       rootElement: 'content',
     })
 
-    const Component = KeyboardAwareScrollView
+    const Component = ScrollView
+
+    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
 
     return (
       <Component
         style={[variantStyles.wrapper, style]}
-        contentContainerStyle={[variantStyles.content, contentContainerStyle]}
+        contentContainerStyle={keyboardStyle}
         showsVerticalScrollIndicator={false}
         // @ts-ignore
         ref={ref}

package/src/components/Sections/index.tsx

@@ -12,11 +12,12 @@ import {
   RefreshControlProps,
   SectionListRenderItemInfo,
   SectionListProps as RNSectionListProps,
+  SectionList,
 } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { StylesOf } from '../../types'
-import { KeyboardAwareSectionList, KeyboardAwareSectionListProps } from 'react-native-keyboard-aware-scroll-view'
+import { useKeyboardPaddingStyle } from '../../utils'
 import { SectionsComposition, SectionsPresets } from './styles'
 export * from './styles'
 
@@ -52,9 +53,10 @@ export type SectionListProps<
     styles?: StylesOf<SectionsComposition>
     refreshControlProps?: Partial<RefreshControlProps>
     fakeEmpty?: boolean
+    keyboardAware?: boolean
   } & ComponentVariants<typeof SectionsPresets>
 
-export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
+export const Sections = forwardRef<SectionList, SectionListProps>(
   (sectionsProps, ref) => {
     const {
       variants = [],
@@ -64,8 +66,10 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
       component,
       refreshing,
       placeholder,
-      keyboardAware,
+      keyboardAware = true,
       refreshControlProps = {},
+      contentContainerStyle,
+
       fakeEmpty,
       refreshControl,
       ...props
@@ -78,11 +82,11 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
 
     })
 
-    const renderSeparator = () => {
+    const renderSeparator = useCallback(() => {
       return (
         <View style={variantStyles.separator}></View>
       )
-    }
+    }, [variantStyles.separator])
 
     const getItemPosition = (section, itemIdx) => {
       const listLength = section?.length || 0
@@ -127,10 +131,12 @@ export const Sections = forwardRef<KeyboardAwareSectionList, SectionListProps>(
     const isEmpty = !props.sections || !props.sections.length
     const separator = !isEmpty && separatorProp == true && renderSeparator
 
+    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
+
     return (
-      <KeyboardAwareSectionList
+      <SectionList
         style={[variantStyles.wrapper, style]}
-        contentContainerStyle={[variantStyles.content]}
+        contentContainerStyle={keyboardStyle}
         showsVerticalScrollIndicator={false}
         // @ts-ignore
         ref={ref}

package/src/components/Select/index.tsx

@@ -347,6 +347,7 @@ export const Select = <T extends string|number = string, Multi extends boolean =
         renderItem={renderListItem}
         fakeEmpty={loading}
         separators
+        keyboardAware={false}
         {...listProps}
         ListHeaderComponent={_ListHeaderComponent}
         placeholder={{

package/src/components/View/index.tsx

@@ -23,7 +23,7 @@ export type ViewProps ={
   ref?: AnyRef<ViewRefType>
   component?: any
   animated?: boolean
-  keyboardAware?: GetKeyboardAwarePropsOptions
+  keyboardAware?: boolean
   transition?: Partial<TransitionConfig>
 }
   & NativeViewProps

package/src/utils/hooks.ts

@@ -4,6 +4,8 @@ import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleCon
 import AsyncStorage from '@react-native-community/async-storage'
 import { AnimatedStyleProp, Easing, EasingFn, interpolateColor, runOnJS, useAnimatedRef, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { PressableRippleProps } from '../modules/PressableRipple/type'
+import { useSoftInputState } from 'react-native-avoid-softinput'
+import { useMemo } from 'react'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -104,7 +106,7 @@ const buildAnimatedStyle = (property: AnimatableProperties, value, currentStyle,
     case 'scaleY':
     case 'translateX':
     case 'translateY':
-      if(!newStyle.transform){
+      if (!newStyle.transform) {
         newStyle.transform = []
       }
       newStyle.transform.push({
@@ -165,26 +167,22 @@ export function useAnimatedVariantStyles<T extends Record<string|number|symbol,
   const _transition = useRef(null)
 
   if (!_transition.current) {
-    _transition.current = JSON.parse(JSON.stringify(transition||{}))
+    _transition.current = JSON.parse(JSON.stringify(transition || {}))
   }
 
-  
-
   const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
 
   const animated = useAnimatedStyle(() => {
     const nextState = updater(staticStyles)
 
-    
     const formatted = transformProperties(
-      nextState, 
-      _transition.current
+      nextState,
+      _transition.current,
     )
 
     return formatted
   }, dependencies)
 
-
   return animated
 }
 
@@ -344,3 +342,16 @@ export function useAsyncStorageState<T>(key:string, defaultValue?: T) {
   return [value, setValue] as [T, typeof setValue]
 }
 
+export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
+  const { isSoftInputShown, softInputHeight } = useSoftInputState()
+
+  const propStyle = useMemo(() => {
+    return StyleSheet.flatten(styles)
+  }, styles)
+
+  const bottomPadding = propStyle && TypeGuards.isNumber(propStyle.paddingBottom) ? propStyle.paddingBottom : 0
+
+  const totalPadding = softInputHeight + bottomPadding
+
+  return isSoftInputShown && enabled ? [propStyle, { paddingBottom: totalPadding }] : [propStyle]
+}