From 33e8dd8d15284aa565df32fa160a91d80c292120 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 28 Dec 2024 02:10:32 +0500 Subject: [PATCH 01/20] AddNewStoryAdded --- src/Story.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Story.tsx b/src/Story.tsx index 5edc4cf..a8b8adc 100644 --- a/src/Story.tsx +++ b/src/Story.tsx @@ -39,6 +39,7 @@ export const Story = ({ avatarImageStyle, avatarWrapperStyle, avatarFlatListProps, + onAddNewStory, }: StoryProps) => { const [dataState, setDataState] = useState(data); const [isModalOpen, setIsModalOpen] = useState(false); @@ -48,6 +49,10 @@ export const Story = ({ // Component Functions const _handleStoryItemPress = (item: IUserStory, index?: number) => { + if(index === 0 && onAddNewStory){ + onAddNewStory(); + return; + } const newData = dataState.slice(index); if (onStart) { onStart(item); From e7b874a28961144cdce5107006112ed4c826864e Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 28 Dec 2024 02:11:45 +0500 Subject: [PATCH 02/20] Update index.ts --- src/interfaces/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index 89b9d5f..48cbc97 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -177,6 +177,7 @@ export interface StoryProps { onClose?: (props?: IUserStory) => any; /** Called when story item is loaded */ onStart?: (props?: IUserStory) => any; + onAddNewStory?: () => any; /** * Function which will get called every time a story is seen. Will be called * every time the user swipes backwards and forwards to that screen. From 2340270a04040a02b9d05fb61fdcc1c212281774 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 28 Dec 2024 04:11:49 +0500 Subject: [PATCH 03/20] Update Story.tsx --- src/Story.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Story.tsx b/src/Story.tsx index a8b8adc..151465a 100644 --- a/src/Story.tsx +++ b/src/Story.tsx @@ -40,6 +40,7 @@ export const Story = ({ avatarWrapperStyle, avatarFlatListProps, onAddNewStory, + scrollViewStyle, }: StoryProps) => { const [dataState, setDataState] = useState(data); const [isModalOpen, setIsModalOpen] = useState(false); @@ -180,6 +181,7 @@ export const Story = ({ Date: Sat, 28 Dec 2024 04:12:30 +0500 Subject: [PATCH 04/20] Update index.ts --- src/interfaces/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index 48cbc97..9187cac 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -232,4 +232,5 @@ export interface StoryProps { storyAvatarImageStyle?: ImageStyle; /** Custom styles for the main story item container */ storyContainerStyle?: ViewStyle; + scrollViewStyle?: ViewStyle; } From fa9e1c2cac64be402d7a4bd1900c1511cafdf859 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 28 Dec 2024 04:13:27 +0500 Subject: [PATCH 05/20] Update StoryCircleListView.tsx --- src/StoryCircleListView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/StoryCircleListView.tsx b/src/StoryCircleListView.tsx index 550c65c..eb30f53 100644 --- a/src/StoryCircleListView.tsx +++ b/src/StoryCircleListView.tsx @@ -16,13 +16,14 @@ const StoryCircleListView = ({ avatarImageStyle, avatarWrapperStyle, avatarFlatListProps, + style, }: StoryCircleListViewProps) => { return ( index.toString()} data={data} horizontal - style={styles.paddingLeft} + style={style} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} ListFooterComponent={} From 2e2906829a2a947c4edc7668ed318f75ee46c3a5 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Mon, 30 Dec 2024 09:48:20 +0500 Subject: [PATCH 06/20] Border Removed --- src/StoryCircleListItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/StoryCircleListItem.tsx b/src/StoryCircleListItem.tsx index c80e6d8..78295c8 100644 --- a/src/StoryCircleListItem.tsx +++ b/src/StoryCircleListItem.tsx @@ -108,7 +108,6 @@ const styles = StyleSheet.create({ marginRight: 10, }, avatarWrapper: { - borderWidth: 2, justifyContent: 'center', alignItems: 'center', alignSelf: 'center', From b2217ce81a82445cf4ae18581eeed681c67da277 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Mon, 30 Dec 2024 19:05:14 +0500 Subject: [PATCH 07/20] Show story view flow --- src/Story.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Story.tsx b/src/Story.tsx index 151465a..f560d11 100644 --- a/src/Story.tsx +++ b/src/Story.tsx @@ -41,6 +41,7 @@ export const Story = ({ avatarFlatListProps, onAddNewStory, scrollViewStyle, + renderSwipeUpModal, }: StoryProps) => { const [dataState, setDataState] = useState(data); const [isModalOpen, setIsModalOpen] = useState(false); @@ -118,6 +119,7 @@ export const Story = ({ duration={duration * 1000} key={i} userId={x.user_id} + isMyStory={x.isMyStory} profileName={x.user_name} profileImage={x.user_image} stories={x.stories} @@ -142,6 +144,7 @@ export const Story = ({ storyImageStyle={storyImageStyle} storyAvatarImageStyle={storyAvatarImageStyle} storyContainerStyle={storyContainerStyle} + renderSwipeUpModal={renderSwipeUpModal} /> ); }); From bbe00d3c3d408d4998214b07ad0002f4c7665c9d Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Mon, 30 Dec 2024 19:05:42 +0500 Subject: [PATCH 08/20] show story view flow --- src/interfaces/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index 9187cac..1a9edf3 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -15,6 +15,7 @@ export interface IUserStory> { stories: IUserStoryItem[]; /** INTERNAL USE ONLY */ seen?: boolean; + isMyStory?: boolean; } export interface IUserStoryItem> { @@ -115,6 +116,8 @@ export interface StoryListItemProps { duration: number; /** Text of the swipe up button */ swipeText?: string; + renderSwipeUpModal?: any, + isMyStory?: boolean, /** * Callback which returns a custom React Element to use as the * swipeUpComponent. IUserStoryItem is passed as an arg. @@ -195,6 +198,8 @@ export interface StoryProps { * closeComponent. IUserStoryItem is passed as an arg. */ renderCloseComponent?: RenderCustomButton; + + renderSwipeUpModal?: any; /** * Callback which returns a custom React Element to use as the textComponent * next to the small avatar on the story item page. IUserStoryItem and From 46bf4207278d6884f9a634e0851a780fb106460a Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Mon, 30 Dec 2024 19:06:43 +0500 Subject: [PATCH 09/20] show story views flow --- src/StoryListItem.tsx | 53 ++++++++++++++++++++++++++----------------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/src/StoryListItem.tsx b/src/StoryListItem.tsx index 80f3d29..01699d3 100644 --- a/src/StoryListItem.tsx +++ b/src/StoryListItem.tsx @@ -45,6 +45,8 @@ export const StoryListItem = ({ storyImageStyle, storyAvatarImageStyle, storyContainerStyle, + renderSwipeUpModal, + isMyStory, ...props }: StoryListItemProps) => { const [load, setLoad] = useState(true); @@ -55,6 +57,7 @@ export const StoryListItem = ({ finish: 0, })), ); + const [showViewModal, setShowViewsModal] = useState(false); const [current, setCurrent] = useState(0); @@ -126,12 +129,15 @@ export const StoryListItem = ({ } function onSwipeUp(_props?: any) { - if (onClosePress) { - onClosePress(); - } - if (content[current].onPress) { - content[current].onPress?.(); - } + progress.stopAnimation(); + setPressed(true) + setShowViewsModal(true); + } + + function onViewModalClose() { + startAnimation(); + setPressed(false) + setShowViewsModal(false); } function onSwipeDown(_props?: any) { @@ -198,6 +204,7 @@ export const StoryListItem = ({ }); } }, [currentPage, index, onStorySeen, current]); + console.log("IS MY STORY: ", isMyStory); return ( - {typeof renderSwipeUpComponent === 'function' ? ( - renderSwipeUpComponent({ - onPress: onSwipeUp, - item: content[current], - }) - ) : ( - - - {swipeText} - - )} + { + isMyStory && + + Swipe up to see views + + } + {showViewModal && isMyStory && renderSwipeUpModal(showViewModal, onViewModalClose, content[current]?.story_id)} ); }; @@ -425,5 +424,17 @@ const styles = StyleSheet.create({ swipeText: { color: 'white', marginTop: 5, + },textContainer: { + width: '100%', + padding: 10, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + borderRadius: 20, + position: 'absolute', + bottom: 30, + }, + text: { + color: '#fff', // White text + fontSize: 16, // Font size + textAlign:'center' }, }); From 97f512559678961153c104f54336f351752a1fa0 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Mon, 30 Dec 2024 19:09:28 +0500 Subject: [PATCH 10/20] Console removed --- src/StoryListItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/StoryListItem.tsx b/src/StoryListItem.tsx index 01699d3..0d7837c 100644 --- a/src/StoryListItem.tsx +++ b/src/StoryListItem.tsx @@ -204,7 +204,6 @@ export const StoryListItem = ({ }); } }, [currentPage, index, onStorySeen, current]); - console.log("IS MY STORY: ", isMyStory); return ( Date: Tue, 31 Dec 2024 20:45:28 +0500 Subject: [PATCH 11/20] Update StoryListItem.tsx --- src/StoryListItem.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/StoryListItem.tsx b/src/StoryListItem.tsx index 0d7837c..dd2ea70 100644 --- a/src/StoryListItem.tsx +++ b/src/StoryListItem.tsx @@ -126,6 +126,8 @@ export const StoryListItem = ({ next(); } }); + if(showViewModal) + onSwipeUp(); } function onSwipeUp(_props?: any) { @@ -209,7 +211,7 @@ export const StoryListItem = ({ @@ -429,7 +431,8 @@ const styles = StyleSheet.create({ backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 20, position: 'absolute', - bottom: 30, + bottom: 0, + paddingBottom: 30, }, text: { color: '#fff', // White text From e8cec1951f03054f8e4182cb0830561d7794a5c5 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 4 Jan 2025 00:05:09 +0500 Subject: [PATCH 12/20] Update StoryListItem.tsx --- src/StoryListItem.tsx | 69 +++++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 36 deletions(-) diff --git a/src/StoryListItem.tsx b/src/StoryListItem.tsx index dd2ea70..87ca674 100644 --- a/src/StoryListItem.tsx +++ b/src/StoryListItem.tsx @@ -47,6 +47,7 @@ export const StoryListItem = ({ storyContainerStyle, renderSwipeUpModal, isMyStory, + renderDeleteButton, ...props }: StoryListItemProps) => { const [load, setLoad] = useState(true); @@ -58,6 +59,7 @@ export const StoryListItem = ({ })), ); const [showViewModal, setShowViewsModal] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); const [current, setCurrent] = useState(0); @@ -85,7 +87,7 @@ export const StoryListItem = ({ } }); setContent(data); - start(); + if(!load) start(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentPage]); @@ -98,12 +100,12 @@ export const StoryListItem = ({ current > prevCurrent && content[current - 1].story_image == content[current].story_image ) { - start(); + if(!load) start(); } else if ( current < prevCurrent && content[current + 1].story_image == content[current].story_image ) { - start(); + if(!load) start(); } } } @@ -126,8 +128,6 @@ export const StoryListItem = ({ next(); } }); - if(showViewModal) - onSwipeUp(); } function onSwipeUp(_props?: any) { @@ -136,8 +136,20 @@ export const StoryListItem = ({ setShowViewsModal(true); } + function onDeleteOpen(_props?: any) { + progress.stopAnimation(); + setPressed(true) + setShowDeleteModal(true); + } + + function onDeleteClose() { + if(!load) startAnimation(); + setPressed(false) + setShowDeleteModal(false); + } + function onViewModalClose() { - startAnimation(); + if(!load) startAnimation(); setPressed(false) setShowViewsModal(false); } @@ -152,7 +164,6 @@ export const StoryListItem = ({ }; function next() { - // check if the next content is not empty setLoad(true); if (current !== content.length - 1) { let data = [...content]; @@ -217,16 +228,17 @@ export const StoryListItem = ({ > - start()} - source={{ uri: content[current].story_image }} - style={[styles.image, storyImageStyle]} - /> {load && ( )} + progress.stopAnimation()} + onLoadEnd={() => {if(!showDeleteModal && !showViewModal) start()}} + source={{ uri: content[current].story_image }} + style={[styles.image, storyImageStyle]} + /> @@ -268,24 +280,9 @@ export const StoryListItem = ({ {profileName} )} - - {typeof renderCloseComponent === 'function' ? ( - renderCloseComponent({ - onPress: onClosePress, - item: content[current], - }) - ) : ( - { - if (onClosePress) { - onClosePress(); - } - }} - > - X - - )} - + { + renderDeleteButton && isMyStory && renderDeleteButton(content[current]?.story_id, showDeleteModal, onDeleteOpen, onDeleteClose) + } { - isMyStory && - - Swipe up to see views - + content[current]?.caption !== "" && + + {content[current]?.caption} + } {showViewModal && isMyStory && renderSwipeUpModal(showViewModal, onViewModalClose, content[current]?.story_id)} @@ -366,7 +363,7 @@ const styles = StyleSheet.create({ right: 0, }, spinnerContainer: { - zIndex: -100, + zIndex: 10, position: 'absolute', justifyContent: 'center', backgroundColor: 'black', @@ -432,7 +429,7 @@ const styles = StyleSheet.create({ borderRadius: 20, position: 'absolute', bottom: 0, - paddingBottom: 30, + paddingBottom: 50, }, text: { color: '#fff', // White text From 0d52aa06c98bcf8fa889ce5f09e64d05c54c9a4c Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 4 Jan 2025 00:06:27 +0500 Subject: [PATCH 13/20] Update Story.tsx --- src/Story.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Story.tsx b/src/Story.tsx index f560d11..a3e1de1 100644 --- a/src/Story.tsx +++ b/src/Story.tsx @@ -42,6 +42,7 @@ export const Story = ({ onAddNewStory, scrollViewStyle, renderSwipeUpModal, + renderDeleteButton, }: StoryProps) => { const [dataState, setDataState] = useState(data); const [isModalOpen, setIsModalOpen] = useState(false); @@ -135,6 +136,7 @@ export const Story = ({ onClose(x); } }} + renderDeleteButton={renderDeleteButton} index={i} onStorySeen={onStorySeen} unloadedAnimationBarStyle={unloadedAnimationBarStyle} From 9851f3b63aacba88a6db0de1801a29c30a7a4d47 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sat, 4 Jan 2025 00:07:00 +0500 Subject: [PATCH 14/20] Update index.ts --- src/interfaces/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index 1a9edf3..e3165a2 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -123,6 +123,7 @@ export interface StoryListItemProps { * swipeUpComponent. IUserStoryItem is passed as an arg. */ renderSwipeUpComponent?: RenderCustomButton; + renderDeleteButton?: any; /** * Callback which returns a custom React Element to use as the * closeComponent. IUserStoryItem is passed as an arg. @@ -193,6 +194,7 @@ export interface StoryProps { * swipeUpComponent. IUserStoryItem is passed as an arg. */ renderSwipeUpComponent?: RenderCustomButton; + renderDeleteButton?: any; /** * Callback which returns a custom React Element to use as the * closeComponent. IUserStoryItem is passed as an arg. From fc3b9ecb58d8de8ec17dd4b6bcab16ac093de6ba Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Sun, 5 Jan 2025 00:42:05 +0500 Subject: [PATCH 15/20] Update StoryCircleListItem.tsx --- src/StoryCircleListItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/StoryCircleListItem.tsx b/src/StoryCircleListItem.tsx index 78295c8..0522d4f 100644 --- a/src/StoryCircleListItem.tsx +++ b/src/StoryCircleListItem.tsx @@ -75,7 +75,6 @@ const StoryCircleListItem = ({ avatarImageStyle, ]} source={{ uri: item.user_image }} - defaultSource={Platform.OS === 'ios' ? DEFAULT_AVATAR : null} /> {showText && ( From 240f9b40ee7fc99e330b7bf2c1b5dd322290fd5a Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Fri, 17 Jan 2025 01:28:32 +0500 Subject: [PATCH 16/20] Minor Changes on border of story seen --- src/StoryCircleListItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/StoryCircleListItem.tsx b/src/StoryCircleListItem.tsx index 0522d4f..63a97c4 100644 --- a/src/StoryCircleListItem.tsx +++ b/src/StoryCircleListItem.tsx @@ -54,9 +54,10 @@ const StoryCircleListItem = ({ { height: avatarWrapperSize, width: avatarWrapperSize, + borderWidth: item?.user_id.toString() !== 'add_story' && !item?.isMyStory ? 2 : 0, }, avatarWrapperStyle, - !isPressed + !item?.seen ? { borderColor: unPressedBorderColor ?? 'red', } @@ -75,6 +76,7 @@ const StoryCircleListItem = ({ avatarImageStyle, ]} source={{ uri: item.user_image }} + defaultSource={item?.user_id.toString() !== 'add_story' ? DEFAULT_AVATAR : ''} /> {showText && ( From 266240716c7dace9bb2ee5e3e40d31fde80cb497 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Fri, 7 Feb 2025 07:52:59 +0500 Subject: [PATCH 17/20] Update Story.tsx --- src/Story.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Story.tsx b/src/Story.tsx index a3e1de1..831cde7 100644 --- a/src/Story.tsx +++ b/src/Story.tsx @@ -43,6 +43,8 @@ export const Story = ({ scrollViewStyle, renderSwipeUpModal, renderDeleteButton, + defaultAvatar, + defaultAddStory }: StoryProps) => { const [dataState, setDataState] = useState(data); const [isModalOpen, setIsModalOpen] = useState(false); @@ -198,6 +200,8 @@ export const Story = ({ avatarWrapperStyle={avatarWrapperStyle} avatarImageStyle={avatarImageStyle} avatarFlatListProps={avatarFlatListProps} + defaultAddStory={defaultAddStory} + defaultAvatar={defaultAvatar} /> Date: Fri, 7 Feb 2025 07:54:36 +0500 Subject: [PATCH 18/20] Update index.ts --- src/interfaces/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index e3165a2..af0379f 100644 --- a/src/interfaces/index.ts +++ b/src/interfaces/index.ts @@ -85,6 +85,9 @@ interface SharedCircleListProps { } export interface StoryCircleListViewProps extends SharedCircleListProps { + style: any; + defaultAvatar?: Image; + defaultAddStory?: Image; data: IUserStory[]; /** * Custom props for the avatar FlatList. @@ -99,6 +102,8 @@ export interface StoryCircleListViewProps extends SharedCircleListProps { export interface StoryCircleListItemProps extends SharedCircleListProps { item: IUserStory; + defaultAvatar?: Image; + defaultAddStory?: Image; } // TODO: add JSDoc comments where necessary @@ -161,6 +166,8 @@ export interface StoryListItemProps { } export interface StoryProps { + defaultAvatar?: Image; + defaultAddStory?: Image; /** An array of IUserStory's */ data: IUserStory[]; /** Time in seconds */ From fbe87e0c1cc802a0ec109b64be076f506397571e Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Fri, 7 Feb 2025 07:56:48 +0500 Subject: [PATCH 19/20] Update StoryCircleListView.tsx --- src/StoryCircleListView.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/StoryCircleListView.tsx b/src/StoryCircleListView.tsx index eb30f53..fc5b632 100644 --- a/src/StoryCircleListView.tsx +++ b/src/StoryCircleListView.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { View, FlatList, StyleSheet } from 'react-native'; import StoryCircleListItem from './StoryCircleListItem'; -import { StoryCircleListViewProps } from 'src/interfaces'; +import { StoryCircleListViewProps } from './interfaces'; const StoryCircleListView = ({ data, @@ -17,6 +17,8 @@ const StoryCircleListView = ({ avatarWrapperStyle, avatarFlatListProps, style, + defaultAvatar, + defaultAddStory }: StoryCircleListViewProps) => { return ( )} {...avatarFlatListProps} From 9bb83ddb8e18a870ccb316b79d652bb76bbbc553 Mon Sep 17 00:00:00 2001 From: Abdullah Faheem Date: Fri, 7 Feb 2025 07:58:45 +0500 Subject: [PATCH 20/20] Update StoryCircleListItem.tsx --- src/StoryCircleListItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/StoryCircleListItem.tsx b/src/StoryCircleListItem.tsx index 63a97c4..377ae2c 100644 --- a/src/StoryCircleListItem.tsx +++ b/src/StoryCircleListItem.tsx @@ -11,8 +11,6 @@ import { import { usePrevious } from './helpers/StateHelpers'; import { IUserStory, StoryCircleListItemProps } from './interfaces'; -import DEFAULT_AVATAR from './assets/images/no_avatar.png'; - const StoryCircleListItem = ({ item, unPressedBorderColor, @@ -25,6 +23,8 @@ const StoryCircleListItem = ({ handleStoryItemPress, avatarImageStyle, avatarWrapperStyle, + defaultAvatar, + defaultAddStory }: StoryCircleListItemProps) => { const [isPressed, setIsPressed] = useState(item?.seen); @@ -76,7 +76,7 @@ const StoryCircleListItem = ({ avatarImageStyle, ]} source={{ uri: item.user_image }} - defaultSource={item?.user_id.toString() !== 'add_story' ? DEFAULT_AVATAR : ''} + defaultSource={item?.user_id.toString() !== 'add_story' ? defaultAvatar : defaultAddStory} /> {showText && (