On Android the story does not cover full screen

[Ahsanali012]

On android when opening the story its not covering all screen also i am getting the warning

[Reanimated] Reading from valueduring component render. Please ensure that you don't access thevalueproperty nor useget` method of a shared value while React is rendering a component.

I have these libraries

"@birdwingo/react-native-instagram-stories": "^1.3.18",
"react-native-reanimated": "3.18.0",
"react-native-gesture-handler": "^2.18.1",

If you don't want to see this message, you can disable the strict mode. Refer to:
`

[geertvansoest]

After upgrading some packages we have similar problems on Android (but this still works fine on iOS). In our case the story also not covers the complete screen, but with a black background behind it. Furthermore, the story is not visible in the middle of the screen anymore (as I can see in your screenshot too):

Also the app crashes a couple of seconds after the stories become visible on Android. There's no warning in our console, but I'm not sure yet if this issue will also occur in production (our app is currently in dev-mode).

However, I don't think this issue is related to the Reanimated warning you're mentioning since that warning is also triggered on iOS. I created a ticket regarding that issue yesterday: #174.

Our current versions:

@birdwingo/react-native-instagram-stories: 1.3.18
react: 19.1.0
react-native: 0.80.2
react-native-gesture-handler: 2.28.0
react-native-reanimated: 3.19.1
react-native-svg: 15.12.1

[Ahsanali012]

@geertvansoest your android story also does not cover full screen same as my scenario?. For me on iOS it's fine.

If you have done some adjustments to make it appear full screen on Android please let me know

[geertvansoest]

@Ahsanali012 Yes, I think we have the same problem. But a difference is the black background is behind my story. In your case, I see the "regular" app right behind the story.

Since the problem appeared after I updated the app/packages I did a couple of tests to fix it by downgrading some dependency packages, but didn't find a solution yet.

iOS looks like this, so that's fine for me too:

[Ahsanali012]

@Ahsanali012 Yes, I think we have the same problem. But a difference is the black background is behind my story. In your case, I see the "regular" app right behind the story.

Since the problem appeared after I updated the app/packages I did a couple of tests to fix it by downgrading some dependency packages, but didn't find a solution yet.

iOS looks like this, so that's fine for me too:

I made it gray color for my understanding, also on ios the library is perfect only on android it freezes and not covering full screen. Can you name which libraries i must update to fix the issue on android ?

[geertvansoest]

As I said I'm also still facing the issues, so I don't know which libraries or piece of code occur the problems.

[geertvansoest]

I found a solution. Just append statusBarTranslucent={true} to the InstagramStories component. The prop is described in the docs (README) from this library and there's a similar issue: #107

Also check the backgroundColor prop if you are still having a transparent background behind the stories.

My stories now looks like this on Android: