@codeleap/mobile 2.2.1 → 2.2.4

package/src/utils/KeyboardAware/context.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { useCodeleapContext, useEffect, useState, useContext } from '@codeleap/common'
+import {
+  Keyboard,
+  Platform,
+  KeyboardEvent,
+  KeyboardEventName,
+} from 'react-native'
+
+type KeyboardVisibilityEvents = {
+    show: KeyboardEventName
+    hide: KeyboardEventName
+}
+type TKeyboardCtx = {
+  event: KeyboardEvent
+  isVisible: boolean
+  height: number
+}
+export const KeyboardCtx = React.createContext({} as TKeyboardCtx)
+
+export const KeyboardProvider = ({ children }) => {
+  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
+
+  const { Theme } = useCodeleapContext()
+  useEffect(() => {
+    const eventNames = Platform.select<KeyboardVisibilityEvents>({
+      ios: {
+        show: 'keyboardWillShow',
+        hide: 'keyboardWillHide',
+      },
+      android: {
+        show: 'keyboardDidShow',
+        hide: 'keyboardDidHide',
+      },
+    })
+    const events = [
+      Keyboard.addListener(eventNames.show, (e) => {
+
+        setKeyboardEvent(e)
+      }),
+      Keyboard.addListener(eventNames.hide, (e) => {
+
+        setKeyboardEvent(e)
+      }),
+    ]
+    return () => {
+      events.forEach(e => e.remove())
+    }
+  }, [])
+
+  let adjustKeyboard = 0
+
+  if (Platform.OS === 'android') {
+    adjustKeyboard = Theme.values.safeAreaTop
+  }
+  const height = keyboardEvent?.endCoordinates?.height ?? 0
+
+  const _return = {
+    event: keyboardEvent,
+    isVisible: height > 0,
+    height: height ? height + adjustKeyboard : 0,
+    ...Keyboard,
+  }
+
+  return <KeyboardCtx.Provider value={_return}>
+    {children}
+  </KeyboardCtx.Provider >
+
+}
+
+export const useKeyboard = () => {
+  return useContext(KeyboardCtx)
+}

package/src/utils/KeyboardAware/index.ts

@@ -5,6 +5,7 @@ import KeyboardAwareScrollView from './lib/KeyboardAwareScrollView'
 import KeyboardAwareFlatList from './lib/KeyboardAwareFlatList'
 import KeyboardAwareSectionList from './lib/KeyboardAwareSectionList'
 export * from './keyboardHooks'
+export * from './context'
 
 export {
   listenToKeyboardEvents,

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -1,70 +1,22 @@
-import { PropsOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
-import { useEffect, useState } from 'react'
-import {
-  Keyboard,
-  Platform,
-  KeyboardEvent,
-  KeyboardEventName,
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-} from 'react-native'
-
-type KeyboardVisibilityEvents = {
-    show: KeyboardEventName
-    hide: KeyboardEventName
-}
-
-export const useKeyboard = () => {
-  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
-  const [keyboardVisible, setKeyboardVisible] = useState(false)
-
-  useEffect(() => {
-    const eventNames = Platform.select<KeyboardVisibilityEvents>({
-      ios: {
-        show: 'keyboardWillShow',
-        hide: 'keyboardWillHide',
-      },
-      android: {
-        show: 'keyboardDidShow',
-        hide: 'keyboardDidHide',
-      },
-    })
-    const events = [
-      Keyboard.addListener(eventNames.show, (e) => {
-        setKeyboardVisible(true)
-        setKeyboardEvent(e)
-      }),
-      Keyboard.addListener(eventNames.hide, (e) => {
-        setKeyboardVisible(false)
-        setKeyboardEvent(e)
-      }),
-    ]
-    return () => {
-      events.forEach(e => e.remove())
-    }
-  }, [])
-
-  const _return = {
-    event: keyboardEvent,
-    isVisible: keyboardVisible,
-    height: keyboardEvent?.endCoordinates?.height || 0,
-    ...Keyboard,
-  }
-
-  return _return
-}
+import { PropsOf, useCodeleapContext, TypeGuards } from '@codeleap/common'
+import { ScrollView, Platform, StyleSheet, Dimensions, EasingFunction, Easing } from 'react-native'
+import { TransitionConfig } from '../../types'
+import { useKeyboard } from './context'
 type ScrollViewProps = Partial<
   Pick<
   PropsOf<typeof ScrollView>,
   'horizontal' | 'contentContainerStyle' | 'style'
   >
->
+> & {
+  transition?: TransitionConfig
+}
 
 export type GetKeyboardAwarePropsOptions = {
   baseStyleProp?: 'style' | 'contentContainerStyle'
   adapt?: 'height' | 'maxHeight' | 'paddingBottom' | 'marginBottom' | 'bottom'
   enabled?: boolean
+  animated?: boolean
+  transition?: TransitionConfig
   enableOnAndroid?: boolean
 }
 type UseKeyboardAwareViewParams = {
@@ -77,12 +29,19 @@ export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
     props?:T,
     options?: GetKeyboardAwarePropsOptions,
   ): T {
+
     const _options:GetKeyboardAwarePropsOptions = {
       adapt: 'maxHeight',
       baseStyleProp: 'style',
       enabled: true,
-      enableOnAndroid: true,
+      enableOnAndroid: false,
+      animated: false,
       ...options,
+      transition: {
+        easing: Easing.linear,
+        duration: 200,
+        type: 'timing',
+      },
     }
 
     if (!_options.enabled || props?.horizontal || (Platform.OS === 'android' && !_options.enableOnAndroid)) return props
@@ -106,7 +65,9 @@ export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
       }
     }
 
-    const newStyleProp = {
+    const newStyleProp = _options.animated ? {
+
+    } : {
       ...baseStyle,
     }
 
@@ -143,10 +104,18 @@ export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
 
     if (!valid) return props
 
-    return {
+    const _return = {
       ...props,
-      [_options.baseStyleProp]: newStyleProp,
+      [_options?.animated ? 'animate' : _options.baseStyleProp]: newStyleProp,
+    }
+
+    if (_options.animated && !!_options?.transition) {
+      _return.transition = JSON.parse(JSON.stringify({
+        [_options.adapt]: _options.transition,
+      }))
     }
+
+    return _return
   }
   return {
     keyboard,

package/src/utils/ModalManager/context.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { AnyFunction, onUpdate, TypeGuards, useCodeleapContext, useState } from '@codeleap/common'
 import { PortalProvider } from '@gorhom/portal'
-import { ModalProps } from '../../components/Modal'
+import { KeyboardProvider } from '../KeyboardAware'
 
 export type AppModalProps = {
   visible: boolean
@@ -136,23 +136,26 @@ export function Provider({ children }) {
     setModals(newModals)
   }
 
-  return <ModalContext.Provider value={{
-    state: modals,
-    toggleModal,
-    setModal,
-    currentModal,
-    attach,
-    isVisible,
-    remove,
-    transition,
-    transitionDuration: defaultDuration,
-
-  }}>
-    <PortalProvider>
-
-      {children}
-    </PortalProvider>
-  </ModalContext.Provider>
+  return <KeyboardProvider>
+    <ModalContext.Provider value={{
+      state: modals,
+      toggleModal,
+      setModal,
+      currentModal,
+      attach,
+      isVisible,
+      remove,
+      transition,
+      transitionDuration: defaultDuration,
+
+    }}>
+      <PortalProvider>
+
+        {children}
+      </PortalProvider>
+    </ModalContext.Provider>
+  </KeyboardProvider>
+
 }
 
 export function useModalContext() {

package/src/utils/index.ts

@@ -8,3 +8,4 @@ import * as Permissions from './PermissionManager'
 export { Permissions }
 export * from './KeyboardAware'
 export * from './input'
+export * from './theme'

package/src/utils/theme.ts

@@ -0,0 +1,50 @@
+import { Platform, Dimensions, StatusBar, StyleSheet } from 'react-native'
+
+export function getMobileThemeValues(initialWindowMetrics) {
+  const screenDimensions = Dimensions.get('screen')
+
+  const hasNotch = Platform.OS === 'ios' ? (Dimensions.get('window').height >= 812) : (initialWindowMetrics?.insets?.top > 24 || StatusBar.currentHeight > 24)
+  const bottomNavHeight = Platform.OS === 'android' ? initialWindowMetrics?.insets?.bottom : 0
+
+  const prefersConstantNavigationBar = bottomNavHeight > 0
+
+  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 : 20) : StatusBar.currentHeight
+
+  const safeAreaBottom = (hasNotch && !prefersConstantNavigationBar ? 20 : 0)
+  return {
+    ...screenDimensions,
+
+    pixel: StyleSheet.hairlineWidth,
+    hasNotch,
+    prefersConstantNavigationBar,
+    safeAreaTop,
+    safeAreaBottom,
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 57 : 47,
+    get headerHeight() { return 48 },
+    get tabBarHeight() { return 63 + (prefersConstantNavigationBar ? 0 : this.safeAreaBottom) },
+    bottomNavHeight,
+    get window() {
+      return {
+        height: screenDimensions.height - (bottomNavHeight + safeAreaTop),
+        width: screenDimensions.width,
+      }
+    },
+    transitions: {
+      modal: {
+        duration: 100,
+        type: 'timing',
+      },
+    },
+    buttons: {
+      small: {
+        height: 40,
+      },
+      default: {
+        height: 50,
+      },
+      large: {
+        height: 60,
+      },
+    },
+  } as const
+}