fix: name text dont fit

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

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>
   );
 

src/components/InstagramStories/index.tsx

@@ -29,6 +29,7 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
   backgroundColor = BACKGROUND_COLOR,
   showName = false,
   nameTextStyle,
+  nameTextProps,
   videoAnimationMaxDuration,
   videoProps,
   closeIconColor = CLOSE_COLOR,
@@ -238,6 +239,7 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
             size={avatarSize}
             showName={showName}
             nameTextStyle={nameTextStyle}
+            nameTextProps={nameTextProps}
             key={`avatar${story.id}`}
           />
         ) ) )}

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 {

src/core/dto/instagramStoriesDTO.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import {
   ImageProps,
   ImageStyle,
-  ScrollViewProps, TextStyle, ViewStyle,
+  ScrollViewProps, TextStyle, ViewStyle, TextProps,
 } from 'react-native';
 
 export interface StoryItemProps {
@@ -51,6 +51,7 @@ export interface InstagramStoriesProps {
   backgroundColor?: string;
   showName?: boolean;
   nameTextStyle?: TextStyle;
+  nameTextProps?: TextProps;
   videoProps?: any;
   closeIconColor?: string;
   progressActiveColor?: string;