Design issue

[jaydips2020]

I am getting issue with design like this image

i will set tourguide at first textbox but it showing bottom side. not getting proper design.

anyone can have solution?

Code:

 <TourGuideProvider androidStatusBarVisible>
      <CreateSignatureContent props={props} />
    </TourGuideProvider>

content zone like this:

<TourGuideZone
                zone={1}
                shape="rectangle"
                text="Signed by show in top of the signature to identify name"
              >
.............//// stuff
</TourGuideZone>

[PierroD]

There is 2 ways to fix it :

• official one :
  (using the latest version)

add androidStatusBarVisible={true} to your TourGuideProvider

        <TourGuideProvider androidStatusBarVisible={true}>
          ...
        </TourGuideProvider>

• unofficial one :

go to node_modules\rn-tourguide\lib\components\Modal.js
And comment those lines :

      if (!this.props.androidStatusBarVisible && Platform.OS === 'android') {
        obj.top -= StatusBar.currentHeight || 30;
      }

[jaydips2020]

@PierroD In my case its did't work proper.
Already i used official way but its not working.
and going through the unofficial way its not working.

[bucketclan]

@jaydips2020 Does the example app not work for you? Any repo steps for the issue you are facing?

[rchavik]

@jaydips2020 how about using the following?

import { initialWindowMetrics } from 'react-native-safe-area-context';

const App = (props) => (
  <TourGuideProvider
    verticalOffset={ Platform.OS == 'web' ? 0 : initialWindowMetrics?.insets.top }
    ...
   />
)

[shreyasg-git]

had a similar issue - In my case I had misplaced the <TourGuideProvider/> moving it to the top level fixed the issue for me.