search

birdwingo / react-native-instagram-stories

🚀 Instagram stories is a versatile React Native component designed to display a horizontal scrollable list of user stories, similar to the stories feature found in the Instagram app.
https://birdwingo.com
MIT License
131 stars 35 forks source link

feat(stories): add support for giving styles to stories list items container #49

Closed huzaifaazim0 closed 8 months ago

huzaifaazim0 commented 8 months ago

Problem: Users encountered a lack of support for adding styles to the stories list items container in the previous version of the library. Consequently, when the stories were listed, there was no padding between them, resulting in a less visually appealing and potentially cluttered display.

Solution: This pull request addresses the issue by adding support for applying styles to the stories list items container. With this enhancement, users can now customize the styles, including adding padding, to the stories list items container. As a result, the stories list items will have adequate spacing between them, improving readability and overall user experience.

Changes: 1- In src/components/Avatar/index.tsx: Addition: Added support for storyItemsContainerStyles prop to allow users to customize the styles of the container for story items. Deletion: None. 2- In src/components/InstagramStories/index.tsx: Addition: Incorporated the storyItemsContainerStyles prop to enable users to specify styles for the container of story items. Deletion: None. 3- In src/core/dto/componentsDTO.ts: Addition: Defined the storyItemsContainerStyles property in the StoryAvatarProps interface to facilitate the passing of custom styles for the container of story items. Deletion: None. 4- In src/core/dto/instagramStoriesDTO.ts: Addition: Added the storyItemsContainerStyles property to the InstagramStoriesProps interface, allowing users to define styles for the container of story items. Deletion: None.

Testing: No additional tests are written and All previous tests passed

Screenshots Previously:

Screenshot 2024-02-20 at 10 31 33 PM

After changes:

Screenshot 2024-02-20 at 10 32 12 PM
LukasFridmansky commented 8 months ago

Hello, thank you for your contribution. However I think this attribute is not really needed. If the only thing you need is the space between avatars, you use avatarListContainerStyle with {gap: YOUR_VALUE}. Do you think that this attribute would be useful for anything else? Thank you!

huzaifaazim0 commented 8 months ago

Hello, Thank you for considering. To be honest, the only thing i wanted is to add is space between avatars and i couldn't think of the 'gap' property and i still couldn't think of anything else for which this attribute could be useful.

I will try to use the 'gap' property and is there anything else on which i can contribute? Thanks.

LukasFridmansky commented 8 months ago

Okay, in that case I close this request for now. Of course, feel free contribute again in future if you find anything useful. Thank you