@codeleap/mobile 2.3.19 → 2.3.20

package/src/components/View/index.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyles,
   BaseViewProps,
   useCodeleapContext,
+  useMemo,
 } from '@codeleap/common'
 import { View as NativeView } from 'react-native'
 import { MotiView, MotiProps } from 'moti'
@@ -73,26 +74,37 @@ type GapProps = ViewProps & {
 
 export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
   const { Theme } = useCodeleapContext()
+  const childArr = React.Children.toArray(children)
+
   const horizontal = props.variants?.includes('row')
+  const spacings = useMemo(() => {
+    return childArr.map((_, idx) => {
+      let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
+
+      switch (idx) {
+        case 0:
+          spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
+          break
+        case childArr.length - 1:
+          spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
+          break
+        default:
+          break
+      }
+
+      return Theme.spacing[spacingFunction](value / 2)
+    })
+
+  }, [childArr.length, horizontal])
+
   return (
     <View {...props}>
       {
-        React.Children.toArray(children).map((Element, idx, childArr) => {
+        childArr.map((Element, idx, childArr) => {
           if (React.isValidElement(Element)) {
             const props = { ...Element.props, ...defaultProps }
 
-            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
-            switch (idx) {
-              case 0:
-                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
-                break
-              case childArr.length - 1:
-                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
-                break
-              default:
-                break
-            }
-            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
+            props.style = [props.style, spacings[idx]]
             return React.cloneElement(Element, props)
           }
           return Element

package/src/utils/KeyboardAware/context.tsx

@@ -21,7 +21,7 @@ export const KeyboardCtx = React.createContext({} as TKeyboardCtx)
 export const KeyboardProvider = ({ children }) => {
   const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
   const [keyboardVisible, setKeyboardVisible] = useState(false)
-  const { Theme } = useCodeleapContext()
+
   useEffect(() => {
     const eventNames = Platform.select<KeyboardVisibilityEvents>({
       ios: {
@@ -50,17 +50,12 @@ export const KeyboardProvider = ({ children }) => {
     }
   }, [])
 
-  let adjustKeyboard = 0
-
-  if (Platform.OS === 'android') {
-    adjustKeyboard = Theme.values.safeAreaTop
-  }
   const height = keyboardEvent?.endCoordinates?.height ?? 0
 
   const _return = {
     event: keyboardEvent,
     isVisible: keyboardVisible,
-    height: (!!height && keyboardVisible) ? height + adjustKeyboard : 0,
+    height: (!!height && keyboardVisible) ? height : 0,
     ...Keyboard,
   }
 

package/src/utils/PermissionManager/context.tsx

@@ -193,7 +193,7 @@ export function usePermissionModal(permissionName: string) {
   const permissionCtx = usePermissions()
   const modalState = modals.state[modalId]
 
-  const currentState = permissionCtx.state[permissionName]
+  const currentState = permissionCtx?.state?.[permissionName]
   const status = currentState
   const [debouncedStatus, reset] = useDebounce(status, modals.transitionDuration * 0.5)
 

package/src/utils/hooks.ts

@@ -1,5 +1,7 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
 import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
+// @ts-ignore
+import AsyncStorage from '@react-native-community/async-storage'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -161,3 +163,51 @@ export function useBackButton(cb: () => boolean|void, deps = []) {
     }
   }, deps)
 }
+type StateSetter<T> = T | ((prev:T) => T)
+
+export function useAsyncStorageState<T>(key:string, defaultValue?: T) {
+  const [value, _setValue] = useState<T>(undefined)
+
+  onMount(() => {
+    AsyncStorage.getItem(key).then(val => {
+      let storedValue = defaultValue
+
+      if (val) {
+        storedValue = JSON.parse(val)
+      }
+
+      _setValue(storedValue)
+    })
+  })
+
+  const setValue = (to: StateSetter<T>) => {
+    return new Promise<void>((resolve, reject) => {
+      _setValue((prev) => {
+        let newValue = prev
+        try {
+
+          if (typeof to !== 'function') {
+            newValue = to
+          } else {
+            const fn = to as ((prev:T) => T)
+            newValue = fn(value)
+          }
+
+          const jsonVal = JSON.stringify(newValue)
+
+          AsyncStorage.setItem(key, jsonVal).then(resolve).catch(reject)
+          resolve()
+          return newValue
+        } catch (e) {
+          reject(e)
+          return newValue
+        }
+
+      })
+    })
+
+  }
+
+  return [value, setValue] as [T, typeof setValue]
+}
+

package/src/utils/theme.ts

@@ -9,7 +9,7 @@ type AppValues = {
 export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
   const screenDimensions = Dimensions.get('screen')
 
-  const hasNotch = Platform.OS === 'ios' ? (Dimensions.get('window').height >= 812) : (initialWindowMetrics?.insets?.top > 24 || StatusBar.currentHeight > 24)
+  const hasNotch = DeviceInfo.hasNotch()
   const hasIsland = DeviceInfo.hasDynamicIsland()
   const bottomNavHeight = Platform.OS === 'android' ? initialWindowMetrics?.insets?.bottom : 0