feat: enable button link

[gust-m]

Hi guys, first thanks for the amazing lib, it has been very helpful. English its not my native language so if i make some grammatical mistake just dont mind.

I added a button to support a link (like instagram does), as gif example:

Here is button config:

{
  buttonStyle: {} as ViewStyle,
  buttonTextStyle: {} as TextStyle,
  hasIcon: true,
  buttonText: '',
}

You can change the default style of button with buttonStyle (once the button is position absolute you can change its position with inset), and customize the text style inside it with buttonTextStyle. There is a default attach icon that shows it as default, but you can set hasIcon prop to false to remove it. And buttonText is literally the text of the button.

such as:

<InstagramStories
     stories={stories}
     // All your configs
     linkButtonConfig={{
         buttonStyle={
             // All your custom button style
         },
          buttonTextStyle={
             // All your custom button text style
         },
         hasIcon: true // If you want or not show attach icon (its true as default)
         buttonText: 'LEARN MORE' // text shown on button
      }}
/>

The button link will only and just only show on screen if it has buttonText prop and story.link. There is just one icon, but I intend to turn it a new prop, to make it dynamic and more useful to users.

OBS: This new feature does not impact nagatively current and old users, if you not provide the prop linkButtonConfig, and story.link it will work as ever, so you dont have to mind if users with old structure update the package.

If you guys want me to make any changes or have any ideas to improve, please let me know. Hope I can contribute with this.

[LukasFridmansky]

Hello, thanks for your suggestions and improvements, however each story can have a renderContent prop that returns a custom component, I think it could be used for your button as well. Can you explain why your solution is better? Or is there something I didn't understand correctly, or something that doesn't work? Component that is returned by renderContent function will be placed above story image with absolute position, so with style e. g. {bottom: 50}, you should be able to place the button where you need to.

[gust-m]

Hi Lukas, thanks for your answer, with renderContent prop the button really shows up on screen, but when you press it, it hits the gesture handler first, which cause skip story while navigate to link, so if the button is on right it skips to next story, and if its on left it go back to previous story, i recorded an example:

Maybe im doing something wrong, here is my code example:

  const StoryButton = () => (
    <StoryLinkButton
      onPress={()=> {
        Linking.openURL('https://www.google.com/')
      }}
    >
      <StoryLinkTextButton> SAIBA MAIS</StoryLinkTextButton>
    </StoryLinkButton>
  )

   {
      id: 'user1',
      name: 'Descontos',
      imgUrl:
        'https://storage.googleapis.com/neopro-photos/storylines-demo/fe248e4d-21fe-4e2e-a91f-660e8061c9e5.png',
      watched: false,
      stories: [
        {
          id: 'story1',
          sourceUrl:
            'https://storage.googleapis.com/neopro-photos/storylines-demo/fe248e4d-21fe-4e2e-a91f-660e8061c9e5.png',
          renderContent: () => StoryButton()
        },
        {
          id: 'story2',
          sourceUrl:
            'https://storage.googleapis.com/neopro-photos/storylines-demo/859657ae-ce41-4a75-be76-46fda692449c.png',
          renderContent: () => StoryButton()
        },
        {
          id: 'story3',
          sourceUrl:
            'https://storage.googleapis.com/neopro-photos/storylines-demo/7cd92ef5-5a66-4f90-ac03-d8a27deca4db.png',
          renderContent: () => StoryButton()
   }

I have tried with onPress and onPressIn, also tried event.stopPropagation() but none of them seems work correctly

[Lipo11]

Hello!, really thanks for your contribution. Appreciate that! We are preparing new release based on your changes. Thanks again.