fix Android bottom shadow

[sapjax]

fix https://github.com/sekizlipenguen/react-native-popup-confirm-toast/issues/16

[sekizlipenguen]

When I do this, the bottom bar becomes unclickable on some android devices. Which android version and phone model are you experiencing this issue with?

[sekizlipenguen]

If you have set the status bar property "translucent" to true for android, you may be experiencing this problem.

[sapjax]

If you have set the status bar property "translucent" to true for android, you may be experiencing this problem.

Yeah, indeed, the origin issue only occurs when status bar "translucent". So maybe we should dynamically set the height by the status bar translucent property.

I'm using a Oneplus phone with Android 12 and set the navigation bar (virtual bottom bar) as a swipe Indicator, so I don't need to click on it, I'll test the normal virtual bar later. it may be related to the position of it https://docs.expo.dev/versions/latest/sdk/navigation-bar/#navigationbarsetpositionasyncposition.

[sapjax]

I tried out the normal virtual bar on my Oneplus phone, which has three buttons, and it worked fine. The buttons are clickable, and it appeared that the position of the virtual bar did not have any impact on it.

[sekizlipenguen]

Hi, You can set the requested parameter as follows. example:

statusBarTranslucent:true or false

Toast.show({
        title: 'I\'m Eight!',
        text: 'The best gift I received in this life are the codes. They are worlds inside the worlds.',
        backgroundColor: '#702c91',
        timeColor: '#440f5f',
        timing: 3000,
        icon: <Icon name={'check'} color={'#fff'} size={31}/>,
        position: 'top',
        statusBarTranslucent: false,
        statusBarType:'light-content',
        onCloseComplete: () => {
          alert('onCloseComplete');
        },
        onOpenComplete: () => {
          alert('onOpenComplete');
        },
});

[sapjax]

Hi, You can set the requested parameter as follows. example:

statusBarTranslucent:true or false

Toast.show({
        title: 'I\'m Eight!',
        text: 'The best gift I received in this life are the codes. They are worlds inside the worlds.',
        backgroundColor: '#702c91',
        timeColor: '#440f5f',
        timing: 3000,
        icon: <Icon name={'check'} color={'#fff'} size={31}/>,
        position: 'top',
        statusBarTranslucent: false,
        statusBarType:'light-content',
        onCloseComplete: () => {
          alert('onCloseComplete');
        },
        onOpenComplete: () => {
          alert('onOpenComplete');
        },
});

statusBarTranslucent: false

https://user-images.githubusercontent.com/990255/235823257-58277157-971a-4540-91df-608898357045.mp4

statusBarTranslucent: true

https://user-images.githubusercontent.com/990255/235823292-c4fbacae-a7df-401c-8184-c1a306618d85.mp4

Unlike what I remember, bottom shadows always appear, whether translucent true or false.

[sekizlipenguen]

looks so bad :( what phone model and android version?

works correctly on: mi a3

[sekizlipenguen]

I hope this version will fix the problem.

https://www.npmjs.com/package/react-native-popup-confirm-toast version: 2.3.2

[sapjax]

After upgrading, and set statusBarAndroidHidden: true, it works as expected 😁, thanks!

[crstnmac]

Thank you so much @sekizlipenguen & @sapjax much appreciated ❤️