search

mohebifar / react-native-copilot

Step-by-step walkthrough tooltip for your react native app
MIT License
2.22k stars 406 forks source link

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

Closed KaulSalil closed 1 year ago

KaulSalil commented 6 years ago

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

screen shot 2018-09-14 at 7 32 39 pm

screen shot 2018-09-14 at 7 33 11 pm

mohebifar commented 6 years ago

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 commented 6 years ago

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

pribeh commented 6 years ago

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

KaulSalil commented 5 years ago

didnt have much luck with this till now .

RichardLitt commented 5 years ago

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

pribeh commented 5 years ago

@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 commented 5 years ago

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

screen shot 2018-11-12 at 4 48 51 pm screen shot 2018-11-12 at 4 49 19 pm

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

screen shot 2018-11-12 at 4 50 56 pm

If I set position custom component at the bottom, even I can not see the Tooltip: screen shot 2018-11-12 at 4 59 08 pm

shamanking commented 5 years ago

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 commented 5 years ago

hi, is there any solution for this ?

RichardLitt commented 5 years ago

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

shamanking commented 5 years ago

@dianbagus96 : I solved it with timeout:

this.timer = setTimeout(() => {
        this.props.start()
      }, 1000)
blazk0 commented 5 years ago

@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 ?