Background mask not taking full height in android

[ShivamJoker]

trafficstars

As you can see in the image there is some space left in the bottom.

These are providers I am using

const App = () => (
  <ColorSchemeProvider>
    <BottomSheetModalProvider>
      <SafeAreaProvider>
        <TourGuideProvider
          androidStatusBarVisible={true}
          animationDuration={250}>
          <StatusBar
            barStyle="dark-content"
            backgroundColor="#c8b900"
            translucent
          />
          <AppContent />
        </TourGuideProvider>
      </SafeAreaProvider>
    </BottomSheetModalProvider>
  </ColorSchemeProvider>
);

Full code can be seen here - https://github.com/ShivamJoker/SQL-Play/blob/d409f4b0c06323c022ed99a6e5384c0ff66d4a83/src/component/App.tsx#L205

[Md-Mudassir]

I'm also facing the same issue.. did you find any fix? @ShivamJoker

[ShivamJoker]

@Md-Mudassir no, this library seems unmaintained

[i-kelly]

@Md-Mudassir no, this library seems unmaintained

https://github.com/xcarpentier/rn-tourguide/blob/c22e6c339871f1bc67e858c0c140212f478b9658/src/components/SvgMask.tsx#L42 I change this code and full screen const FIRST_PATH = M0,0H${screenDimensions.width}V${ screenDimensions.height + StatusBar.currentHeight}H0V0ZM${screenDimensions.width / 2},${ screenDimensions.height / 2} h 1 v 1 h -1 Z

[Md-Mudassir47]

@Md-Mudassir no, this library seems unmaintained

https://github.com/xcarpentier/rn-tourguide/blob/c22e6c339871f1bc67e858c0c140212f478b9658/src/components/SvgMask.tsx#L42

I change this code and full screen const FIRST_PATH = M0,0H${screenDimensions.width}V${ screenDimensions.height + StatusBar.currentHeight}H0V0ZM${screenDimensions.width / 2},${ screenDimensions.height / 2} h 1 v 1 h -1 Z

Thank you so much, It worked

[i-kelly]

@Md-Mudassir no, this library seems unmaintained

https://github.com/xcarpentier/rn-tourguide/blob/c22e6c339871f1bc67e858c0c140212f478b9658/src/components/SvgMask.tsx#L42

I change this code and full screen const FIRST_PATH = M0,0H${screenDimensions.width}V${ screenDimensions.height + StatusBar.currentHeight}H0V0ZM${screenDimensions.width / 2},${ screenDimensions.height / 2} h 1 v 1 h -1 Z

Thank you so much, It worked

I use patch-package library in my project https://github.com/ds300/patch-package

[DvillamizarM]

hello the above solution did not work for me in node_modules\rn-tourguide\lib\components\SvgMask.js i changed the window dimensions from 'window' to 'screen' and that fixed the shadow issue .. but the unshaded area is still higher than it should be

[Md-Mudassir47]

hello the above solution did not work for me in node_modules\rn-tourguide\lib\components\SvgMask.js i changed the window dimensions from 'window' to 'screen' and that fixed the shadow issue .. but the unshaded area is still higher than it should be

Try the below code (replace it here /node_modules/rn-tourguide/lib/components/SvgMask.js) .. for me it worked

const screenDimensions = Dimensions.get('screen')
const FIRST_PATH = `M0,0H${screenDimensions.width}V${screenDimensions.height}H0V0ZM${screenDimensions.width / 2},${screenDimensions.height / 2} h 1 v 1 h -1 Z

[gigeos]

hello the above solution did not work for me in node_modules\rn-tourguide\lib\components\SvgMask.js i changed the window dimensions from 'window' to 'screen' and that fixed the shadow issue .. but the unshaded area is still higher than it should be

Same for me

[Md-Mudassir47]

hello the above solution did not work for me in node_modules\rn-tourguide\lib\components\SvgMask.js i changed the window dimensions from 'window' to 'screen' and that fixed the shadow issue .. but the unshaded area is still higher than it should be

Same for me

What version have you installed? for me it worked in "rn-tourguide": "^2.7.1", try in this version

[spideyinf]

Same issue for me on Android

[evanlarkin10]

I'm having this issue on android, the tabbar is not part of the masked area. In version 3.2.0 this solution is implemented and the issue is still happening.

[xcarpentier]

Can someone make an MR of it?

[gigeos]

For my part, I just add a little timeoutto be sure screen is rendered and now it's well displayed

[lucidprojects]

A bit of a hack but I just adjust the canvasSize a bit by adding to the calculated screen height height + PX. Works well in both iOS and Android and with both tourguide version 3.2.0 and 2.7.1

this.handleLayout = ({ nativeEvent: { layout: { width, height }, }, }) => {
                this.setState({
                    canvasSize: {
                        x: width,
                        y: height + 125,
                    },
                });
            };

[AGIsam]

Hello,

For my part, i fix the issue to edit :

this.windowDimensions = Dimensions.get('screen'); instead of Dimensions.get('window');

in node_modules/svgMask.js

[pke]

This has been fixed in October 21 and this issue should be closed.