Has any one tried to use this library along with react navigation

[KaulSalil]

Hi This library fits my use case very well ,unfortunately some of the views that i need highlighted are on different screens/routes/navigators/components . They are not a single component . One of the views that i need to highlight is in side drawer . The first screenshot contains the top tab bar in which i want to highlight all the individual items and the second screen shot contains the drawer which i want to high light . We are using react navigation . Kindly help please

[mohebifar]

I believe it should be doable using the step change event listener and updating rn-navigation's state accordingly. I am currently working on a new example app that includes react-navigation. However, I can't estimate when I'll be able to finish it.

[KaulSalil]

i am also thinking on the similar lines will update you with the progress i make in this approach .

[pribeh]

I'm going to give this a stab this weekend. I'll report back as well.

[KaulSalil]

didnt have much luck with this till now .

[RichardLitt]

Thanks for updating us, @kaulsalil88. @pribeh Did you get a chance to take a stab at it?

[pribeh]

@RichardLitt Not yet. I'm also using React Native Navigation, but the logic shouldn't be that different. I'll likely be able to get to it next week.

[shamanking]

I have same issue. It's nice for the first screen:

but when I navigate to another screen, I want to display tooltip at text AAAAA, but it looks weird:

If I set position custom component at the bottom, even I can not see the Tooltip:

[shamanking]

I have solution for react-navigation, we need to calculate for obj.left and obj.top In CopilotModal.js, function _animateMove()

async _animateMove(obj = {}): void {
    const layout = await this.measure();
    obj.left = obj.left % Dimensions.get('window').width
    obj.top = obj.top % Dimensions.get('window').height

    if (!this.props.androidStatusBarVisible && Platform.OS === 'android') {
      obj.top -= StatusBar.currentHeight; // eslint-disable-line no-param-reassign
    }
...

[dianbagus96]

hi, is there any solution for this ?

[RichardLitt]

@dianbagus96 Not at the moment. Anyone is free to make a PR, at this point, though. :)

[shamanking]

@dianbagus96 : I solved it with timeout:

this.timer = setTimeout(() => {
        this.props.start()
      }, 1000)

[obiwankenoobi]

@dianbagus96 : I solved it with timeout:

this.timer = setTimeout(() => {
        this.props.start()
      }, 1000)

@shamanking awesome workaround

[blazk0]

@mohebifar

I believe it should be doable using the step change event listener and updating rn-navigation's state accordingly. I am currently working on a new example app that includes react-navigation. However, I can't estimate when I'll be able to finish it.

Hello, is there anyway i can use it with react navigation header icon and bottom tab nav icons ?