diff --git a/README.md b/README.md index 9efa13a..2469640 100644 --- 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 index 37b9a63..4173ba2 100644 --- a/src/components/Avatar/index.tsx +++ b/src/components/Avatar/index.tsx @@ -25,6 +25,7 @@ const StoryAvatar: FC = ( { size, showName, nameTextStyle, + nameTextProps, } ) => { const loaded = useSharedValue( false ); @@ -62,7 +63,14 @@ const StoryAvatar: FC = ( { /> - {Boolean( showName ) && {name}} + {Boolean( showName ) && ( + + {name} + + )} ); diff --git a/src/components/InstagramStories/index.tsx b/src/components/InstagramStories/index.tsx index b11cd46..a627acb 100644 --- a/src/components/InstagramStories/index.tsx +++ b/src/components/InstagramStories/index.tsx @@ -29,6 +29,7 @@ const InstagramStories = forwardRef ) ) )} diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts index 4040961..a23691d 100644 --- 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 index 01f4637..d609b71 100644 --- a/src/core/dto/instagramStoriesDTO.ts +++ b/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;