@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/patches/react-native-screens+4.25.2.patch

@@ -0,0 +1,118 @@
+diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt
+index 7aee121..9a3cc9b 100644
+--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt
++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt
+@@ -388,7 +388,7 @@ class ScreenStackFragment :
+         return sheetDelegate.createSheetExitAnimator(sheetAnimationContext)
+     }
+ 
+-    private fun createBottomSheetBehaviour(): BottomSheetBehavior<Screen> = BottomSheetBehavior<Screen>()
++    private fun createBottomSheetBehaviour(): BottomSheetBehavior<Screen> = ScrollAwareSheetBehavior<Screen>()
+ 
+     private fun resolveBackgroundColor(screen: Screen): Int? {
+         val screenColor =
+@@ -596,3 +596,48 @@ class ScreenStackFragment :
+         return bottomSheetWindowInsetListenerChain!!
+     }
+ }
++
++/**
++ * PATCHED (app-local): BottomSheetBehavior which hands the sheet over to a downward
++ * nested-scroll gesture only if that gesture started with the content already scrolled to the
++ * top. A drag that begins on scrolled-away content spends its full travel inside the scroll
++ * view (matching the iOS sheet behavior), so the sheet cannot be dismissed accidentally while
++ * scrolling the content up — dismissal requires a fresh swipe started at the top.
++ */
++private class ScrollAwareSheetBehavior<T : View> : BottomSheetBehavior<T>() {
++    private var canDragDownFromNestedScroll = true
++
++    override fun onStartNestedScroll(
++        coordinatorLayout: CoordinatorLayout,
++        child: T,
++        directTargetChild: View,
++        target: View,
++        axes: Int,
++        type: Int,
++    ): Boolean {
++        if (type == ViewCompat.TYPE_TOUCH) {
++            canDragDownFromNestedScroll = !target.canScrollVertically(-1)
++        }
++        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, axes, type)
++    }
++
++    override fun onNestedPreScroll(
++        coordinatorLayout: CoordinatorLayout,
++        child: T,
++        target: View,
++        dx: Int,
++        dy: Int,
++        consumed: IntArray,
++        type: Int,
++    ) {
++        if (type == ViewCompat.TYPE_TOUCH && target.canScrollVertically(-1)) {
++            // Контент прокручен внутри жеста — жест теряет право таскать лист до конца касания.
++            canDragDownFromNestedScroll = false
++        }
++        if (dy < 0 && !canDragDownFromNestedScroll && !target.canScrollVertically(-1)) {
++            // Глотаем handoff вниз: лист стоит на месте, контент показывает overscroll.
++            return
++        }
++        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type)
++    }
++}
+diff --git a/node_modules/react-native-screens/ios/RNSScreen.mm b/node_modules/react-native-screens/ios/RNSScreen.mm
+index 69d4d9a..7dd6164 100644
+--- a/node_modules/react-native-screens/ios/RNSScreen.mm
++++ b/node_modules/react-native-screens/ios/RNSScreen.mm
+@@ -191,6 +191,27 @@ RNS_IGNORE_SUPER_CALL_END
+   }
+ }
+ 
++// PATCHED (app-local): the frame correction below assumes the sheet's ScrollView is meant
++// to span the whole sheet. When the developer deliberately lays the scroll view out below
++// other in-flow content (e.g. an in-flow header), forcing the sheet frame onto it shifts
++// the content under that header and leaves an empty track at the bottom.
++//
++// The correction exists to keep the scroll view viewport in sync while the sheet resizes
++// (multiple detents / fitToContents), because for form sheets the JS side is deliberately
++// not notified about height changes. A sheet with a single fixed detent never resizes, so
++// for such sheets the correction is unnecessary — skip it when the developer also placed
++// in-flow content above the scroll view, and let React own the scroll view frame instead.
++- (BOOL)rnsAppShouldSkipFrameCorrectionForScrollView:(nonnull UIView *)scrollView
++{
++  const BOOL hasSingleFixedDetent =
++      _sheetAllowedDetents.count == 1 && _sheetAllowedDetents[0].intValue != SHEET_FIT_TO_CONTENTS;
++  if (!hasSingleFixedDetent || scrollView.superview == nil) {
++    return NO;
++  }
++  const CGPoint originInScreen = [scrollView.superview convertPoint:scrollView.frame.origin toView:self];
++  return originInScreen.y > 0.5;
++}
++
+ - (void)applyFrameCorrectionForDescendantScrollView
+ {
+   RNS_REACT_SCROLL_VIEW_COMPONENT *scrollView = [self tryFindDescendantScrollView];
+@@ -210,6 +231,11 @@ RNS_IGNORE_SUPER_CALL_END
+ - (void)correctScrollViewFrame:(nonnull RNS_REACT_SCROLL_VIEW_COMPONENT *)scrollViewComponent
+                     withHeader:(nullable UIView *)headerView
+ {
++  // PATCHED (app-local): respect React layout for scroll views placed below in-flow content.
++  if ([self rnsAppShouldSkipFrameCorrectionForScrollView:scrollViewComponent]) {
++    return;
++  }
++
+   RNSScreenContentWrapper *_Nullable contentWrapper = _contentWrapperBox.contentWrapper;
+   if (contentWrapper != nil && [contentWrapper coerceChildScrollViewComponentSizeToSize:self.frame.size]) {
+     return;
+@@ -230,6 +256,11 @@ RNS_IGNORE_SUPER_CALL_END
+     return;
+   }
+ 
++  // PATCHED (app-local): respect React layout for scroll views placed below in-flow content.
++  if ([self rnsAppShouldSkipFrameCorrectionForScrollView:scrollView]) {
++    return;
++  }
++
+   RNSScreenContentWrapper *_Nullable contentWrapper = _contentWrapperBox.contentWrapper;
+   if (contentWrapper != nil && [contentWrapper coerceChildScrollViewComponentSizeToSize:self.frame.size]) {
+     return;

package/react-query.d.ts

@@ -0,0 +1,13 @@
+import '@tanstack/react-query'
+
+declare module '@tanstack/react-query' {
+  type ApiQueryMeta = {
+    persist?: boolean
+    silent?: boolean
+  }
+
+  interface Register {
+    queryMeta: ApiQueryMeta
+    mutationMeta: ApiQueryMeta
+  }
+}

package/src/app/(root)/(home)/_layout.tsx

@@ -2,11 +2,11 @@ import { Stack } from 'expo-router'
 import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
 
 const Layout = () => {
-  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const { stackOptions, createScreenOptions } = useNavigationStackOptions()
   const t = useLocalizationText()
 
   return (
-    <Stack screenOptions={createStackOptions()}>
+    <Stack screenOptions={stackOptions}>
       <Stack.Screen name={'index'} options={createScreenOptions({ title: t('home.title') })} />
     </Stack>
   )

package/src/app/(root)/(home)/index.tsx

@@ -1,7 +1,7 @@
 import { HomeMain } from '~pages/home'
 
-const Screen = () => {
+const Page = () => {
   return <HomeMain />
 }
 
-export default Screen
+export default Page

package/src/app/(root)/(settings)/_layout.tsx

@@ -2,11 +2,11 @@ import { Stack } from 'expo-router'
 import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
 
 const Layout = () => {
-  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const { stackOptions, createScreenOptions } = useNavigationStackOptions()
   const t = useLocalizationText()
 
   return (
-    <Stack screenOptions={createStackOptions()}>
+    <Stack screenOptions={stackOptions}>
       <Stack.Screen name={'index'} options={createScreenOptions({ title: t('settings.title') })} />
     </Stack>
   )

package/src/app/(root)/(settings)/index.tsx

@@ -1,7 +1,7 @@
 import { SettingsMain } from '~pages/settings'
 
-const Screen = () => {
+const Page = () => {
   return <SettingsMain />
 }
 
-export default Screen
+export default Page

package/src/app/(root)/_layout.tsx

@@ -1,44 +1,47 @@
+import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
+import { Tabs } from 'expo-router'
 import { NativeTabs } from 'expo-router/build/native-tabs'
 import {
-  NavigationNativeTabsProvider,
-  useLocalizationText,
+  NavigationTabsNativeProvider,
+  NavigationTabsProvider,
+  useNavigationTabBarNativeOptions,
   useNavigationTabBarOptions,
 } from '~shared/lib'
+import { BarTabNavigation } from '~shared/ui'
 
 const Layout = () => {
-  const { createTabBarOptions, createTabOptions } = useNavigationTabBarOptions()
-  const t = useLocalizationText()
+  const { createTabBarOptions } = useNavigationTabBarOptions(BarTabNavigation)
+  const { createTabBarNativeOptions } = useNavigationTabBarNativeOptions()
 
-  const tabBarOptions = createTabBarOptions()
+  if (isGlassEffectAPIAvailable()) {
+    const tabBarNativeOptions = createTabBarNativeOptions()
 
-  const homeTabOptions = createTabOptions({
-    name: '(home)',
-    children: t('home.title'),
-    sf: 'house',
-    md: 'home',
-  })
+    return (
+      <NavigationTabsNativeProvider>
+        <NativeTabs {...tabBarNativeOptions}>
+          <NativeTabs.Trigger name={'(home)'}>
+            <NativeTabs.Trigger.Label>{'home'}</NativeTabs.Trigger.Label>
+            <NativeTabs.Trigger.Icon sf={'house'} md={'home'} />
+          </NativeTabs.Trigger>
+          <NativeTabs.Trigger name={'(settings)'}>
+            <NativeTabs.Trigger.Label>{'home'}</NativeTabs.Trigger.Label>
+            <NativeTabs.Trigger.Icon sf={'gear'} md={'settings'} />
+          </NativeTabs.Trigger>
+        </NativeTabs>
+      </NavigationTabsNativeProvider>
+    )
+  } else {
+    const tabBarOptions = createTabBarOptions()
 
-  const settingsTabOptions = createTabOptions({
-    name: '(settings)',
-    children: t('settings.title'),
-    sf: 'gear',
-    md: 'settings',
-  })
-
-  return (
-    <NavigationNativeTabsProvider>
-      <NativeTabs {...tabBarOptions}>
-        <NativeTabs.Trigger {...homeTabOptions.triggerProps}>
-          <NativeTabs.Trigger.Label {...homeTabOptions.triggerLabelProps} />
-          <NativeTabs.Trigger.Icon {...homeTabOptions.triggerIconProps} />
-        </NativeTabs.Trigger>
-        <NativeTabs.Trigger {...settingsTabOptions.triggerProps}>
-          <NativeTabs.Trigger.Label {...settingsTabOptions.triggerLabelProps} />
-          <NativeTabs.Trigger.Icon {...settingsTabOptions.triggerIconProps} />
-        </NativeTabs.Trigger>
-      </NativeTabs>
-    </NavigationNativeTabsProvider>
-  )
+    return (
+      <NavigationTabsProvider>
+        <Tabs {...tabBarOptions}>
+          <Tabs.Screen name={'(home)'} options={{ title: 'home' }} />
+          <Tabs.Screen name={'(settings)'} options={{ title: 'settings' }} />
+        </Tabs>
+      </NavigationTabsProvider>
+    )
+  }
 }
 
 export default Layout

package/src/pages/home/home-main.tsx

@@ -1,16 +1,12 @@
-import { Text } from 'react-native'
-import { useLocalizationText, useThemeMode } from '~shared/lib'
-import { ScreenContainerScroll } from '~shared/ui'
+import { useLocalizationText } from '~shared/lib'
+import { ScreenContainerScroll, Text } from '~shared/ui'
 
 const HomeMain = () => {
   const t = useLocalizationText()
-  const { COLORS } = useThemeMode()
 
   return (
     <ScreenContainerScroll>
-      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
-        {t('home.description')}
-      </Text>
+      <Text type={'h1'}>{t('home.description')}</Text>
     </ScreenContainerScroll>
   )
 }

package/src/pages/settings/settings-main.tsx

@@ -1,16 +1,12 @@
-import { Text } from 'react-native'
-import { useLocalizationText, useThemeMode } from '~shared/lib'
-import { ScreenContainerScroll } from '~shared/ui/templates'
+import { useLocalizationText } from '~shared/lib'
+import { ScreenContainerScroll, Text } from '~shared/ui'
 
 const SettingsMain = () => {
   const t = useLocalizationText()
-  const { COLORS } = useThemeMode()
 
   return (
     <ScreenContainerScroll>
-      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
-        {t('settings.description')}
-      </Text>
+      <Text type={'h1'}>{t('home.description')}</Text>
     </ScreenContainerScroll>
   )
 }

package/src/shared/assets/fonts/index.ts

@@ -1,7 +1,7 @@
 const FONTS = {
-  // BASE_MEDIUM: require('./manrope-medium.ttf'),
-  // BASE_SEMIBOLD: require('./manrope-semibold.ttf'),
-  // BASE_BOLD: require('./manrope-bold.ttf'),
+  BASE_REGULAR: require('./sf-pro-text-regular.ttf'),
+  BASE_SEMIBOLD: require('./sf-pro-text-semibold.ttf'),
+  BASE_BOLD: require('./sf-pro-text-bold.ttf'),
 }
 
 export { FONTS }

package/src/shared/assets/icons/back.tsx

@@ -0,0 +1,21 @@
+import { Svg } from 'react-native-svg'
+import { AnimatedPath } from './common'
+import { type IconProps } from './type'
+
+/** Иконка стрелки назад (влево). */
+const Back = ({ ref, style, size, color, animatedProps }: IconProps) => {
+  return (
+    <Svg ref={ref} width={size} height={size} viewBox={'0 0 24 24'} fill={'none'} style={style}>
+      <AnimatedPath
+        d={'M20 12.01L4 12.01M10.3904 6L4.00748 12L10.3904 18'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+    </Svg>
+  )
+}
+
+export default Back

package/src/shared/assets/icons/close.tsx

@@ -0,0 +1,21 @@
+import { Svg } from 'react-native-svg'
+import { AnimatedPath } from './common'
+import { type IconProps } from './type'
+
+/** Иконка крестика (закрыть). */
+const Close = ({ ref, style, size, color, animatedProps }: IconProps) => {
+  return (
+    <Svg ref={ref} width={size} height={size} viewBox={'0 0 24 24'} fill={'none'} style={style}>
+      <AnimatedPath
+        d={'M7 7L17 17M17 7L7 17'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+    </Svg>
+  )
+}
+
+export default Close

package/src/shared/assets/icons/common.ts

@@ -0,0 +1,8 @@
+import Animated from 'react-native-reanimated'
+import { Path, Rect } from 'react-native-svg'
+
+const AnimatedPath = Animated.createAnimatedComponent(Path)
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect)
+
+export { AnimatedPath, AnimatedRect }

package/src/shared/assets/icons/default.tsx

@@ -0,0 +1,44 @@
+import { Svg } from 'react-native-svg'
+import { AnimatedPath, AnimatedRect } from './common'
+import { type IconProps } from './type'
+
+const Default = ({ ref, style, size, color, animatedProps }: IconProps) => {
+  return (
+    <Svg ref={ref} width={size} height={size} viewBox={'0 0 24 24'} fill={'none'} style={style}>
+      <AnimatedRect
+        x={3}
+        y={4}
+        width={18}
+        height={16}
+        rx={2}
+        stroke={color}
+        strokeWidth={1.8}
+        animatedProps={animatedProps as any}
+      />
+      <AnimatedPath
+        d={'M4 17L8 13L11 16L14 13L20 19'}
+        stroke={color}
+        strokeWidth={1.8}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+      <AnimatedPath
+        d={'M15 9.5H15.01'}
+        stroke={color}
+        strokeWidth={2.2}
+        strokeLinecap={'round'}
+        animatedProps={animatedProps}
+      />
+      <AnimatedPath
+        d={'M5 5L19 19'}
+        stroke={color}
+        strokeWidth={1.8}
+        strokeLinecap={'round'}
+        animatedProps={animatedProps}
+      />
+    </Svg>
+  )
+}
+
+export default Default

package/src/shared/assets/icons/index.ts

@@ -1,3 +1,15 @@
-const ICONS = {}
+import back from './back.tsx'
+import close from './close.tsx'
+import DEFAULT from './default.tsx'
+import refresh from './refresh.tsx'
+import share from './share.tsx'
+
+const ICONS = {
+  back,
+  close,
+  refresh,
+  share,
+  default: DEFAULT,
+}
 
 export { ICONS }

package/src/shared/assets/icons/refresh.tsx

@@ -0,0 +1,23 @@
+import { Svg } from 'react-native-svg'
+import { AnimatedPath } from './common'
+import { type IconProps } from './type'
+
+/** Иконка обновления (круговая стрелка). */
+const Refresh = ({ ref, style, size, color, animatedProps }: IconProps) => {
+  return (
+    <Svg ref={ref} width={size} height={size} viewBox={'0 0 24 24'} fill={'none'} style={style}>
+      <AnimatedPath
+        d={
+          'M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C14.9611 4 17.6168 5.60879 19 8M19 4V8H15'
+        }
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+    </Svg>
+  )
+}
+
+export default Refresh

package/src/shared/assets/icons/share.tsx

@@ -0,0 +1,38 @@
+import { Svg } from 'react-native-svg'
+import { AnimatedPath } from './common'
+import { type IconProps } from './type'
+
+const Share = ({ ref, style, size, color, animatedProps }: IconProps) => {
+  return (
+    <Svg ref={ref} width={size} height={size} viewBox={'0 0 24 24'} fill={'none'} style={style}>
+      <AnimatedPath
+        d={
+          'M8 10H7C5.89543 10 5 10.8954 5 12V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V12C19 10.8954 18.1046 10 17 10H16'
+        }
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+      <AnimatedPath
+        d={'M12 14V3'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+      <AnimatedPath
+        d={'M8.5 6.5L12 3L15.5 6.5'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap={'round'}
+        strokeLinejoin={'round'}
+        animatedProps={animatedProps}
+      />
+    </Svg>
+  )
+}
+
+export default Share

package/src/shared/assets/icons/type.ts

@@ -1,6 +1,13 @@
+import { type Ref } from 'react'
+import type Svg from 'react-native-svg'
+import { type SvgProps } from 'react-native-svg'
+
 type IconProps = {
+  ref?: Ref<Svg>
+  style?: SvgProps['style']
   size?: number
   color?: string
+  animatedProps?: SvgProps
 }
 
 export type { IconProps }

package/src/shared/assets/translations/index.ts

@@ -1,9 +1,9 @@
-import EN from './en'
-import RU from './ru'
+import en from './en'
+import ru from './ru'
 
 const TRANSLATIONS = {
-  EN,
-  RU,
+  en,
+  ru,
 }
 
 export { TRANSLATIONS }

package/src/shared/constants/config.ts

@@ -0,0 +1,13 @@
+import { type NotNullable } from '@mediacubeco/base/types'
+import { isArray } from '@mediacubeco/base/utils'
+import Constants, { type NativeConstants } from 'expo-constants'
+
+const { scheme } = Constants.expoConfig ?? ({} as NotNullable<NativeConstants['expoConfig']>)
+
+const APP_SCHEME = isArray(scheme) ? scheme[0] : scheme
+
+if (!APP_SCHEME) {
+  throw new Error('APP_SCHEME is not set')
+}
+
+export { APP_SCHEME }

package/src/shared/constants/environment.ts

@@ -1,7 +1,19 @@
-const API_URL = process.env.EXPO_PUBLIC_API_URL as `https://${string}`
+const APP_URL = process.env.EXPO_PUBLIC_APP_URL
 
-if (!API_URL || !API_URL.startsWith('https://')) {
-  throw new Error(`API_URL is invalid: ${API_URL}`)
+if (!APP_URL || !APP_URL.startsWith('https://')) {
+  throw new Error(`APP_URL is invalid: ${APP_URL}`)
 }
 
-export { API_URL }
+const APP_URL_API = process.env.EXPO_PUBLIC_APP_URL_API
+
+if (!APP_URL_API || !APP_URL_API.startsWith('https://')) {
+  throw new Error(`APP_URL_API is invalid: ${APP_URL_API}`)
+}
+
+const APP_ID_STORAGE = process.env.EXPO_PUBLIC_APP_ID_STORAGE
+
+if (!APP_ID_STORAGE) {
+  throw new Error(`APP_ID_STORAGE is invalid: ${APP_ID_STORAGE}`)
+}
+
+export { APP_URL, APP_URL_API, APP_ID_STORAGE }

package/src/shared/constants/index.ts

@@ -1 +1,2 @@
+export * from './config'
 export * from './environment'

package/src/shared/hooks/index.ts

@@ -1,4 +1 @@
-export * from './use-animated'
-export * from './use-breakpoints'
-export * from './use-mixins'
-export * from './use-safe-area'
+export * from './use-compose'

package/src/shared/hooks/use-compose.ts

@@ -0,0 +1,23 @@
+import { type Nullable } from '@mediacubeco/base/types'
+import { type RefObject, useRef } from 'react'
+import { type SharedValue, useSharedValue } from 'react-native-reanimated'
+
+const useComposeRef = <Ref, InitValue extends Ref = Ref>(
+  ref: Nullable<RefObject<Ref>>,
+  initValue: InitValue = null as InitValue
+) => {
+  const defaultRef = useRef<Ref>(initValue)
+
+  return ref && 'current' in ref ? ref : defaultRef
+}
+
+const useComposeSharedValue = <Value, InitValue extends Value = Value>(
+  value: Nullable<SharedValue<Value>>,
+  initValue: InitValue = 0 as InitValue
+) => {
+  const defaultValue = useSharedValue<Value>(initValue)
+
+  return value && 'value' in value ? value : defaultValue
+}
+
+export { useComposeRef, useComposeSharedValue }