@codeleap/mobile 4.3.9 → 5.0.0

package/src/components/View/index.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View as RNView } from 'react-native'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import Animated from 'react-native-reanimated'
-import { ViewProps } from './types'
+import { ViewAnimatedProps, ViewProps } from './types'
 import { useStylesFor } from '../../hooks'
+import { useComponentTestId } from '@codeleap/hooks'
 
 export * from './types'
 export * from './styles'
 
-export const View = <T extends React.ComponentType = typeof RNView>(props: ViewProps<T>) => {
+export const View = forwardRef<RNView, ViewProps>((props, ref) => {
   const {
     style,
-    component: _Component = RNView,
     animated = false,
     animatedStyle,
     ...viewProps
@@ -20,15 +20,22 @@ export const View = <T extends React.ComponentType = typeof RNView>(props: ViewP
 
   const styles = useStylesFor(View.styleRegistryName, style)
 
-  const Component: React.ComponentType<AnyRecord> = animated ? Animated.View : _Component
+  const testId = useComponentTestId(View, props, ['style', 'children', 'animated'])
+
+  const Component: React.ComponentType<AnyRecord> = animated ? Animated.View : RNView
 
   return (
-    <Component {...viewProps} style={[styles.wrapper, animatedStyle]} />
+    <Component
+      testID={testId}
+      {...viewProps}
+      style={[styles.wrapper, animatedStyle]}
+      ref={ref}
+    />
   )
-}
+}) as StyledComponentWithProps<ViewProps> & { Animated?: (props: ViewAnimatedProps) => JSX.Element }
 
-View.Animated = (props: ViewProps<typeof Animated.View>) => {
-  return <View {...props} animated />
+View.Animated = (props: ViewAnimatedProps) => {
+  return <View {...props} />
 }
 
 View.styleRegistryName = 'View'
@@ -36,7 +43,7 @@ View.elements = ['wrapper']
 View.rootElement = 'wrapper'
 
 View.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return View as (<T extends React.ComponentType = typeof RNView>(props: StyledComponentProps<ViewProps<T>, typeof styles>) => IJSX)
+  return View as (props: StyledComponentProps<ViewProps, typeof styles>) => IJSX
 }
 
-MobileStyleRegistry.registerComponent(View)
+MobileStyleRegistry.registerComponent(View)

package/src/components/View/types.ts

@@ -1,13 +1,14 @@
-import { PropsOf } from '@codeleap/types'
 import { StyledProp } from '@codeleap/styles'
-import { ImageStyle, TextStyle, View as RNView, ViewStyle } from 'react-native'
-import { AnimatedStyleProp } from 'react-native-reanimated'
+import { ImageStyle, TextStyle, ViewProps as RNViewProps, ViewStyle } from 'react-native'
+import Animated, { AnimatedStyleProp } from 'react-native-reanimated'
 import { ViewComposition } from './styles'
+import { PropsOf } from '@codeleap/types'
 
-export type ViewProps<T extends React.ComponentType = typeof RNView> = {
-  component?: T
+export type ViewProps = Omit<RNViewProps, 'style'> & {
   style?: StyledProp<ViewComposition>
   animated?: boolean
   children?: React.ReactNode
   animatedStyle?: AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>
-} & PropsOf<T>
+}
+
+export type ViewAnimatedProps = ViewProps & Omit<PropsOf<typeof Animated.View>, 'style'>

package/src/components/components.ts

@@ -12,7 +12,6 @@ export * from './Select'
 export * from './FileInput'
 export * from './Slider'
 export * from './SegmentedControl'
-export * from './Navigation'
 export * from './Scroll'
 export * from './List'
 export * from './ActivityIndicator'
@@ -20,7 +19,6 @@ export * from './Button'
 export * from './Modal'
 export * from './Calendar'
 export * from './ImageView'
-export * from './Navigation'
 export * from './Pager'
 export * from './EmptyPlaceholder'
 export * from './Backdrop'

package/src/hooks/index.ts

@@ -1,13 +1,3 @@
-import { StyleProp, useStyleObserver } from '@codeleap/styles'
-import { useMemo } from 'react'
-import { MobileStyleRegistry } from '../Registry'
-
-export const useStylesFor = <T = unknown>(componentName: string, style: StyleProp<T, string>): T => {
-  const styleObserver = useStyleObserver(style)
-
-  const styles = useMemo(() => {
-    return MobileStyleRegistry.current.styleFor(componentName, style)
-  }, [styleObserver])
-
-  return styles
-}
+export * from './useStylesFor'
+export * from './useStatusBar'
+export * from './useKeyboardController'

package/src/hooks/useKeyboardController.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { KeyboardEvents } from 'react-native-keyboard-controller'
+
+type KeyboardControllerState = {
+  height: number
+  isVisible: boolean
+}
+
+export function useKeyboardController() {
+  const [keyboardState, setKeyboardState] = useState<KeyboardControllerState>({ isVisible: false, height: 0 })
+
+  useEffect(() => {
+    const show = KeyboardEvents.addListener('keyboardWillShow', event => {
+      setKeyboardState({ isVisible: true, height: event?.height })
+    })
+
+    const hide = KeyboardEvents.addListener('keyboardWillHide', event => {
+      setKeyboardState(prev => ({ isVisible: false, height: prev?.height }))
+    })
+
+    return () => {
+      show.remove()
+      hide.remove()
+    }
+  }, [])
+
+  return keyboardState
+}

package/src/hooks/useStatusBar.ts

@@ -0,0 +1,21 @@
+import { useIsFocused } from '@react-navigation/native'
+import { useLayoutEffect } from '@codeleap/hooks'
+import { StatusBar, StatusBarStyle } from 'react-native'
+
+type UseStatusBarOptions = {
+  statusBarColor?: StatusBarStyle
+}
+
+export function useStatusBar({ statusBarColor }: UseStatusBarOptions) {
+  const focused = useIsFocused()
+
+  useLayoutEffect(() => {
+    if (!focused || !statusBarColor) return
+
+    const statusBarEntry = StatusBar.pushStackEntry({ barStyle: statusBarColor })
+    
+    return () => {
+      StatusBar.popStackEntry(statusBarEntry)
+    }
+  }, [statusBarColor, focused])
+}

package/src/hooks/useStylesFor.ts

@@ -0,0 +1,13 @@
+import { StyleProp, useStyleObserver } from '@codeleap/styles'
+import { useMemo } from 'react'
+import { MobileStyleRegistry } from '../Registry'
+
+export const useStylesFor = <T = unknown>(componentName: string, style?: StyleProp<T, string>): T => {
+  const styleObserver = useStyleObserver(style)
+
+  const styles = useMemo(() => {
+    return MobileStyleRegistry.current.styleFor(componentName, style)
+  }, [styleObserver])
+
+  return styles
+}

package/src/index.ts

@@ -1,7 +1,9 @@
 export * from './components/components'
-export { Linking } from 'react-native'
 export * from './utils'
 export * from './hooks'
+export * from './modules'
+
+export { Linking } from 'react-native'
 import uuid from 'react-native-uuid'
 import * as RNKeyboardAwareScrollView from './utils/KeyboardAware'
 export { uuid, RNKeyboardAwareScrollView }

package/src/modules/backgroundTimer.ts

@@ -0,0 +1,39 @@
+import { AnyFunction } from '@codeleap/types'
+import BackgroundTimer from '@boterop/react-native-background-timer'
+import { uuid } from '..'
+
+const throttleTimerId = {}
+
+export function throttle(func:AnyFunction, ref?: string, delay = 200) {
+  if (!ref) {
+    ref = uuid.v4() as string
+  }
+  if (throttleTimerId[ref]) {
+    return
+  }
+  throttleTimerId[ref] = BackgroundTimer.setTimeout(function () {
+    func()
+    throttleTimerId[ref] = undefined
+  }, delay)
+
+  return ref
+}
+
+const debounceTimerId = {}
+
+export function debounce(func:AnyFunction, ref?: string, delay = 200) {
+  if (!ref) {
+    ref = uuid.v4() as string
+  }
+
+  if (debounceTimerId[ref]) {
+    BackgroundTimer.clearTimeout(debounceTimerId[ref])
+  }
+
+  debounceTimerId[ref] = BackgroundTimer.setTimeout(function () {
+    func()
+    debounceTimerId[ref] = undefined
+  }, delay)
+
+  return ref
+}

package/src/modules/index.ts

@@ -0,0 +1,3 @@
+export * from './reactNavigation'
+export * from './backgroundTimer'
+export type { Scrollable } from './scroll'

package/src/modules/reactNavigation.ts

@@ -1,14 +1,64 @@
-import React from 'react'
-export { createStackNavigator } from '@react-navigation/stack'
-export { createDrawerNavigator } from '@react-navigation/drawer'
-export { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import { NavigationContainerRefContext, NavigationContext } from '@react-navigation/core'
-export { useIsFocused } from '@react-navigation/native'
-
-export function useNavigationContext() {
-  const root = React.useContext(NavigationContainerRefContext)
-  const navigation = React.useContext(NavigationContext)
-  if (!navigation && !root) return undefined
-
-  return (navigation ?? root)
-}
+import { AnyRecord } from '@codeleap/types'
+import { deepMerge } from '@codeleap/utils'
+import { createPathConfigForStaticNavigation } from '@react-navigation/native'
+
+type TreeStack = Parameters<typeof createPathConfigForStaticNavigation>[0]
+
+/**
+ * Extracts screen options from a static navigation tree, consolidating default, group, 
+ * and individual screen options into a single object. Supports nested navigators.
+ */
+export function staticNavigationExtractOptions(stack: TreeStack) {
+  const { config } = stack
+
+  // @ts-ignore
+  const defaultOptions = config.screenOptions
+
+  let result = {}
+
+  function extractScreens(screens: TreeStack['config'], groupKey: string | null, groupOptions: AnyRecord) {
+    let screenResults = {}
+
+    for (const screenKey in screens) {
+      const screen = screens[screenKey]
+
+      const key = groupKey ? `${groupKey}.${screenKey}` : screenKey
+
+      const isComponentInstance = typeof screen !== 'object'
+
+      const defaultScreenOptions = deepMerge(defaultOptions, groupOptions)
+
+      if (isComponentInstance) {
+        screenResults[key] = defaultScreenOptions
+        continue
+      }
+
+      const screenOptions = deepMerge(defaultScreenOptions, screen.options)
+
+      const isNavigationInstance = !!screen?.screen?.config?.screens
+
+      if (isNavigationInstance) {
+        screenResults = deepMerge(
+          screenResults,
+          extractScreens(screen?.screen?.config?.screens, null, screenOptions)
+        )
+        continue
+      }
+
+      screenResults[key] = screenOptions
+    }
+
+    return screenResults
+  }
+
+  for (const groupKey in config.groups) {
+    const group = config.groups[groupKey]
+
+    // @ts-ignore
+    const groupOptions = group.screenOptions
+
+    result = deepMerge(result, extractScreens(group.screens, null, groupOptions))
+  }
+
+  return result
+}

package/src/modules/scroll.tsx

@@ -0,0 +1,89 @@
+import React, { MutableRefObject, useCallback, useContext, useImperativeHandle, useRef } from 'react'
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, ScrollViewProps } from "react-native"
+
+const scrollProperties = [
+   'scrollTo',
+] satisfies (keyof ScrollView)[]
+
+type ScrollProperty = (typeof scrollProperties)[number]
+
+type ScrollEvents = Pick<ScrollViewProps, 'onMomentumScrollEnd'>
+
+export type Scrollable = Pick<ScrollView, ScrollProperty> & {
+  subscribe<T extends keyof ScrollEvents>(e: T, cb: ScrollEvents[T]): () => void
+}
+
+type ScrollRef = React.MutableRefObject<Scrollable>
+
+type ScrollContextValue = {
+  ref: ScrollRef
+}
+
+const noOpScrollMethods = Object.fromEntries(
+  scrollProperties.map(p => [p, () => {
+    console.warn(`"${p}" was called from a ScrollProvider ref without a bound scrollable component. This does not cause errors but may impact user experience and indicate an unhandled edge case in calling code`)
+  }])
+)
+
+const noOpScrollable = {
+  ...noOpScrollMethods,
+  subscribe(e, cb){
+    return () => {}
+  }
+}  as Scrollable
+
+const ScrollContext = React.createContext({} as ScrollContextValue)
+
+export const useScrollPubSub = (ref: MutableRefObject<Omit<Scrollable,'subscribe'>>) => {
+  const listeners = useRef(new Map())
+
+  const augmentedRef = useRef<Scrollable>()
+
+  const emit = useCallback((event: keyof ScrollEvents, e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    listeners.current.forEach((cb, key) => {
+      if(key.startsWith(`${event}-`)){
+        cb(e)
+      }
+    })
+  }, [])
+
+  useImperativeHandle(augmentedRef, () => ({
+    scrollTo(...args){
+      console.log(ref.current)
+      ref?.current.scrollTo(...args)
+    },
+    subscribe(e, cb){
+      const id = `${e}-${listeners.current.size}`
+
+      listeners.current.set(id, cb)
+      
+      return () => {
+        listeners.current.delete(id)
+      }
+    }
+  }), [ref])
+
+  return {
+    ref: augmentedRef,
+    emit
+  }
+}
+
+
+export const ScrollProvider = React.forwardRef<Scrollable, React.PropsWithChildren>(({children}, ref) => {
+  return <ScrollContext.Provider value={{ ref: ref as ScrollRef }}>
+    {children}
+  </ScrollContext.Provider>
+})
+
+export function useWrappingScrollable(){
+  const ctx = useContext(ScrollContext)
+
+  if(!ctx){
+    return {
+      current: noOpScrollable
+    }
+  }
+  
+  return ctx.ref
+}

package/src/modules/types/textInputMask.ts

@@ -1,9 +1,13 @@
-import { FormTypes } from '@codeleap/form'
+import { RNMaskedTextTypes } from '@codeleap/types'
 import { TextInputProps } from 'react-native'
 
 import { TextInputMaskProps as RNTextInputMaskProps } from 'react-native-masked-text'
 
-export type TextInputMaskProps =Omit<RNTextInputMaskProps, keyof TextInputProps > & {
-    masking: FormTypes.TextField['masking']
-    onChangeText: RNTextInputMaskProps['onChangeText']
+type Mask = Partial<RNMaskedTextTypes.TextInputMaskProps> & {
+  saveFormatted?: boolean
+}
+
+export type TextInputMaskProps = Omit<RNTextInputMaskProps, keyof TextInputProps> & {
+  masking: Mask
+  onChangeText: RNTextInputMaskProps['onChangeText']
 }

package/src/types/index.ts

@@ -1,5 +1,6 @@
 export * from './utility'
 
+
 export type ComponentWithDefaultProps<P = any> = ((props: P) => JSX.Element) & {
   defaultProps: Partial<P>
 }

package/src/utils/KeyboardAware/context.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useSoftInputState } from 'react-native-avoid-softinput'
+import { useKeyboardController } from '../../hooks'
 
 type TKeyboardCtx = {
   isVisible: boolean
@@ -17,9 +17,5 @@ export const KeyboardProvider = ({ children }) => {
 }
 
 export const useKeyboard = (): TKeyboardCtx => {
-  const state = useSoftInputState()
-  return {
-    isVisible: state.isSoftInputShown,
-    height: state.softInputHeight,
-  }
+  return useKeyboardController()
 }

package/src/utils/KeyboardAware/index.ts

@@ -1,4 +1,4 @@
 
 export * from './keyboardHooks'
 export * from './context'
-export * from './types'
+ 

package/src/utils/ModalManager/context.tsx

@@ -44,7 +44,7 @@ export function Provider({ children }) {
     const newVisible = typeof set === 'boolean' ? set : !visible
 
     setModals((current) => {
-      const attached = newVisible ? [] : current[name].attachments.map(m => [m, { ...current[m], visible: false }])
+      const attached = newVisible ? [] : current[name]?.attachments?.map?.(m => [m, { ...current[m], visible: false }])
       return {
         ...current,
         [name]: {
@@ -52,7 +52,7 @@ export function Provider({ children }) {
           visible: newVisible,
           props,
         },
-        ...Object.fromEntries(attached),
+        ...Object.fromEntries(attached ?? []),
       }
 
     })

package/src/utils/hooks.ts

@@ -4,9 +4,9 @@ import { TypeGuards } from '@codeleap/types'
 import { Animated, AppState, AppStateStatus, Platform, BackHandler, ViewStyle, ImageStyle, TextStyle, StyleSheet, StyleProp } from 'react-native'
 import { AnimatedStyleProp, Easing, EasingFn, useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { PressableRippleProps } from '../modules/PressableRipple/type'
-import { useSoftInputState } from 'react-native-avoid-softinput'
 import { useMemo } from 'react'
 import { mergeStyles } from '@codeleap/styles'
+import { useKeyboardController } from '../hooks'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -307,7 +307,7 @@ export function useBackButton(cb: () => boolean|void, deps = []) {
 }
 
 export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
-  const { isSoftInputShown, softInputHeight } = useSoftInputState()
+  const { isVisible, height } = useKeyboardController()
 
   const propStyle = useMemo(() => {
     return StyleSheet.flatten(styles)
@@ -315,7 +315,7 @@ export function useKeyboardPaddingStyle(styles: ViewStyle[], enabled = true) {
 
   const bottomPadding = propStyle && TypeGuards.isNumber(propStyle.paddingBottom) ? propStyle.paddingBottom : 0
 
-  const totalPadding = softInputHeight + bottomPadding
+  const totalPadding = height + bottomPadding
 
-  return isSoftInputShown && enabled ? mergeStyles([propStyle, { paddingBottom: totalPadding }]) : propStyle
+  return isVisible && enabled ? mergeStyles([propStyle, { paddingBottom: totalPadding }]) : propStyle
 }

package/src/utils/locale.ts

@@ -1,7 +1,15 @@
-import { NativeModules, Platform } from 'react-native'
+import { findBestLanguageTag, getLocales } from 'react-native-localize'
 
-export const getDeviceLocale = (): string => Platform.OS === 'ios'
-  ? NativeModules.SettingsManager.settings.AppleLocale ||
-      NativeModules.SettingsManager.settings.AppleLanguages[0]
-  : NativeModules.I18nManager.localeIdentifier
+export function getDeviceLocale(dictionary: Record<string, any>, defaultLocale: string) {
+  const deviceLocales = getLocales().map(locale => locale?.languageTag)
 
+  const dictionaryLocales = Object.keys(dictionary)
+
+  const possibleLocales = [...new Set([...dictionaryLocales, ...deviceLocales])]
+
+  const bestLocale = findBestLanguageTag(possibleLocales)
+
+  if (!bestLocale) return defaultLocale
+
+  return bestLocale?.languageTag
+}

package/src/utils/theme.ts

@@ -2,20 +2,24 @@ import { Platform, Dimensions, StyleSheet } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 
 type Options = {
+  statusBarHeight?: number
   getStatusBarHeight?: () => number
   getAndroidNavbarHeight?: () => number
 }
 
 export function getMobileThemeValues(initialWindowMetrics, options: Options = {}) {
+  const { statusBarHeight, getStatusBarHeight, getAndroidNavbarHeight } = options
+
   const screenDimensions = Dimensions.get('screen')
 
   const hasNotch = DeviceInfo.hasNotch()
   const hasIsland = DeviceInfo.hasDynamicIsland()
-  const bottomNavHeight = Platform.OS === 'android' ? options?.getAndroidNavbarHeight?.() ?? 0 : 0
+  const bottomNavHeight = Platform.OS === 'android' ? getAndroidNavbarHeight?.() ?? 0 : 0
 
   const prefersConstantNavigationBar = bottomNavHeight > 0
 
-  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : (options?.getStatusBarHeight?.() || 0)
+  const currStatusBarHeight = typeof statusBarHeight === 'number' ? statusBarHeight : getStatusBarHeight?.() || 0
+  const safeAreaTop = Platform.OS === 'ios' ? (hasNotch ? 34 + (hasIsland ? 12 : 0) : 20) : currStatusBarHeight
 
   const safeAreaBottom = Platform.select({
     ios: hasNotch && !prefersConstantNavigationBar ? 20 : 0,

package/dist/components/Navigation/Navigation.d.ts

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { NavigationProps } from './types';
-export declare const Navigation: <T extends keyof {
-    Drawer: {
-        Navigator: React.ComponentType<Omit<any, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
-            id?: string;
-            children: React.ReactNode;
-            screenListeners?: Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }> | ((props: {
-                route: import("@react-navigation/core").RouteProp<any, string>;
-                navigation: any;
-            }) => Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }>);
-            screenOptions?: any;
-        }>;
-        Group: React.ComponentType<import("@react-navigation/core").RouteGroupConfig<any, any>>;
-        Screen: <RouteName extends string | number | symbol>(_: import("@react-navigation/core").RouteConfig<any, RouteName, any, any, any>) => null;
-    };
-    Stack: {
-        Navigator: React.ComponentType<Omit<any, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
-            id?: string;
-            children: React.ReactNode;
-            screenListeners?: Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }> | ((props: {
-                route: import("@react-navigation/core").RouteProp<any, string>;
-                navigation: any;
-            }) => Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }>);
-            screenOptions?: any;
-        }>;
-        Group: React.ComponentType<import("@react-navigation/core").RouteGroupConfig<any, any>>;
-        Screen: <RouteName extends string | number | symbol>(_: import("@react-navigation/core").RouteConfig<any, RouteName, any, any, any>) => null;
-    };
-    Tab: {
-        Navigator: React.ComponentType<Omit<any, "children" | "id" | "initialRouteName" | "screenListeners" | "screenOptions"> & import("@react-navigation/routers").DefaultRouterOptions<string> & {
-            id?: string;
-            children: React.ReactNode;
-            screenListeners?: Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }> | ((props: {
-                route: import("@react-navigation/core").RouteProp<any, string>;
-                navigation: any;
-            }) => Partial<{
-                [x: string]: import("@react-navigation/core").EventListenerCallback<any, string>;
-            }>);
-            screenOptions?: any;
-        }>;
-        Group: React.ComponentType<import("@react-navigation/core").RouteGroupConfig<any, any>>;
-        Screen: <RouteName extends string | number | symbol>(_: import("@react-navigation/core").RouteConfig<any, RouteName, any, any, any>) => null;
-    };
-}>({ type, scenes, ...props }: NavigationProps<T>) => JSX.Element;

package/dist/components/Navigation/Navigation.js

@@ -1,41 +0,0 @@
-// @ts-nocheck
-import * as React from 'react';
-import { TypeGuards, } from '@codeleap/types';
-import { Icon } from '../Icon';
-import { Navigators } from './constants';
-export const Navigation = ({ type, scenes, ...props }) => {
-    const NavigationComponent = Navigators[type];
-    // console.log('render Navigation', { type, scenes, props, defaultProps })
-    return <NavigationComponent.Navigator {...props}>
-    {Object.entries(scenes).map(([name, content], idx) => {
-            const isFunction = TypeGuards.isFunction(content);
-            let screenProps = {
-                name,
-            };
-            if (isFunction) {
-                screenProps.component = content;
-                // console.log('Render NavigationScreen', { scenes, screenProps, content, isFunction }, 'PACKAGES')
-            }
-            else {
-                screenProps.component = content?.component?.default || content?.component || content?.default;
-                const nameParts = name.split('.');
-                const title = content?.title || nameParts[nameParts.length - 1] || name.replace('.', '');
-                screenProps = {
-                    ...screenProps,
-                    options: (optionProps) => ({
-                        title,
-                        tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>,
-                        tabIcon: content?.icon,
-                        tabBarIconFocused: content?.iconFocused ? (style) => <Icon name={content?.iconFocused} style={style}/> : null,
-                        ...(TypeGuards.isFunction(content.options) ? content.options(optionProps) : content.options),
-                    }),
-                };
-                // console.log('Render NavigationScreen loop', { scenes, screenProps, content, title, isFunction, props }, 'PACKAGES')
-            }
-            return (
-            // @ts-ignore
-            <NavigationComponent.Screen key={idx} {...screenProps}/>);
-        })}
-  </NavigationComponent.Navigator>;
-};
-//# sourceMappingURL=Navigation.js.map