Opening URL on footer press causes images to "get stuck"

[denys-anosov]

Hi,
I have a story with 2 images and a footer for each of them. The footer (returned via renderFooter function) looks like this:

  <TouchableOpacity
    onPress={onPress}
    style={styles.touchable}
  >
    <Text>{'Link to google'}</Text>
  </TouchableOpacity>

The onPress function is:

const onPress = useCallback(
    async () => {
      modalRef.current.pause();
      modalRef.current.hide();
      await Linking.openURL('https://google.com');
    },
    [],
  );

So, the issue is - after pressing the footer, opening a URL (it can be an external URL or just a different screen of the same app) and going back to viewing the same story, the second image "gets stuck" and it won't switch to the first one when tapping the sides of the screen.

Here is the video:

example.mp4

From my experience, this issue only occurs when opening URL on the second image (I didn't encounter such behavior when opening URL on the first or third image). Version of the library in my case - 1.2.6.

Could you please look into it, if possible? I tried to figure out the cause of the issue by myself, no luck so far. I would highly appreciate any info on this matter.

[gust-m]

Is it really necessary the use of all those methods? If you just open the link on your onPress method I think it will work as you want

 const onPress = () => {
     Linking.openURL('https://google.com');
 }

  const stories = [{
    id: 'user1',
    name: 'User 1',
    imgUrl: 'user1-profile-image-url',
    stories: [{ 
       id: 'story1',
       source: { uri: 'story1-image-url' },
       renderFooter: () => (
          <TouchableOpacity
             onPress={onPress}
             style={styles.touchable}
           >
             <Text>{'Link to google'}</Text>
           </TouchableOpacity>
         )
      }]},
  ];

[denys-anosov]

In my case it is necessary because I need to open not only external links in the browser, but also links to other screens of the app, and in order to see them I need to hide the modal explicitly, otherwise they'll just open in the background (underneath the modal).

[denys-anosov]

At this point, I found only one possible workaround of the mentioned issue (when images or other elements like footer, content 'get stuck').

src/components/Image/index.tsx, line 74 - add onImageChange function to dependencies:

useAnimatedReaction(
  () => activeStory.value,
  ( res, prev ) => res !== prev && runOnJS( onImageChange )(),
  [ activeStory.value, onImageChange ],
);

src/components/Footer/index.tsx, line 26 - add onChange function to dependencies:

useAnimatedReaction(
  () => activeStory.value,
  ( res, prev ) => res !== prev && onChange(),
  [ activeStory.value, onChange ],
);

src/components/Content/index.tsx, line 26 - add onChange function to dependencies:

useAnimatedReaction(
  () => activeStory.value,
  ( res, prev ) => res !== prev && onChange(),
  [ activeStory.value, onChange ],
);

After these changes the issue seems to be gone.