Inside the render content when clicking custom made button it closes the story model

[Ahsanali012]

Inside the renderContent of the block when rendering the stories , I have made a custom button when clicked to delete a specific story. The issue is when i click it makes the story model close . Can you suggest me solution i want to be on the same story page when i am deleting it . following is my code

` if (AllStoriesPosts && AllStoriesPosts.length > 0) { InstaStories = AllStoriesPosts.map((story) => ({ id: story.id, name: story.name, imgUrl: story?.imgUrl,

  stories: story.stories.map((item) => {
    let mediaType: "video" | "image" | undefined;
    if (item.mediaType === "video" || item.mediaType === "image") {
      mediaType = item.mediaType;
    }
    return {
      id: item.id,
      mediaType: mediaType,
      sourceUrl: item.sourceUrl,
      renderContent: () => storyContent(item, story.id),
    };
  }),
}));

}`

the following is my custom made buttton inside "storyContent" const storyContent = (item, user_id) => { return ( <View style={twmt-[25%] flex-row justify-between w-full p-3}> <Text style={twfont-bold mx-2 text-base text-white`}> {item?.description} {auth.isAuth && auth.body._id == user_id && (

deleteStory(item.id)} style={tw`flex-row justify-start `} > {DeleteStoryLoading && deleteStoryId === item._id && ( )}

    )}
  </View>
);

};

`

[LukasFridmansky]

Can you send me what is you logic in deleteStory function?

[LukasFridmansky]

My recommendation for you is something like this: (it worked for me)

import InstagramStories, { InstagramStoriesPublicMethods, InstagramStoriesProps } from '@birdwingo/react-native-instagram-stories';

const YourComponent = () => {

  const modalRef = useRef<InstagramStoriesPublicMethods>( null );

  const [ stories, setStories ] = useState<InstagramStoriesProps['stories']>();

  const renderButton = ( children: string, onPress: () => void ) => <Button onPress={onPress} radius={50}>{children}</Button>;

  const onButtonPress = ( user: string, id: string ) => {

    setStories( ( val ) => val?.map( ( story ) => ( story.id === user ? {
      ...story,
      stories: story.stories.filter( ( item ) => item.id !== id ),
    } : story ) ) );

    modalRef.current?.goToNextStory();

  };

  useEffect( () => {

    setStories( STORIES.map( ( story, index ) => ( {
      id: String( index ),
      imgUrl: story.iconUrl,
      name: story.name,
      stories: story.stories.map( ( item ) => ( {
        id: item.id,
        source: { uri: item.image },
        renderContent: () => renderButton(
          item.button!,
          () => onButtonPress( String( index ), item.id ),
        ),
      } ) ),
    } ) ) );

  }, [] );

  if ( !stories ) {

    return null;

  }

  return (
    <InstagramStories
      ref={modalRef}
      stories={stories}
      {...} // rest of the props
    />
  );

};

[Ahsanali012]

My recommendation for you is something like this: (it worked for me)

import InstagramStories, { InstagramStoriesPublicMethods, InstagramStoriesProps } from '@birdwingo/react-native-instagram-stories';

const YourComponent = () => {

  const modalRef = useRef<InstagramStoriesPublicMethods>( null );

  const [ stories, setStories ] = useState<InstagramStoriesProps['stories']>();

  const renderButton = ( children: string, onPress: () => void ) => <Button onPress={onPress} radius={50}>{children}</Button>;

  const onButtonPress = ( user: string, id: string ) => {

    setStories( ( val ) => val?.map( ( story ) => ( story.id === user ? {
      ...story,
      stories: story.stories.filter( ( item ) => item.id !== id ),
    } : story ) ) );

    modalRef.current?.goToNextStory();

  };

  useEffect( () => {

    setStories( STORIES.map( ( story, index ) => ( {
      id: String( index ),
      imgUrl: story.iconUrl,
      name: story.name,
      stories: story.stories.map( ( item ) => ( {
        id: item.id,
        source: { uri: item.image },
        renderContent: () => renderButton(
          item.button!,
          () => onButtonPress( String( index ), item.id ),
        ),
      } ) ),
    } ) ) );

  }, [] );

  if ( !stories ) {

    return null;

  }

  return (
    <InstagramStories
      ref={modalRef}
      stories={stories}
      {...} // rest of the props
    />
  );

};

Thanks but can you suggest any other code suggestion as this one i understood but i dont want to add the data in useState.

[LukasFridmansky]

Oh, right, I think you could use modalRef.current?.setStories(). So basically as a prop to component you will give default stories and then you can set the new ones (filtered after delete) with modalRef.current?.setStories(...). I think it should work the same way. If it doesn't work, I will think about adding new method to delete story.

[LukasFridmansky]

Hello, did it help or is there something needed from my side?

[Ahsanali012]

Hello, did it help or is there something needed from my side?

Can Suggest other way of doing this if possible

[LukasFridmansky]

I can't think of any other solution

[Ahsanali012]

maybe you can detect in renderContent any action method like onPress if dispatched than not to close the stories modal.

` return { id: item.id, mediaType: mediaType, sourceUrl: item.sourceUrl, renderContent: () => storyContent(item, story.id), };

      const storyContent = (item, user_id) => {
return (
  <View style={tw`mt-[25%] flex-row justify-between w-full p-3`}>
    <Text style={tw`font-bold mx-2 text-base text-white`}>
      {item?.description}
    </Text>
    {auth.isAuth && auth.body._id == user_id && (
      <View>
        <TouchableOpacity
          key={item.id}
          onPress={() => deleteStory(item.id)}
          style={tw`flex-row justify-start `}
        >
          <Ionicons
            size={imageSizes.sm}
            color={tw.color(`text-red-400`)}
            name={"trash"}
            style={tw`mx-3 `}
          />

          {DeleteStoryLoading && deleteStoryId === item._id && (
            <View key={item?._id}>
              <ActivityIndicator
                style={tw`mx-2`}
                color={primary}
                size={"small"}
              />
            </View>
          )}
        </TouchableOpacity>
      </View>
    )}
  </View>
);

};

`