Nothing works on Android

[A-Ghattas]

Hi, great library. I am trying to make this work with
"expo": "^53.0.20"
"react": "19.0.0"
"@birdwingo/react-native-instagram-stories": "^1.3.18"

and basically once the modal is open nothing seem to work

• When I click on the image, the indicator stops
• When I click on the x the indicator starts again
• When the indicator reaches the end it starts loading forever
• The modal is not covering the whole screen
• There is no background and playing around with the props, the only thing that adds a background is adding it to the mediaContainerStyle

If you need any other information, please let me know

[Ahsanali012]

I'm too facing this issue

[Lipo11]

Hello, we currently don't support expo

[Ahsanali012]

But for Cli react native I am using it still keeps loading and not showing the story . Have you fixed this ?

[Lipo11]

we are using that library in our apps without any problems, im sure you are doing smth wrong, can you share your usage ?

[A-Ghattas]

Hello, we currently don't support expo

@Lipo11, Well, After a few hours of research and debugging and a lot of coffee, I figured out the problem. There is a known bug (I don't know if it's specific to expo or not) that makes Pressable behave really weird inside Modal. The fix is very simple tho:
Encapsulate the Modal inside a View (I also tried with Animated.View since you're using it, and it works).
And with this simple change, my good sir (or lady), I have the pleasure to inform you that your library works like a charm in expo.

Here is the code, I tried to push and create a pull request but I don't have access to push a new branch apparently. I just added the <Animated.View> and the matching closing tag. Can you please push this change, it'll be great. Thanks.

src/components/Modal/index.tsx

  return (
    <Animated.View>
      <Modal statusBarTranslucent={statusBarTranslucent} visible={visible} transparent animationType="none" testID="storyRNModal" onRequestClose={onClose}>
        <GestureHandler onGestureEvent={onGestureEvent}>
          <Animated.View style={ModalStyles.container} testID="storyModal">
            <Pressable
              onPressIn={onPressIn}
              onPress={onPress}
              onLongPress={onLongPress}
              onPressOut={onPressOut}
              delayLongPress={LONG_PRESS_DURATION}
              style={ModalStyles.container}
            >
              <Animated.View style={[ ModalStyles.bgAnimation, backgroundAnimatedStyles ]} />
              <Animated.View style={[ ModalStyles.absolute, animatedStyles, containerStyle ]}>
                {stories?.map( ( story, index ) => (
                  <StoryList
                    {...story}
                    index={index}
                    x={x}
                    activeUser={userId}
                    activeStory={currentStory}
                    progress={animation}
                    seenStories={seenStories}
                    onClose={onClose}
                    onLoad={( value ) => {

                      onLoad?.();
                      startAnimation(
                        undefined,
                        value !== undefined ? value : duration,
                      );

                    }}
                    avatarSize={storyAvatarSize}
                    textStyle={textStyle}
                    paused={paused}
                    videoProps={videoProps}
                    closeColor={closeIconColor}
                    hideElements={hideElements}
                    videoDuration={videoDuration}
                    loaderColor={loaderColor}
                    loaderBackgroundColor={loaderBackgroundColor}
                    key={story.id}
                    {...props}
                  />
                ) )}
              </Animated.View>
            </Pressable>
            {footerComponent && footerComponent}
          </Animated.View>
        </GestureHandler>
      </Modal>
    </Animated.View>
  );