rn-vs-lb 1.0.63 → 1.0.65

package/components/Button/DeleteAccountButton.stories.tsx

@@ -18,9 +18,21 @@ const createMockDelete = (delay = 800) => async () => {
 export const Default = Template.bind({});
 Default.args = {
   deleteAccount: createMockDelete(),
+  triggerLabel: 'Delete account',
+  modalTitle: 'Confirm Deletion',
+  modalDescription:
+    'All your data, including profile, events, and chat history, will be permanently deleted. This process is irreversible and will be completed within 24 hours. Are you sure you want to proceed?',
+  cancelButtonLabel: 'Cancel',
+  confirmButtonLabel: 'Delete',
 };
 
 export const SlowNetwork = Template.bind({});
 SlowNetwork.args = {
   deleteAccount: createMockDelete(2000),
+  triggerLabel: 'Delete account',
+  modalTitle: 'Confirm Deletion',
+  modalDescription:
+    'All your data, including profile, events, and chat history, will be permanently deleted. This process is irreversible and will be completed within 24 hours. Are you sure you want to proceed?',
+  cancelButtonLabel: 'Cancel',
+  confirmButtonLabel: 'Delete',
 };

package/components/Button/DeleteAccountButton.tsx

@@ -6,9 +6,21 @@ import { ThemeType, useTheme } from '../../theme';
 
 export type DeleteAccountButtonProps = {
   deleteAccount: () => Promise<void>;
+  triggerLabel: string;
+  modalTitle: string;
+  modalDescription: string;
+  cancelButtonLabel: string;
+  confirmButtonLabel: string;
 }
 
-export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccount }) => {
+export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({
+  deleteAccount,
+  triggerLabel,
+  modalTitle,
+  modalDescription,
+  cancelButtonLabel,
+  confirmButtonLabel,
+}) => {
   const [modalVisible, setModalVisible] = useState(false);
   const { theme, typography } = useTheme();
   const styles = getStyles({ theme });
@@ -21,7 +33,7 @@ export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccoun
   return (
     <View style={styles.container}>
       <TouchableOpacity style={styles.deleteButton} onPress={() => setModalVisible(true)}>
-        <Text style={[typography.titleH6, { color: theme.red }]}>Delete account</Text>
+        <Text style={[typography.titleH6, { color: theme.red }]}>{triggerLabel}</Text>
       </TouchableOpacity>
 
       <Modal
@@ -32,17 +44,25 @@ export const DeleteAccountButton: FC<DeleteAccountButtonProps> = ({ deleteAccoun
       >
         <View style={styles.modalOverlay}>
           <View style={styles.modalContent}>
-            <Text style={typography.titleH5}>Confirm Deletion</Text>
+            <Text style={typography.titleH5}>{modalTitle}</Text>
             <Spacer size="xxs" />
             <Text style={[typography.body, { textAlign: "center" }]}>
-              All your data, including profile, events, and chat history, will be permanently deleted.
-              This process is irreversible and will be completed within 24 hours.
-              Are you sure you want to proceed?
+              {modalDescription}
             </Text>
             <Spacer size="lg" />
             <View style={styles.buttonRow}>
-              <Button onPress={() => setModalVisible(false)} style={styles.cancelButton} type="gray-outline" title="Cancel" />
-              <Button onPress={handleDeleteAccount} type="report-outline" style={styles.confirmButton} title="Delete" />
+              <Button
+                onPress={() => setModalVisible(false)}
+                style={styles.cancelButton}
+                type="gray-outline"
+                title={cancelButtonLabel}
+              />
+              <Button
+                onPress={handleDeleteAccount}
+                type="report-outline"
+                style={styles.confirmButton}
+                title={confirmButtonLabel}
+              />
             </View>
           </View>
         </View>

package/components/Button/TelegramFeedbackLink.stories.tsx

@@ -20,9 +20,15 @@ const Template: StoryFn<TelegramFeedbackLinkProps> = (args) => <TelegramFeedback
 export const Default = Template.bind({});
 Default.args = {
   link: 'https://t.me/volunteer_support_bot',
+  title: 'Feedback & Bugs',
+  subtitle: 'Tap to write us in Telegram',
+  unsupportedLinkMessage: "Can't open Telegram URL",
 };
 
 export const CustomRoom = Template.bind({});
 CustomRoom.args = {
   link: 'https://t.me/joinchat/ExampleRoom',
+  title: 'Report an Issue',
+  subtitle: 'Reach out to the team on Telegram',
+  unsupportedLinkMessage: "Can't open Telegram URL",
 };

package/components/Button/TelegramFeedbackLink.tsx

@@ -6,9 +6,17 @@ import { useTheme } from '../../theme';
 
 export type TelegramFeedbackLinkProps = {
   link: string;
+  title: string;
+  subtitle: string;
+  unsupportedLinkMessage: string;
 }
 
-export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link }) => {
+export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({
+  link,
+  title,
+  subtitle,
+  unsupportedLinkMessage,
+}) => {
   const { theme, typography } = useTheme();
 
   const handlePress = async () => {
@@ -16,7 +24,7 @@ export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link
     if (supported) {
       await Linking.openURL(link);
     } else {
-      console.warn("Can't open Telegram URL");
+      console.warn(unsupportedLinkMessage);
     }
   };
 
@@ -24,8 +32,8 @@ export const TelegramFeedbackLink: React.FC<TelegramFeedbackLinkProps> = ({ link
     <TouchableOpacity style={styles.container} onPress={handlePress}>
       <FontAwesome name={'telegram'} size={26} color={theme.primaryLight} />
       <View style={styles.textContainer}>
-        <Text style={[typography.titleH6, { color: theme.text }]}>Feedback & Bugs</Text>
-        <Text style={typography.bodySm}>Tap to write us in Telegram</Text>
+        <Text style={[typography.titleH6, { color: theme.text }]}>{title}</Text>
+        <Text style={typography.bodySm}>{subtitle}</Text>
       </View>
     </TouchableOpacity>
   );

package/components/Cards/EventCard.stories.tsx

@@ -57,12 +57,15 @@ export const Default: Story = {
       'Crash Drum Studio — пространство, где можно почувствовать силу ритма и научиться играть на ударных в любой форме.',
     organizerAvatarUri: 'https://i.pravatar.cc/150?img=11',
     organizerName: 'Admin Belgrade',
+    organizerRoleLabel: 'Organizer',
     likes: 42,
     views: 313,
     hasLike: false,
     isUserParticipantInPost: false,
     participantsCount: 0,
     visible: true,
+    participantLabel: 'You’re participating',
+    demoLabel: 'DEMO',
   },
 };
 

package/components/Cards/EventCard.tsx

@@ -13,6 +13,7 @@ interface EventCardProps {
   description: string;
   organizerAvatarUri: string;
   organizerName: string;
+  organizerRoleLabel: string;
   onPress: () => void;
   likes: number;
   views: number;
@@ -24,6 +25,8 @@ interface EventCardProps {
   maxParticipants?: number;
   categories?: string[];
   price?: string;
+  participantLabel: string;
+  demoLabel: string;
 
   /** Новое: видимость карточки сообщает родитель (FlatList/ScrollView и т.д.) */
   visible?: boolean;
@@ -39,6 +42,7 @@ const EventCard: React.FC<EventCardProps> = ({
   description,
   organizerAvatarUri,
   organizerName,
+  organizerRoleLabel,
   onPress,
   likes,
   views,
@@ -50,6 +54,8 @@ const EventCard: React.FC<EventCardProps> = ({
   maxParticipants,
   categories,
   price,
+  participantLabel,
+  demoLabel,
   visible = false,
   triggerOnce = true,
 }) => {
@@ -77,7 +83,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />
         {isUserParticipantInPost && (
           <View style={styles.participantOverlay}>
-            <Text style={styles.participantText}>You’re participating</Text>
+            <Text style={styles.participantText}>{participantLabel}</Text>
           </View>
         )}
       </View>
@@ -86,7 +92,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <View style={globalStyleSheet.flexRowCenterStart}>
           {date && <Text style={[typography.body, styles.date]}>{date}</Text>}
           {categories?.includes('bot') && (
-            <Text style={[typography.body, styles.demo]}>DEMO</Text>
+            <Text style={[typography.body, styles.demo]}>{demoLabel}</Text>
           )}
           {price && <Text style={[typography.body, styles.demo]}>{price}</Text>}
         </View>
@@ -107,6 +113,7 @@ const EventCard: React.FC<EventCardProps> = ({
         <Organizer
           avatarUri={organizerAvatarUri}
           organizerName={organizerName}
+          roleLabel={organizerRoleLabel}
           onPress={onPress}
         />
         <SocialStatsEvent onLike={onLike} hasLike={hasLike} likes={likes} views={views} />

package/components/Chat/InputMessage.stories.tsx

@@ -87,18 +87,21 @@ const Template: StoryFn<Props> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Message',
+  editingLabel: 'Editing message',
   maxImages: 1,
 };
 
 export const AttachmentsDisabled = Template.bind({});
 AttachmentsDisabled.args = {
   placeholder: 'No attachments allowed',
+  editingLabel: 'Editing message',
   enableImageAttachment: false,
 };
 
 export const WithAttachments = Template.bind({});
 WithAttachments.args = {
   placeholder: 'Attach up to 2 images',
+  editingLabel: 'Editing message',
   maxImages: 2,
 };
 WithAttachments.render = (args) => {
@@ -118,6 +121,7 @@ WithAttachments.render = (args) => {
         return imgs;
       }}
       onMaxImagesExceeded={(max) => Alert.alert('Max images exceeded', `Allowed: ${max}`)}
+      editingLabel="Editing message"
     />
   );
 };
@@ -137,6 +141,8 @@ export const ReplyMode: StoryFn = () => {
       onCancelReply={replyCancelHandler}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -152,6 +158,8 @@ export const EditMode: StoryFn = () => {
       onCancelEdit={editCancelHandler}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -176,6 +184,8 @@ export const SendingControlled: StoryFn = () => {
       maxImages={1}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -200,6 +210,7 @@ export const ManyInputsDemo: StoryFn = () => {
           placeholder={`Message #${idx + 1}`}
           onTyping={() => logEvent(`typing-${idx}`)}
           onStopTyping={() => logEvent(`stop-typing-${idx}`)}
+          editingLabel="Editing message"
         />
       ))}
     </ScrollView>

package/components/Chat/InputMessage.tsx

@@ -33,7 +33,8 @@ interface InputMessageProps {
   onStopTyping?: () => void; // будет вызвано через ~2s тишины
 
   // Placeholder
-  placeholder?: string;
+  placeholder: string;
+  editingLabel: string;
 }
 
 export const InputMessage: FC<InputMessageProps> = ({
@@ -56,7 +57,8 @@ export const InputMessage: FC<InputMessageProps> = ({
   onTyping,
   onStopTyping,
 
-  placeholder = 'Message',
+  placeholder,
+  editingLabel,
 }) => {
   const { theme, typography } = useTheme();
   const styles = getStyles(theme);
@@ -119,7 +121,7 @@ export const InputMessage: FC<InputMessageProps> = ({
       {/* Edit */}
       {editMessage && (
         <View style={[styles.replyContainer, { borderLeftColor: theme.primaryLight }]}>
-          <Text style={styles.replyLabel}>Editing message</Text>
+          <Text style={styles.replyLabel}>{editingLabel}</Text>
           <View style={styles.replyContent}>
             <Text numberOfLines={1} style={styles.replyText}>
               {editMessage.content ?? ''}

package/components/Header/HeaderWithImg.stories.tsx

@@ -16,6 +16,15 @@ const meta: Meta = {
         userName: 'Alex Johnson',
       },
     ],
+    typingText: 'typing…',
+    onlineText: 'Online',
+    offlineText: 'Offline',
+    groupTypingSuffix: ': typing…',
+    backAccessibilityLabel: 'Back',
+    imageAccessibilityLabel: 'Open chat image',
+    actionsAccessibilityLabel: 'More actions',
+    onlineStatusAccessibilityLabel: 'online',
+    offlineStatusAccessibilityLabel: 'offline',
   },
   argTypes: {
     onBackPress: { action: 'back' },

package/components/Header/HeaderWithImg.tsx

@@ -22,6 +22,15 @@ interface HeaderProps {
   isOnline?: boolean;
   isTyping?: boolean;
   typingUserName?: string;
+  typingText: string;
+  onlineText: string;
+  offlineText: string;
+  groupTypingSuffix: string;
+  backAccessibilityLabel: string;
+  imageAccessibilityLabel: string;
+  actionsAccessibilityLabel: string;
+  onlineStatusAccessibilityLabel: string;
+  offlineStatusAccessibilityLabel: string;
 }
 
 const HeaderWithImg: React.FC<HeaderProps> = ({
@@ -35,6 +44,15 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
   isOnline = false,
   isTyping = false,
   typingUserName,
+  typingText,
+  onlineText,
+  offlineText,
+  groupTypingSuffix,
+  backAccessibilityLabel,
+  imageAccessibilityLabel,
+  actionsAccessibilityLabel,
+  onlineStatusAccessibilityLabel,
+  offlineStatusAccessibilityLabel,
 }) => {
   const { globalStyleSheet, theme, sizes, commonStyles, typography } = useTheme();
   const styles = useMemo(
@@ -46,7 +64,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel="Back">
+      <TouchableOpacity onPress={onBackPress} accessibilityRole="button" accessibilityLabel={backAccessibilityLabel}>
         <Ionicons name="arrow-back" size={24} color={theme.text} />
       </TouchableOpacity>
 
@@ -56,7 +74,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
             style={globalStyleSheet.flexRowCenter}
             onPress={onImgPress}
             accessibilityRole="imagebutton"
-            accessibilityLabel="Open chat image"
+            accessibilityLabel={imageAccessibilityLabel}
             activeOpacity={0.8}
           >
             <Image source={{ uri: imgUrl }} style={styles.photo} />
@@ -69,15 +87,17 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
               {/* отображение статусов */}
               {!isGroupChat ? (
                 isTyping ? (
-                  <Text style={[typography.body, styles.subtitleItalic]}>typing…</Text>
+                  <Text style={[typography.body, styles.subtitleItalic]}>{typingText}</Text>
                 ) : (
                   <View style={styles.statusRow}>
                     <Text style={[typography.body, styles.subtitleItalic]}>
-                      {isOnline ? 'Online' : 'Offline'}
+                      {isOnline ? onlineText : offlineText}
                     </Text>
                     <View
                       style={[styles.statusDot, isOnline ? styles.online : styles.offline]}
-                      accessibilityLabel={isOnline ? 'online' : 'offline'}
+                      accessibilityLabel={
+                        isOnline ? onlineStatusAccessibilityLabel : offlineStatusAccessibilityLabel
+                      }
                     />
                   </View>
                 )
@@ -87,7 +107,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
                   ellipsizeMode="tail"
                   style={[typography.body, styles.subtitleItalic]}
                 >
-                  {typingUserName}: typing…
+                  {`${typingUserName}${groupTypingSuffix}`}
                 </Text>
               ) : null}
             </View>
@@ -99,7 +119,7 @@ const HeaderWithImg: React.FC<HeaderProps> = ({
                 style={styles.actionButton}
                 onPress={onActionPress}
                 accessibilityRole="button"
-                accessibilityLabel="More actions"
+                accessibilityLabel={actionsAccessibilityLabel}
                 hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
               >
                 <Ionicons name="ellipsis-horizontal-sharp" size={20} color={theme.primary} />

package/components/Modals/GuestAiChatModal.stories.tsx

@@ -21,6 +21,8 @@ const sampleMessages: PureChatMessage[] = [
   },
 ];
 
+const defaultLimitLabel = (remaining: number, limit: number) => `Осталось сообщений: ${remaining} / ${limit}`;
+
 const meta = {
   title: 'Modals/GuestAiChatModal',
   component: GuestAiChatModalView,
@@ -36,6 +38,7 @@ const meta = {
     theme: { table: { disable: true } },
     typography: { table: { disable: true } },
     sizes: { table: { disable: true } },
+    limitLabel: { table: { disable: true } },
   },
   args: {
     visible: true,
@@ -49,6 +52,9 @@ const meta = {
     theme,
     typography,
     sizes: SIZES,
+    defaultBotName: 'AI-бот',
+    limitLabel: defaultLimitLabel,
+    inputPlaceholder: 'Спросите что-нибудь...'
   },
   decorators: [
     (StoryComponent) => (
@@ -174,9 +180,11 @@ Playground.args = {
   remaining: 5,
 };
 
-export const DefaultOpen: StoryFn<GuestAiChatProps> = (args) => Template({ ...args, visible: true });
-DefaultOpen.args = {
-  visible: true,
+export const DefaultOpen: StoryFn<GuestAiChatProps> = {
+  render: Template,
+  args: {
+    visible: true,
+  },
 };
 
 export const WithErrorState: StoryFn<GuestAiChatProps> = (args) => (

package/components/Modals/GuestAiChatModal.tsx

@@ -32,6 +32,9 @@ export type GuestAiChatViewProps = {
   isSending: boolean;
   limit?: number;
   remaining?: number;
+  defaultBotName: string;
+  limitLabel: (remaining: number, limit: number) => string;
+  inputPlaceholder: string;
 
   // экшены
   onChangeInput: (v: string) => void;
@@ -57,6 +60,9 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
     isSending,
     limit,
     remaining,
+    defaultBotName,
+    limitLabel,
+    inputPlaceholder,
     onChangeInput,
     onSend,
     listRef,
@@ -92,10 +98,10 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
           <View style={styles.modalContainer}>
             <View style={styles.header}>
               <View>
-                <Text style={typography.titleH6}>{botName || 'AI-бот'}</Text>
+                <Text style={typography.titleH6}>{botName || defaultBotName}</Text>
                 {limit !== undefined && remaining !== undefined && (
                   <Text style={styles.limitText}>
-                    Осталось сообщений: {remaining} / {limit}
+                    {limitLabel(remaining, limit)}
                   </Text>
                 )}
               </View>
@@ -118,7 +124,7 @@ export const GuestAiChatModalView: FC<GuestAiChatViewProps> = memo(
             <View style={styles.inputRow}>
               <TextInput
                 style={styles.input}
-                placeholder="Спросите что-нибудь..."
+                placeholder={inputPlaceholder}
                 placeholderTextColor={theme.greyText}
                 value={inputValue}
                 onChangeText={onChangeInput}

package/components/Modals/ReportModal.stories.tsx

@@ -13,6 +13,23 @@ const submitLogger = (payload: { reason: string; details?: string }) => {
   console.log('[storybook:report-modal:submit]', payload);
 };
 
+const userReasonOptions = [
+  'Spam or scam',
+  'Harassment or bullying',
+  'Inappropriate content',
+  'Fake profile',
+  'Other',
+];
+
+const postReasonOptions = [
+  'Spam or misleading',
+  'Hate speech or discrimination',
+  'Violence or threats',
+  'Sexually explicit content',
+  'Harassment or bullying',
+  'Other',
+];
+
 const meta: Meta<ReportModalProps> = {
   title: 'Modals/ReportModal',
   component: ReportModal,
@@ -92,9 +109,18 @@ const Template: StoryFn<ReportModalProps> = (args) => {
   );
 };
 
-const baseArgs: Pick<ReportModalProps, 'visible' | 'type'> = {
+const baseArgs: Pick<
+  ReportModalProps,
+  'visible' | 'type' | 'title' | 'userReasons' | 'postReasons' | 'inputPlaceholder' | 'cancelText' | 'submitText'
+> = {
   visible: true,
   type: 'user',
+  title: 'Report User',
+  userReasons: userReasonOptions,
+  postReasons: postReasonOptions,
+  inputPlaceholder: 'Additional details (optional)',
+  cancelText: 'Cancel',
+  submitText: 'Send',
 };
 
 export const UserReport: StoryFn<ReportModalProps> = Template.bind({});
@@ -113,6 +139,7 @@ export const PostReport: StoryFn<ReportModalProps> = Template.bind({});
 PostReport.args = {
   ...baseArgs,
   type: 'post',
+  title: 'Report Post',
 };
 PostReport.parameters = {
   docs: {
@@ -160,6 +187,7 @@ export const InteractivePlayground: StoryFn<ReportModalProps> = (args) => {
         {...args}
         visible={isVisible}
         type={reportType}
+        title={reportType === 'user' ? 'Report User' : 'Report Post'}
         onClose={() => {
           closeLogger();
           setIsVisible(false);
@@ -170,6 +198,11 @@ export const InteractivePlayground: StoryFn<ReportModalProps> = (args) => {
           setIsVisible(false);
           args.onSubmit(reason, details);
         }}
+        userReasons={userReasonOptions}
+        postReasons={postReasonOptions}
+        inputPlaceholder={args.inputPlaceholder}
+        cancelText={args.cancelText}
+        submitText={args.submitText}
       />
     </View>
   );

package/components/Modals/ReportModal.tsx

@@ -16,26 +16,25 @@ type Props = {
   onClose: () => void;
   onSubmit: (reason: string, details: string) => void;
   type: "user" | "post";
+  title: string;
+  userReasons: string[];
+  postReasons: string[];
+  inputPlaceholder: string;
+  cancelText: string;
+  submitText: string;
 };
-
-const userReportReasons = [
-  'Spam or scam',
-  'Harassment or bullying',
-  'Inappropriate content',
-  'Fake profile',
-  'Other',
-];
-
-const postReportReasons = [
-  'Spam or misleading',
-  'Hate speech or discrimination',
-  'Violence or threats',
-  'Sexually explicit content',
-  'Harassment or bullying',
-  'Other',
-];
-
-const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
+const ReportModal: React.FC<Props> = ({
+  visible,
+  onClose,
+  onSubmit,
+  type,
+  title,
+  userReasons,
+  postReasons,
+  inputPlaceholder,
+  cancelText,
+  submitText,
+}) => {
   const { theme } = useTheme();
   const styles = getStyles({ theme });
 
@@ -50,7 +49,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
     onClose();
   };
 
-  const reasons = type === "user" ? userReportReasons : postReportReasons
+  const reasons = type === "user" ? userReasons : postReasons;
 
   return (
     <Modal
@@ -61,7 +60,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
     >
       <View style={styles.overlay}>
         <View style={styles.container}>
-          <Text style={styles.title}>Report User</Text>
+          <Text style={styles.title}>{title}</Text>
           <ScrollView style={styles.reasonsContainer}>
             {reasons.map((reason) => (
               <TouchableOpacity
@@ -86,7 +85,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
 
           <TextInput
             style={styles.input}
-            placeholder="Additional details (optional)"
+            placeholder={inputPlaceholder}
             placeholderTextColor="#888"
             value={details}
             onChangeText={setDetails}
@@ -96,7 +95,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
 
           <View style={styles.actions}>
             <TouchableOpacity style={styles.cancelBtn} onPress={onClose}>
-              <Text style={styles.cancelText}>Cancel</Text>
+              <Text style={styles.cancelText}>{cancelText}</Text>
             </TouchableOpacity>
             <TouchableOpacity
               style={[
@@ -106,7 +105,7 @@ const ReportModal: React.FC<Props> = ({ visible, onClose, onSubmit, type }) => {
               disabled={!selectedReason}
               onPress={handleSend}
             >
-              <Text style={styles.submitText}>Send</Text>
+              <Text style={styles.submitText}>{submitText}</Text>
             </TouchableOpacity>
           </View>
         </View>