rn-vs-lb 1.0.57 → 1.0.58

package/components/Modals/GuestAiChatModal.stories.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Button, FlatList, View } from 'react-native';
+import GuestAiChatModalView, { type PureChatMessage } from './GuestAiChatModal';
+import appTheme, { SIZES } from '../../theme/theme';
+import { getTypography } from '../../theme/styles/styleSheet';
+
+type GuestAiChatProps = React.ComponentProps<typeof GuestAiChatModalView>;
+
+const theme = appTheme.lightTheme;
+const typography = getTypography(theme);
+
+const sampleMessages: PureChatMessage[] = [
+  { id: '1', role: 'assistant', content: 'Привет! Я помогу найти событие мечты.' },
+  { id: '2', role: 'user', content: 'Покажи вечеринки на выходных.' },
+  {
+    id: '3',
+    role: 'assistant',
+    content:
+      'Вот несколько вариантов: концерт в субботу, гастрономический фестиваль и выставка.\nВведите уточнение, чтобы подобрать лучше.',
+  },
+];
+
+const meta = {
+  title: 'Modals/GuestAiChatModal',
+  component: GuestAiChatModalView,
+  argTypes: {
+    onClose: { action: 'close modal' },
+    onSend: { action: 'send message' },
+    onChangeInput: { action: 'change input' },
+    listRef: {
+      table: {
+        disable: true,
+      },
+    },
+    theme: { table: { disable: true } },
+    typography: { table: { disable: true } },
+    sizes: { table: { disable: true } },
+  },
+  args: {
+    visible: true,
+    botName: 'AI гид',
+    messages: sampleMessages,
+    inputValue: '',
+    error: null,
+    isSending: false,
+    limit: 10,
+    remaining: 10,
+    theme,
+    typography,
+    sizes: SIZES,
+  },
+  decorators: [
+    (StoryComponent) => (
+      <View
+        style={{
+          flex: 1,
+          minHeight: 640,
+          justifyContent: 'flex-end',
+          backgroundColor: '#0b0b0b55',
+          paddingBottom: 24,
+        }}
+      >
+        <StoryComponent />
+      </View>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Guest chat modal that lets unauthorised users ask AI-powered questions before signing in.',
+      },
+    },
+  },
+} satisfies Meta<typeof GuestAiChatModalView>;
+
+export default meta;
+
+const Template: StoryFn<GuestAiChatProps> = (args) => {
+  const { onClose, onSend, ...rest } = args;
+
+  const [isVisible, setIsVisible] = React.useState(rest.visible);
+  const [inputValue, setInputValue] = React.useState(rest.inputValue);
+  const [messages, setMessages] = React.useState<PureChatMessage[]>(rest.messages);
+  const [remaining, setRemaining] = React.useState(rest.remaining);
+  const [isSending, setIsSending] = React.useState(rest.isSending);
+  const listRef = React.useRef<FlatList<PureChatMessage>>(null);
+
+  React.useEffect(() => {
+    setIsVisible(rest.visible);
+  }, [rest.visible]);
+
+  React.useEffect(() => {
+    setInputValue(rest.inputValue);
+  }, [rest.inputValue]);
+
+  React.useEffect(() => {
+    setMessages(rest.messages);
+  }, [rest.messages]);
+
+  React.useEffect(() => {
+    setRemaining(rest.remaining);
+  }, [rest.remaining]);
+
+  React.useEffect(() => {
+    setIsSending(rest.isSending);
+  }, [rest.isSending]);
+
+  const handleClose = React.useCallback(() => {
+    setIsVisible(false);
+    onClose();
+  }, [onClose]);
+
+  const handleSend = React.useCallback(() => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) return;
+
+    setIsSending(true);
+    onSend();
+
+    const userMessage: PureChatMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: trimmed,
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+    setRemaining((prev) => (prev === undefined ? prev : Math.max(prev - 1, 0)));
+
+    setTimeout(() => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: `Я сохранил ваш запрос: "${trimmed}". Скоро пришлю подборку!`,
+        },
+      ]);
+      listRef.current?.scrollToEnd({ animated: true });
+      setIsSending(false);
+    }, 600);
+  }, [inputValue, onSend]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ marginBottom: 12, alignItems: 'center' }}>
+        <Button
+          title={isVisible ? 'Скрыть модалку' : 'Показать модалку'}
+          onPress={() => setIsVisible((prev) => !prev)}
+        />
+      </View>
+      <GuestAiChatModalView
+        {...rest}
+        visible={isVisible}
+        messages={messages}
+        inputValue={inputValue}
+        remaining={remaining}
+        isSending={isSending}
+        onClose={handleClose}
+        onSend={handleSend}
+        onChangeInput={setInputValue}
+        listRef={listRef}
+      />
+    </View>
+  );
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+  visible: false,
+  remaining: 5,
+};
+
+export const DefaultOpen: StoryFn<GuestAiChatProps> = (args) => Template({ ...args, visible: true });
+DefaultOpen.args = {
+  visible: true,
+};
+
+export const WithErrorState: StoryFn<GuestAiChatProps> = (args) => (
+  <GuestAiChatModalView
+    {...args}
+    visible
+    error="Не удалось подключиться к боту, попробуйте снова."
+    messages={args.messages}
+    inputValue={args.inputValue}
+    onChangeInput={args.onChangeInput ?? (() => undefined)}
+    onSend={args.onSend ?? (() => undefined)}
+    listRef={React.createRef()}
+  />
+);
+WithErrorState.args = {
+  inputValue: 'Сообщение',
+  isSending: false,
+};
+WithErrorState.parameters = {
+  controls: {
+    exclude: ['listRef', 'onChangeInput', 'onSend'],
+  },
+};

package/components/Modals/GuestAiChatModal.tsx

@@ -0,0 +1,249 @@
+import React, { FC, memo, RefObject, useMemo } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { ThemeType, SizesType, TypographytType } from '../../theme';
+
+export type PureChatMessage = {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+};
+
+export type GuestAiChatViewProps = {
+  visible: boolean;
+  onClose: () => void;
+  botName?: string;
+
+  // данные
+  messages: PureChatMessage[];
+  inputValue: string;
+  error: string | null;
+  isSending: boolean;
+  limit?: number;
+  remaining?: number;
+
+  // экшены
+  onChangeInput: (v: string) => void;
+  onSend: () => void;
+
+  // ссылки
+  listRef: RefObject<FlatList<PureChatMessage>>;
+
+  // тема
+  theme: ThemeType;
+  typography: TypographytType;
+  sizes: SizesType;
+};
+
+export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
+  ({
+    visible,
+    onClose,
+    botName,
+    messages,
+    inputValue,
+    error,
+    isSending,
+    limit,
+    remaining,
+    onChangeInput,
+    onSend,
+    listRef,
+    theme,
+    typography,
+    sizes,
+  }) => {
+    const isAndroid = Platform.OS === 'android';
+    const styles = useMemo(() => getStyles(theme, isAndroid), [theme, isAndroid]);
+
+    const disabled =
+      isSending || !inputValue.trim() || (remaining !== undefined && remaining <= 0);
+
+    const renderItem = ({ item }: { item: PureChatMessage }) => {
+      const isUser = item.role === 'user';
+      return (
+        <View style={[styles.messageRow, isUser ? styles.rowEnd : styles.rowStart]}>
+          <View style={[styles.messageBubble, isUser ? styles.userBubble : styles.botBubble]}>
+            <Text style={[typography.body, isUser ? styles.userText : styles.botText]}>
+              {item.content}
+            </Text>
+          </View>
+        </View>
+      );
+    };
+
+    return (
+      <Modal visible={visible} animationType="slide" onRequestClose={onClose} transparent>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          style={styles.centered}
+        >
+          <View style={styles.modalContainer}>
+            <View style={styles.header}>
+              <View>
+                <Text style={typography.titleH6}>{botName || 'AI-бот'}</Text>
+                {limit !== undefined && remaining !== undefined && (
+                  <Text style={styles.limitText}>
+                    Осталось сообщений: {remaining} / {limit}
+                  </Text>
+                )}
+              </View>
+              <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                <Ionicons name="close" size={sizes.md} color={theme.text} />
+              </TouchableOpacity>
+            </View>
+
+            <FlatList
+              ref={listRef}
+              data={messages}
+              keyExtractor={(item) => item.id}
+              renderItem={renderItem}
+              contentContainerStyle={styles.messagesContainer}
+              showsVerticalScrollIndicator={false}
+            />
+
+            {error ? <Text style={styles.errorText}>{error}</Text> : null}
+
+            <View style={styles.inputRow}>
+              <TextInput
+                style={styles.input}
+                placeholder="Спросите что-нибудь..."
+                placeholderTextColor={theme.greyText}
+                value={inputValue}
+                onChangeText={onChangeInput}
+                editable={!isSending && (remaining === undefined || remaining > 0)}
+                multiline
+              />
+              <TouchableOpacity
+                onPress={onSend}
+                style={[styles.sendButton, disabled && styles.sendButtonDisabled]}
+                disabled={disabled}
+              >
+                {isSending ? (
+                  <ActivityIndicator color={theme.white} />
+                ) : (
+                  <Ionicons name="send" size={18} color={theme.white} />
+                )}
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  }
+);
+
+const getStyles = (theme: ThemeType, isAndroid: boolean) =>
+  StyleSheet.create({
+    centered: {
+      flex: 1,
+      backgroundColor: theme.backgroundSemiTransparent,
+      justifyContent: 'flex-end',
+    },
+    modalContainer: {
+      backgroundColor: theme.white,
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      paddingHorizontal: 16,
+      paddingTop: 16,
+      paddingBottom: 24 + (isAndroid ? 25 : 0),
+      maxHeight: '85%',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 12,
+    },
+    closeButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.background,
+    },
+    limitText: {
+      marginTop: 4,
+      fontSize: 12,
+      color: theme.greyText,
+    },
+    messagesContainer: {
+      paddingBottom: 12,
+    },
+    messageRow: {
+      flexDirection: 'row',
+      marginBottom: 8,
+    },
+    rowEnd: {
+      justifyContent: 'flex-end',
+    },
+    rowStart: {
+      justifyContent: 'flex-start',
+    },
+    messageBubble: {
+      maxWidth: '85%',
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: 12,
+    },
+    userBubble: {
+      backgroundColor: theme.primary,
+      borderBottomRightRadius: 2,
+    },
+    botBubble: {
+      backgroundColor: theme.background,
+      borderBottomLeftRadius: 2,
+    },
+    userText: {
+      color: theme.white,
+    },
+    botText: {
+      color: theme.text,
+    },
+    inputRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      marginTop: 8,
+    },
+    input: {
+      flex: 1,
+      minHeight: 40,
+      maxHeight: 120,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      borderRadius: 12,
+      backgroundColor: theme.background,
+      color: theme.text,
+    },
+    sendButton: {
+      width: 42,
+      height: 42,
+      borderRadius: 21,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.primary,
+      marginLeft: 8,
+    },
+    sendButtonDisabled: {
+      opacity: 0.5,
+    },
+    errorText: {
+      color: theme.danger || '#E53935',
+      marginBottom: 4,
+      fontSize: 12,
+    },
+  });
+
+export default GuestAiChatModalView;

package/components/Profile/ProfileCard/ProfileCard.tsx

@@ -155,10 +155,10 @@ export default function PureProfileCard(props: PureProfileCardProps) {
       )}
 
       {/* learn more */}
-      <TouchableOpacity onPress={onLearnMorePress} style={globalStyleSheet.flexRowCenter}>
+      {onLearnMorePress && <TouchableOpacity onPress={onLearnMorePress} style={globalStyleSheet.flexRowCenter}>
         <MaterialIcons color={theme.placeholder} name="info-outline" size={18} />
         <Text style={[typography.body, styles.learnMoreText]}>Learn more</Text>
-      </TouchableOpacity>
+      </TouchableOpacity>}
 
       {/* CTA */}
       {isAuth && !isMe && (
@@ -177,7 +177,7 @@ export default function PureProfileCard(props: PureProfileCardProps) {
         </View>
       )}
 
-      {isMe && (
+      {(isMe && onOpenCreatePoll || isMe && onOpenCreateEvent) &&(
         <View style={styles.buttonsRow}>
           {onOpenCreatePoll && (
             <TouchableOpacity style={styles.btnOutline} onPress={onOpenCreatePoll}>

package/components/UI/TabBar/TabBarAi.stories.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import TabBarAi, { type TabItem } from './TabBarAi';
+
+type TabBarAiProps = React.ComponentProps<typeof TabBarAi>;
+
+const DEFAULT_TABS: TabItem[] = [
+  { key: 'discover', label: 'Discover' },
+  { key: 'specialists', label: 'Specialists' },
+  { key: 'places', label: 'Places' },
+  { key: 'events', label: 'Events' },
+  { key: 'polls', label: 'Polls', disabled: true },
+];
+
+const meta = {
+  title: 'UI/TabBar/TabBarAi',
+  component: TabBarAi,
+  decorators: [
+    (Story) => (
+      <View style={{ paddingVertical: 8, backgroundColor: '#1b1b1b' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Horizontal scrollable tab bar with animated indicator tailored for the AI discovery screens.',
+      },
+    },
+  },
+  argTypes: {
+    onChange: { action: 'onChange' },
+    activeIndex: {
+      control: { type: 'number' },
+      description: 'Index of the active tab. In the stories it is managed internally.',
+    },
+  },
+  args: {
+    tabs: DEFAULT_TABS,
+    activeIndex: 0,
+    activeColor: '#ffffff',
+    inactiveColor: 'rgba(255,255,255,0.55)',
+    indicatorColor: '#ffffff',
+    indicatorHeight: 4,
+    fontSize: 18,
+  },
+} satisfies Meta<typeof TabBarAi>;
+
+export default meta;
+
+type Story = StoryObj<typeof TabBarAi>;
+
+const Controlled: React.FC<TabBarAiProps> = ({ activeIndex = 0, onChange, ...rest }) => {
+  const [active, setActive] = useState(activeIndex);
+
+  useEffect(() => {
+    setActive(activeIndex);
+  }, [activeIndex]);
+
+  return (
+    <TabBarAi
+      {...rest}
+      activeIndex={active}
+      onChange={(index) => {
+        setActive(index);
+        onChange?.(index);
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <Controlled {...args} />,
+};
+
+export const DarkBackground: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: {
+    activeColor: '#ffe066',
+    indicatorColor: '#ffe066',
+  },
+};
+
+export const WithManyTabs: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: {
+    tabs: Array.from({ length: 10 }).map((_, index) => ({
+      key: `tab-${index}`,
+      label: `Section ${index + 1}`,
+    })),
+  },
+};
+
+export const CustomSpacing: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: {
+    gap: 12,
+    tabHorizontalPadding: 12,
+    fontSize: 16,
+    fontWeightActive: '600',
+    fontWeightInactive: '400',
+  },
+};

package/components/UI/TabBar/TabBarAi.tsx

@@ -0,0 +1,233 @@
+// TabBar.tsx
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+import type { ScrollView } from 'react-native';
+
+export type TabItem = {
+  key: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type MeasuredTab = {
+  x: number;     // абсолютный x внутри контента ScrollView (с учётом padding)
+  width: number;
+};
+
+type TabBarProps = {
+  tabs: TabItem[];
+  activeIndex: number;
+  onChange: (index: number) => void;
+
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  // стилизация
+  activeColor?: string;
+  inactiveColor?: string;
+  indicatorColor?: string;
+  indicatorHeight?: number;
+  fontSize?: number;
+  fontWeightActive?: '700' | '600' | '500' | '400';
+  fontWeightInactive?: '600' | '500' | '400' | '300';
+  tabHorizontalPadding?: number;
+  gap?: number;
+};
+
+const PADDING_X = 12; // должен совпадать со styles.row.paddingHorizontal
+
+export const TabBar: React.FC<TabBarProps> = memo((props) => {
+  const {
+    tabs,
+    activeIndex,
+    onChange,
+    style,
+    contentContainerStyle,
+    activeColor = '#000000',
+    inactiveColor = 'rgba(255,255,255,0.55)',
+    indicatorColor = '#000000',
+    indicatorHeight = 4,
+    fontSize = 24,
+    fontWeightActive = '700',
+    fontWeightInactive = '600',
+    tabHorizontalPadding = 4,
+    gap = 24,
+  } = props;
+
+  const scrollRef = useRef<ScrollView>(null);
+  const [rootWidth, setRootWidth] = useState(0);
+  const scrollX = useRef(new Animated.Value(0)).current;
+
+  // измерения вкладок
+  const [measures, setMeasures] = useState<Record<string, MeasuredTab>>({});
+  const onTabLayout = useCallback(
+    (key: string) => (e: LayoutChangeEvent) => {
+      const { x, width } = e.nativeEvent.layout;
+      setMeasures((prev) =>
+        prev[key]?.x === x && prev[key]?.width === width ? prev : { ...prev, [key]: { x, width } },
+      );
+    },
+    [],
+  );
+
+  // индикатор: позиционируем по центру вкладки
+  const centerX = useRef(new Animated.Value(0)).current; // координата центра ОТНОСИТЕЛЬНО left=PADDING_X
+  const scaleX = useRef(new Animated.Value(1)).current;  // ширина индикатора (масштаб по X)
+
+  const animateTo = useCallback(
+    (centerRel: number, width: number) => {
+      Animated.parallel([
+        Animated.spring(centerX, {
+          toValue: centerRel,
+          useNativeDriver: true,
+          bounciness: 6,
+          speed: 15,
+        }),
+        Animated.spring(scaleX, {
+          toValue: Math.max(1, width), // базовая ширина 1 -> растягиваем до нужной
+          useNativeDriver: true,
+          bounciness: 6,
+          speed: 15,
+        }),
+      ]).start();
+    },
+    [centerX, scaleX],
+  );
+
+  // пересчёт при смене активной вкладки или измерений
+  useEffect(() => {
+    const tab = tabs[activeIndex];
+    if (!tab) return;
+    const m = measures[tab.key];
+    if (!m) return;
+
+    const targetWidth = Math.max(16, m.width * 0.6);
+    const centerAbs = m.x + m.width / 2;          // абсолютный центр относительно контента
+    const centerRel = centerAbs - PADDING_X;      // смещаем, т.к. индикатор имеет left=PADDING_X
+
+    animateTo(centerRel, targetWidth);
+
+    // автоцентрирование активной вкладки в видимой области
+    const desiredScrollX = Math.max(0, centerAbs - rootWidth / 2);
+    scrollRef.current?.scrollTo({ x: desiredScrollX, y: 0, animated: true });
+  }, [activeIndex, measures, tabs, rootWidth, animateTo]);
+
+  const handlePress = useCallback(
+    (index: number, disabled?: boolean) => {
+      if (!disabled) onChange(index);
+    },
+    [onChange],
+  );
+
+  const contentGapStyle = useMemo(() => ({ columnGap: gap }), [gap]);
+
+  const translateX = useMemo(() => Animated.subtract(centerX, scrollX), [centerX, scrollX]);
+
+  return (
+    <View
+      style={[styles.root, style]}
+      onLayout={(e) => setRootWidth(e.nativeEvent.layout.width)}
+    >
+      <Animated.ScrollView
+        ref={scrollRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.row, contentGapStyle, contentContainerStyle]}
+        keyboardShouldPersistTaps="handled"
+        // important: чтобы Pressable не обрезался тенями
+        overScrollMode="never"
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+          useNativeDriver: true,
+        })}
+        scrollEventThrottle={16}
+      >
+        {tabs.map((t, i) => {
+          const isActive = i === activeIndex;
+          return (
+            <Pressable
+              key={t.key}
+              onPress={() => handlePress(i, t.disabled)}
+              onLayout={onTabLayout(t.key)}
+              android_ripple={{ color: 'rgba(255,255,255,0.08)', borderless: true }}
+              style={({ pressed }) => [
+                styles.tab,
+                { paddingHorizontal: tabHorizontalPadding, opacity: t.disabled ? 0.5 : pressed ? 0.8 : 1 },
+              ]}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: isActive, disabled: !!t.disabled }}
+            >
+              <Text
+                numberOfLines={1}
+                style={[
+                  styles.label,
+                  {
+                    color: isActive ? activeColor : inactiveColor,
+                    fontSize,
+                    fontWeight: isActive ? fontWeightActive : fontWeightInactive,
+                  },
+                ]}
+              >
+                {t.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </Animated.ScrollView>
+
+      {/* Индикатор: width анимируем через scaleX (native-driver) */}
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.indicator,
+          {
+            height: indicatorHeight,
+            backgroundColor: indicatorColor,
+            // базовая «единичка», далее растягиваем scaleX до нужной ширины
+            width: 1,
+            transform: [
+              { translateX }, // сдвиг центра
+              { scaleX },              // ширина
+            ],
+          },
+        ]}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'relative',
+    backgroundColor: 'transparent',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: PADDING_X,
+    paddingTop: 4,
+    paddingBottom: 4,
+  },
+  tab: {
+    paddingVertical: 6,
+  },
+  label: {
+    letterSpacing: 0.2,
+  },
+  indicator: {
+    position: 'absolute',
+    left: PADDING_X, // точка отсчёта для centerX
+    bottom: 0,
+    borderRadius: 999,
+  },
+});
+
+export default TabBar;

package/components/UI/ThreeDotsMenu.tsx

@@ -6,13 +6,15 @@ import {
   StyleSheet,
   Modal,
   Pressable,
-  LayoutRectangle
+  LayoutRectangle,
+  ViewStyle,
+  StyleProp
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { ThemeType, useTheme } from '../../theme';
 import { IoniconsProps } from '../../types/Icon';
 
-type MenuItem = {
+export type MenuItem = {
   label: string;
   icon?: IoniconsProps;
   colorIcon?: any;
@@ -21,9 +23,13 @@ type MenuItem = {
 
 type Props = {
   items: MenuItem[];
+  style?: StyleProp<ViewStyle>;
+  iconColor?: string;
+  positionLeft?: number;
+  positionTop?: number;
 };
 
-export const ThreeDotsMenu: React.FC<Props> = ({ items }) => {
+export const ThreeDotsMenu: React.FC<Props> = ({ items, style, iconColor, positionLeft, positionTop }) => {
   const { theme, typography, globalStyleSheet } = useTheme();
 
   const [menuVisible, setMenuVisible] = useState(false);
@@ -45,8 +51,8 @@ export const ThreeDotsMenu: React.FC<Props> = ({ items }) => {
 
   return (
     <View>
-      <TouchableOpacity ref={buttonRef as any} onPress={openMenu}>
-        <Ionicons name="ellipsis-vertical" size={22} color={theme.primary} />
+      <TouchableOpacity style={style} ref={buttonRef as any} onPress={openMenu}>
+        <Ionicons name="ellipsis-vertical" size={22} color={iconColor ?? theme.primary} />
       </TouchableOpacity>
 
       <Modal transparent visible={menuVisible} animationType="fade" onRequestClose={closeMenu}>
@@ -56,8 +62,8 @@ export const ThreeDotsMenu: React.FC<Props> = ({ items }) => {
               style={[
                 styles.dropdown,
                 {
-                  top: position.y + position.height,
-                  left: position.x - 160 + position.width, // подправь под себя
+                  top: position.y + position.height + (positionTop ?? 0),
+                  left: position.x - (positionLeft ?? 160) + position.width, // подправь под себя
                 },
               ]}
             >

package/components/UI/UpdateRequiredView.stories.tsx

@@ -0,0 +1,71 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated } from 'react-native';
+import { Meta, StoryObj } from '@storybook/react';
+import { UpdateRequiredView } from './UpdateRequiredView';
+import { ThemeProvider } from '../../theme';
+
+// 👇 Декоратор, чтобы обернуть компонент в тему
+const withTheme = (StoryFn: any) => (
+  <ThemeProvider>
+    <StoryFn />
+  </ThemeProvider>
+);
+
+const meta: Meta<typeof UpdateRequiredView> = {
+  title: 'UI/UpdateRequiredView',
+  component: UpdateRequiredView,
+  decorators: [withTheme],
+  argTypes: {
+    onPressUpdate: { action: 'pressed update' },
+    onRefresh: { action: 'refreshed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UpdateRequiredView>;
+
+export const Default: Story = {
+  render: (args) => {
+    const anim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(anim, {
+            toValue: -10,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim, {
+            toValue: 0,
+            duration: 600,
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    }, [anim]);
+
+    return (
+      <UpdateRequiredView
+        {...args}
+        anim={anim}
+      />
+    );
+  },
+  args: {
+    refreshing: false,
+    title: 'Необходимо обновление',
+    description:
+      'Для корректной работы приложения установите последнюю версию. Нажмите кнопку ниже, чтобы перейти в магазин.',
+  },
+};
+
+export const Refreshing: Story = {
+  render: Default.render,
+  args: {
+    refreshing: true,
+    title: 'Проверка обновлений...',
+    description: 'Подождите, идет проверка доступных обновлений.',
+  },
+};

package/components/UI/UpdateRequiredView.tsx

@@ -0,0 +1,65 @@
+import React, { memo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Animated,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Spacer from './Spacer';
+import { Button } from '../Button';
+
+type Props = {
+  anim: Animated.Value;           // внешний Animated.Value с уже запущенным loop
+  refreshing: boolean;
+  onRefresh: () => void;
+  onPressUpdate: () => void;
+  title: string;
+  description: string;
+};
+
+export const UpdateRequiredView = memo(({ anim, refreshing, onRefresh, onPressUpdate, title, description }: Props) => {
+  const { theme, commonStyles, typography } = useTheme() as any;
+
+  const ui = {
+    bg: theme?.background ?? '#fff',
+    primary: theme?.primary ?? '#6f2da8',
+    container: commonStyles?.container ?? { flex: 1, padding: 16 },
+    titleH2: typography?.titleH2 ?? { fontSize: 24, fontWeight: '700' },
+    body: typography?.body ?? { fontSize: 16 },
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={[ui.container, { backgroundColor: ui.bg, flexGrow: 1, justifyContent: 'center' }]}
+      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+    >
+      <Animated.View style={[styles.iconContainer, { transform: [{ translateY: anim }] }]}>
+        <MaterialCommunityIcons name="update" size={64} color={ui.primary} />
+      </Animated.View>
+
+      <Spacer size="xl" />
+      <Text style={[ui.titleH2, styles.title]}>{title}</Text>
+
+      <Spacer size="sm" />
+      <Text style={[ui.body, styles.description]}>
+        {description}
+      </Text>
+
+      <Spacer size="xl" />
+      <View style={styles.button}>
+        <Button title="Обновить" onPress={onPressUpdate} />
+      </View>
+    </ScrollView>
+  );
+});
+
+const styles = StyleSheet.create({
+  button: { width: '70%' },
+  iconContainer: { alignItems: 'center' },
+  title: { textAlign: 'center' },
+  description: { textAlign: 'center', paddingHorizontal: 20 },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",