fix: name text dont fit

birdwingo · Jun 24, 2024 · 3a221d7 · 3a221d7
1 parent 337997e
commit 3a221d7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -97,7 +97,8 @@ export default YourComponent;
  `videoAnimationMaxDuration`| number                                       |                                            | The max duration of the video story animations in ms. If is this property not provided, the whole video will be played.
  `backgroundColor`          | string                                       | '#000000'                                  | The background color of story container.
  `showName`                 | boolean                                      | false                                      | Whether you want to show user name under avatar in avatar list.
- `nameTextStyle`            | TextStyle                                    |                                            | Additional styles for name text elements.
+ `nameTextStyle`            | TextStyle                                    | { width: `avatarSize` + 10 }               | Additional styles for name text elements.
+ `nameTextProps`            | TextProps                                    |                                            | Props to be passed to the name Text component.
  `videoProps`               | [react-native-video](https://www.npmjs.com/package/react-native-video?activeTab=readme#configurable-props)| | Additional props for video component. For more information, follow `react-native-video`.
  `closeIconColor`           | string                                       | '#00000099'                                | The color of story close icon.
  `progressColor`            | string                                       | '#00000099'                                | Background color of progress bar item in inactive state

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -25,6 +25,7 @@ const StoryAvatar: FC<StoryAvatarProps> = ( {
   size,
   showName,
   nameTextStyle,
+  nameTextProps,
 } ) => {
 
   const loaded = useSharedValue( false );
@@ -62,7 +63,14 @@ const StoryAvatar: FC<StoryAvatarProps> = ( {
           />
         </TouchableOpacity>
       </View>
-      {Boolean( showName ) && <Text style={nameTextStyle}>{name}</Text>}
+      {Boolean( showName ) && (
+        <Text
+          {...nameTextProps}
+          style={[ { width: size + AVATAR_OFFSET * 2 }, nameTextStyle ]}
+        >
+          {name}
+        </Text>
+      )}
     </View>
   );
 

diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
@@ -1,6 +1,6 @@
 import { SharedValue } from 'react-native-reanimated';
 import {
-  ImageProps, ImageStyle, TextStyle, ViewStyle,
+  ImageProps, ImageStyle, TextProps, TextStyle, ViewStyle,
 } from 'react-native';
 import { ReactNode } from 'react';
 import { InstagramStoryProps, StoryItemProps } from './instagramStoriesDTO';
@@ -15,6 +15,7 @@ export interface StoryAvatarProps extends InstagramStoryProps {
   size: number;
   showName?: boolean;
   nameTextStyle?: TextStyle;
+  nameTextProps?: TextProps;
 }
 
 export interface StoryLoaderProps {

diff --git a/src/core/dto/instagramStoriesDTO.ts b/src/core/dto/instagramStoriesDTO.ts
@@ -4,6 +4,7 @@ import {
   ImageStyle,
   ScrollViewProps, TextStyle, ViewStyle,
 } from 'react-native';
+import { TextProps } from 'react-native-svg';
 
 export interface StoryItemProps {
   id: string;
@@ -51,6 +52,7 @@ export interface InstagramStoriesProps {
   backgroundColor?: string;
   showName?: boolean;
   nameTextStyle?: TextStyle;
+  nameTextProps?: TextProps;
   videoProps?: any;
   closeIconColor?: string;
   progressActiveColor?: string;