rn-vs-lb 1.0.71 → 1.0.73

package/components/Chat/InputMessage.tsx

@@ -151,7 +151,7 @@ export const InputMessage: FC<InputMessageProps> = ({
                 {replyToMessage?.content ?? ''}
               </Text>
             )}
-            <TouchableOpacity onPress={onCancelReply} style={{ top: -8 }}>
+            <TouchableOpacity onPress={onCancelReply} style={{ top: 0 }}>
               <Ionicons name="close-outline" size={25} color={theme.greyText} />
             </TouchableOpacity>
           </View>

package/components/Header/HeaderEdit.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { HeaderEdit } from './HeaderEdit';
 
 const meta: Meta = {
@@ -15,6 +15,8 @@ const meta: Meta = {
     onReportMessage: { action: 'report' },
     onPinToggle: { action: 'pin toggle' },
     onEdit: { action: 'edit' },
+    customBackButton: { control: false },
+    background: { control: 'color' },
   },
 };
 
@@ -43,3 +45,23 @@ MinimalActions.args = {
   onEdit: undefined,
   isPinned: false,
 };
+
+export const WithCustomBackButton = Template.bind({});
+WithCustomBackButton.args = {
+  background: '#FFF2E7',
+};
+WithCustomBackButton.render = (args) => (
+  <View style={{ padding: 16, backgroundColor: '#f8f8f8' }}>
+    <HeaderEdit
+      {...args}
+      customBackButton={(
+        <TouchableOpacity
+          onPress={args.onClosePress}
+          style={{ backgroundColor: '#FFE4CF', borderRadius: 12, paddingHorizontal: 10, paddingVertical: 6 }}
+        >
+          <Text style={{ fontSize: 12, fontWeight: '600' }}>{'< Close'}</Text>
+        </TouchableOpacity>
+      )}
+    />
+  </View>
+);

package/components/Header/HeaderEdit.tsx

@@ -10,9 +10,20 @@ interface HeaderProps {
   onReportMessage: () => void;
   onPinToggle: () => void;
   isPinned: boolean;
+  background?: string;
+  customBackButton?: React.ReactNode;
 }
 
-export const HeaderEdit: React.FC<HeaderProps> = ({ onClosePress, onCopy, onEdit, onReportMessage, onPinToggle, isPinned }) => {
+export const HeaderEdit: React.FC<HeaderProps> = ({
+  onClosePress,
+  onCopy,
+  onEdit,
+  onReportMessage,
+  onPinToggle,
+  isPinned,
+  background,
+  customBackButton,
+}) => {
   const { globalStyleSheet, theme, sizes, commonStyles } = useTheme();
   const styles = getStyles({ globalStyleSheet, theme, sizes, commonStyles });
 
@@ -22,11 +33,15 @@ export const HeaderEdit: React.FC<HeaderProps> = ({ onClosePress, onCopy, onEdit
       onPress={(e) => {
         e.stopPropagation();
       }}
-      style={styles.container}
+      style={[styles.container, background ? { backgroundColor: background } : undefined]}
     >
-      <TouchableOpacity onPress={onClosePress}>
-        <Ionicons name="close-outline" size={30} color={theme.text} />
-      </TouchableOpacity>
+      {customBackButton ? (
+        customBackButton
+      ) : (
+        <TouchableOpacity onPress={onClosePress}>
+          <Ionicons name="close-outline" size={30} color={theme.text} />
+        </TouchableOpacity>
+      )}
       <View style={[styles.titleContainer]}>
         <TouchableOpacity onPress={onReportMessage}>
             <Ionicons name="megaphone-outline" size={25} color={theme.red} />
@@ -71,4 +86,4 @@ const getStyles = ({ theme, sizes, globalStyleSheet, commonStyles }: { commonSty
     gap: 22,
     ...globalStyleSheet.flexRowEnd,
   },
-});
+});

package/components/Header/HeaderHome.stories.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Text, View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { HeaderHome } from './HeaderHome';
 
 const meta: Meta<typeof HeaderHome> = {
   title: 'Layout/Header/HeaderHome',
   component: HeaderHome,
   argTypes: {
+    onBackPress: { action: 'back press' },
     onPress: { action: 'header press' },
     onPressCity: { action: 'city press' },
     onPressMap: { action: 'map press' },
     onPressSpecialists: { action: 'specialists press' },
+    customBackButton: { control: false },
+    background: { control: 'color' },
   },
 };
 
@@ -61,3 +64,24 @@ export const SpecialistsToggle: Story = {
       <Text style={{ fontWeight: '600', fontSize: 18 }}>Experts</Text>,
     ),
 };
+
+export const WithCustomBackButton: Story = {
+  args: {
+    background: '#EEF8EE',
+  },
+  render: (args) =>
+    renderWithLogo(
+      {
+        ...args,
+        customBackButton: (
+          <TouchableOpacity
+            onPress={args.onBackPress}
+            style={{ backgroundColor: '#DDF1DD', borderRadius: 12, paddingHorizontal: 10, paddingVertical: 6, marginRight: 8 }}
+          >
+            <Text style={{ fontSize: 12, fontWeight: '600' }}>{'< Back'}</Text>
+          </TouchableOpacity>
+        ),
+      },
+      <Text style={{ fontWeight: '600', fontSize: 18 }}>Experts</Text>,
+    ),
+};

package/components/Header/HeaderHome.tsx

@@ -1,10 +1,13 @@
-import { View, TouchableOpacity, Text } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import React, { FC, ReactNode } from 'react';
 import { Ionicons, FontAwesome5 } from '@expo/vector-icons';
 import { useTheme } from '../../theme';
 
 interface HeaderHomeProps {
   logo: ReactNode;
+  onBackPress?: () => void;
+  customBackButton?: ReactNode;
+  background?: string;
   onPress?: () => void;
   onPressCity?: () => void;
   onPressMap?: () => void;
@@ -12,15 +15,36 @@ interface HeaderHomeProps {
   specialistsActive?: boolean;
 }
 
-export const HeaderHome: FC<HeaderHomeProps> = ({ logo, onPress, onPressCity, onPressMap, onPressSpecialists, specialistsActive }) => {
+export const HeaderHome: FC<HeaderHomeProps> = ({
+  logo,
+  onBackPress,
+  customBackButton,
+  background,
+  onPress,
+  onPressCity,
+  onPressMap,
+  onPressSpecialists,
+  specialistsActive,
+}) => {
   const { globalStyleSheet, theme, commonStyles } = useTheme();
+  const shouldShowBack = Boolean(customBackButton || onBackPress);
 
   return (
-    <View style={[globalStyleSheet.flexRowCenterBetween, { height: 50 }]}>
-      <View>
-        <Text>
+    <View style={[globalStyleSheet.flexRowCenterBetween, { height: 50, backgroundColor: background }]}>
+      <View style={[globalStyleSheet.flexRowCenter]}>
+        {shouldShowBack && (
+          customBackButton ?? (
+            <TouchableOpacity
+              style={[commonStyles.btnicon, { marginRight: 8 }]}
+              onPress={onBackPress}
+            >
+              <Ionicons name="arrow-back" size={22} color={theme.text} />
+            </TouchableOpacity>
+          )
+        )}
+        <View>
           {logo}
-        </Text>
+        </View>
       </View>
       {(onPress || onPressCity || onPressMap || onPressSpecialists) && (
         <View style={{ flexDirection: 'row' }}>
@@ -60,4 +84,4 @@ export const HeaderHome: FC<HeaderHomeProps> = ({ logo, onPress, onPressCity, on
       )}
     </View>
   );
-};
+};

package/components/Header/HeaderSwitcher.stories.tsx

@@ -9,6 +9,9 @@ const meta: Meta<typeof HeaderSwitcher> = {
   args: {
     isFirst: true,
   },
+  argTypes: {
+    background: { control: 'color' },
+  },
 };
 
 export default meta;

package/components/Header/HeaderSwitcher.tsx

@@ -5,9 +5,10 @@ interface HeaderSwitcherProps {
   isFirst: boolean;
   componentA: React.ReactElement;
   componentB: React.ReactElement;
+  background?: string;
 }
 
-export const HeaderSwitcher: React.FC<HeaderSwitcherProps> = ({ isFirst, componentA, componentB }) => {
+export const HeaderSwitcher: React.FC<HeaderSwitcherProps> = ({ isFirst, componentA, componentB, background }) => {
   const [currentComponent, setCurrentComponent] = useState<React.ReactElement>(isFirst ? componentA : componentB);
   const opacity = useRef(new Animated.Value(1)).current;
 
@@ -30,6 +31,7 @@ export const HeaderSwitcher: React.FC<HeaderSwitcherProps> = ({ isFirst, compone
     <Animated.View
       style={[
         styles.animatedContainer,
+        background ? { backgroundColor: background } : undefined,
         { opacity }
       ]}
       pointerEvents="box-none" // ⚠️ пропускает касания дальше

package/components/Header/HeaderWithImg.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import HeaderWithImg from './HeaderWithImg';
 
 const meta: Meta = {
@@ -30,6 +30,8 @@ const meta: Meta = {
     onBackPress: { action: 'back' },
     onImgPress: { action: 'avatar press' },
     onActionPress: { action: 'action press' },
+    customBackButton: { control: false },
+    background: { control: 'color' },
   },
 };
 
@@ -91,3 +93,23 @@ OfflineUser.args = {
     { _id: '1', userName: 'Taylor Smith' },
   ],
 };
+
+export const WithCustomBackButton = Template.bind({});
+WithCustomBackButton.args = {
+  background: '#EAF5FF',
+};
+WithCustomBackButton.render = (args) => (
+  <View style={{ padding: 16, backgroundColor: '#f2f2f2' }}>
+    <HeaderWithImg
+      {...args}
+      customBackButton={(
+        <TouchableOpacity
+          onPress={args.onBackPress}
+          style={{ backgroundColor: '#D7E9FF', borderRadius: 12, paddingHorizontal: 10, paddingVertical: 6 }}
+        >
+          <Text style={{ fontSize: 12, fontWeight: '600' }}>{'< Back'}</Text>
+        </TouchableOpacity>
+      )}
+    />
+  </View>
+);

package/components/Header/HeaderWithImg.tsx

@@ -14,7 +14,9 @@ interface HeaderProps {
   title: string;
   onImgPress: () => void;
   onActionPress?: () => void;
-  onBackPress: () => void;
+  onBackPress?: () => void;
+  customBackButton?: React.ReactNode;
+  background?: string;
   isGroupChat: boolean;
   users: ChatUser[];
 
@@ -39,6 +41,8 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
   onImgPress,
   onActionPress,
   onBackPress,
+  customBackButton,
+  background,
   isGroupChat,
   users,
   isOnline = false,
@@ -63,10 +67,14 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
   const singleUser = users?.[0];
 
   return (
-    <View style={styles.container}>
-      <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel={backAccessibilityLabel}>
-        <Ionicons name="arrow-back" size={24} color={theme.text} />
-      </TouchableOpacity>
+    <View style={[styles.container, background ? { backgroundColor: background } : undefined]}>
+      {customBackButton ? (
+        customBackButton
+      ) : (
+        <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel={backAccessibilityLabel}>
+          <Ionicons name="arrow-back" size={24} color={theme.text} />
+        </TouchableOpacity>
+      )}
 
       <View style={styles.title}>
         <View style={globalStyleSheet.flexRowCenterBetween}>

package/components/Profile/ProfileCard/ProfileCard.stories.tsx

@@ -1,7 +1,7 @@
 // stories/Profile/PureProfileCard.stories.tsx
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { FontAwesome, FontAwesome5, FontAwesome6, Ionicons, MaterialIcons, Octicons } from '@expo/vector-icons';
 import PureProfileCard from  "./ProfileCard";
 
@@ -11,6 +11,7 @@ const meta = {
   argTypes: {
     onBack: { action: 'onBack' },
     onLearnMorePress: { action: 'onLearnMorePress' },
+    customBackButton: { control: false },
   },
   decorators: [
     // если у тебя есть ThemeProvider — оберни им здесь
@@ -136,3 +137,15 @@ export const SixHeaderActions: S = {
     ],
   },
 };
+
+export const WithCustomBackButton: S = {
+  args: {
+    customBackButton: (
+      <TouchableOpacity
+        style={{ backgroundColor: '#D7E9FF', borderRadius: 12, paddingHorizontal: 10, paddingVertical: 6 }}
+      >
+        <Text style={{ fontSize: 12, fontWeight: '600' }}>{'< Back'}</Text>
+      </TouchableOpacity>
+    ),
+  },
+};

package/components/Profile/ProfileCard/ProfileCard.tsx

@@ -36,6 +36,7 @@ export type PureProfileCardProps = {
 
   /** действия/навигация */
   onBack?: () => void;
+  customBackButton?: React.ReactNode;
   headerActions?: PureProfileCardHeaderAction[];
 
   /** CTA */
@@ -47,7 +48,7 @@ export default function PureProfileCard(props: PureProfileCardProps) {
   const {
     name, imageUri,
     isAuth, isMe, isOnline, lastSeenText,
-    onBack, headerActions,
+    onBack, customBackButton, headerActions,
     onLearnMorePress, ctaActions,
   } = props;
 
@@ -60,9 +61,13 @@ export default function PureProfileCard(props: PureProfileCardProps) {
     <View style={styles.cardContainer}>
       {/* навбар */}
       <View style={[globalStyleSheet.flexRowCenterBetween, styles.navigation]}>
-        <TouchableOpacity onPress={onBack} disabled={!onBack}>
-          <Ionicons size={24} name="arrow-back" color={theme.text} />
-        </TouchableOpacity>
+        {customBackButton ? (
+          customBackButton
+        ) : (
+          <TouchableOpacity onPress={onBack} disabled={!onBack}>
+            <Ionicons size={24} name="arrow-back" color={theme.text} />
+          </TouchableOpacity>
+        )}
 
         <View style={styles.settingSection}>
           {visibleHeaderActions.map((action, index) => (

package/package.json

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