highlighted component alignment issue

xcarpentier / rn-tourguide

🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)

https://xcarpentier.github.io/rn-tourguide/

Other

725 stars 213 forks source link

highlighted component alignment issue #75

Open abdulahad96 opened 2 years ago

abdulahad96 commented 2 years ago

i am trying all ways for align my highlighted component in box

here is my Provider Calling

  <TourGuideProvider
        {...{
          //  verticalOffset: -30,
          tooltipComponent: UserGuideTutorial,
          backdropColor: 'rgba(0, 0, 0, 0.6)',

          // tooltipStyle:{paddingTop:-100,

          // }
        }}

        >

here is my Zone calling

 <UserGuideTourZone
                    zone={1}
                    maskOffset={0}
                     navigation={navigation}
                >
                    <CardView

                        onPressInfo={() => showModal(item)}
                        onPress={() => ButtonOnPress(item, isDisabled)}
                    />
                </UserGuideTourZone>

anyone Know what's the reason please give me a solution screenshot

arcsoftanil commented 2 years ago

@abdulahad96 same here any solution

arcsoftanil commented 2 years ago

@xcarpentier any update on this

mamin75dev commented 2 years ago

@abdulahad96 same here!!

PierroD commented 2 years ago

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;
}

akash-unibuddy commented 1 year ago

Thank you for the response. The official one worked perfectly fine for me