Not taking full screen

[amosaxe]

I have tried everything but it never takes full screen, theres always some area left at the top and bottom.

[Lipo11]

Hello, can you send us the image you provided and screenshoot from your device? Thanks.

[amosaxe]

Hi, sure, i am attaching the screenshot as well as the image used here.

So, as in the screenshot, you can see there is a gap above the progress bar. We have tried multiple things as this looked like silly styling issue from our side, but could not fix even after trying everything.

[amosaxe]

Adding the whole code that we are using

import React from 'react';
import {View} from 'react-native';
import InstagramStories from '@birdwingo/react-native-instagram-stories';

const App = () => {
  const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
  const stories = [
    {
      id: 'user1',
      name: 'User 1',
      imgUrl:
        'https://banner2.cleanpng.com/20190606/xch/kisspng-faded-music-mask-disc-jockey-darkside-5cf8dd7baf38c5.5844290115598134997177.jpg',
      stories: [
        {
          id: 'story1',
          sourceUrl:
            'https://i1.sndcdn.com/artworks-IrhmhgPltsdrwMu8-thZohQ-t500x500.jpg',
        },
        {
          id: 'story2',
          sourceUrl:
            'https://i.pinimg.com/originals/8e/27/58/8e2758477b11d7c44d8defe9bf08ffb6.jpg',
          mediaType: 'image',
        },
      ],
    },
    {
      id: 'user1',
      name: 'User 1',
      imgUrl:
        'https://banner2.cleanpng.com/20190606/xch/kisspng-faded-music-mask-disc-jockey-darkside-5cf8dd7baf38c5.5844290115598134997177.jpg',
      stories: [
        {
          id: 'story1',
          sourceUrl:
            'https://i1.sndcdn.com/artworks-IrhmhgPltsdrwMu8-thZohQ-t500x500.jpg',
        },
        {
          id: 'story2',
          sourceUrl:
            'https://i.pinimg.com/originals/8e/27/58/8e2758477b11d7c44d8defe9bf08ffb6.jpg',
          mediaType: 'image',
        },
      ],
    },
  ];

  return (
    <View>
      <InstagramStories
        stories={stories}
        containerStyle={{
          height: SCREEN_HEIGHT,
          width: SCREEN_WIDTH,
        }}
        backgroundColor="white"
      />
    </View>
  );
};

export default App;

[Lipo11]

are you using new fabric arch enabled?

[amosaxe]

No. Also, I checked out the official Birdwingo app, and feels like this is the expected behaviour from the package. But, can you let me know where should I make the changes if I want to increase the height of the layout? I do understand the cubic animation will require us not to take full screen, but still the current layout looks a lot empty space.

[Lipo11]

Thanks for the info. This is not the expected behaviour and we will investigate for a fix. Can you tell us what phone are you using ( type and android version ). Currently we are a busy a bit, i think we can check that next week.

[amosaxe]

Hi Sure, Poco X2 Android 11 MIUI 12.

Also, as we are going to use this library extensively and are working to add many features, we are ready to be contribute as well, but have some doubts, which if cleared, can enable us to do the same.

[Lipo11]

Hello, we really love to cooperate with everyone, so pull request are really welcome! :) We just have a strict rules inside of company like: hold our linter and write new things globally ( example: "bottom button api" will not be acceptable, we are preferring footer component instead. ). Your bug should be fixed in the new today release, please let us know if its working correctly. See ya!

[Audeos]

Hey. The issue persists on my phone. I'm using Xiaomi Redmi Note 8 Pro, but it happens on iOS emulator too. It also pushes footer below the screen.