jasongaare/react-native-walkthrough

A lightweight walkthrough library for React Native utilizing React's Context API

react-native-walkthrough's Issues

WalkthroughElement desperately needs "isActive" prop

E.g. you have WalkthroughElement in a list, so you want to show Tooltip only on the first element. But this is not the only case of course.

Allow multiple uses of WalkthroughElement

Hi @jasongaare ,

thanks for your nice lib!
I needed to revisit certain WalkthroughElement and provide a different content for it.
You can check my commit here, the code is actually quite straight forward
danielwinkler@a92c7aa

It will allow the following

export default [
  {
    id: 'profile-button',
    content: makeTooltipContent('Tap here to view a profile'),
  },
  {
    id: 'profile-name',
    content: makeTooltipContent("Here is the user's name"),
  },
  {
    id: 'profile-button',
    content: makeTooltipContent('Now tap again!'),
  },
];

I also changed the whole module to typescript, which allowed me to understand your implementation

Please let me know if you are interested in

• this feature
• the ts implementation

I would create proper pull request; (unfortunately the current commits don't properly show the differences i did to the file as the filename change from js to tsx at the same time :-(

First walkthrough tooltips not appearing on Android

Hi,

I implemented this component in my app and all is well in the iOS simulator. However when I try it on the Android emulator, the first tooltip appears, but the most of the rest don't on the first run, and you have to tap as if they were all showing up. Which ones work and which ones don't on the first run appear to be somewhat random. The second time you start the walkthrough process, though, all seems to work.

Here's a gif of going into the section of the app with the walkthrough; tapping the question mark icon on the top right start its, and i wiggle the mouse and click when a tooltip isn't showing. It skips 5 of them:

Don't have this issue on iOS. Source repo is here:

https://github.com/OurVoiceUSA/HelloVoter/tree/master/mobile

I tried using the v0.1-refinements branch and the issue still exists.

Any ideas what might be happening?

Love this component by the way! It's really awesome. Thanks,

Unable to handle overlay click

When clicking on the overlay to close the guide, I cannot handle the click. I have tried using onClose in the tooltips which successfully runs the callback but then doesn't actually exit the guide. How do I make sure that the walkthrough is closed on click but I also handle the click?

Walkthrough elements shifted on Android

Dear jasongaare,

thank you very much for providing that wonderful walkthrough that I am currently using in my app for a user onboarding.
Everything works very nicely on IOS. However, I do encounter problems when trying the app on my android device (Pixel 3) with Expo.
Every child element in the walkthrough is shifted about 40px to the bottom of the original element (see Screenshot)
Is there any way to fix this?

"react-native": "0.64.3"
"expo": "^44.0.0"
"expo-app-loading": "~1.3.0"
"expo-application": "~4.0.1"
expo-cli 6.0.2

Thank you very much for your support!
Best regards

Jeanine

Children elements not displayed properly on Android

Hello,

Not sure if this is an issue for this repo or for https://github.com/jasongaare/react-native-walkthrough-tooltip but I have the following behaviour:
I've integrated the library in my project, on iOS everything works well after some small styling tweaks but on Android, every highlighted element is changing it's position (usually it appears lower than the child element) - screenshots attached.

I have tried to change some style properties but for Android the issue remains.

Do you know what can be wrong?

Thanks!

Android:

iOS:

position: 'absolute' => tooltip wrong position

When children component have style {position: 'absolute'} - tooltip showing in wrong position

What is the status of this library? Should we be using react-native-walkthrough-tooltip instead?

I noticed this library hasn't been updated in 3 years. Is that because the changes only needed to occur in react-native-walkthrough-tooltip - or because this library is not supported/recommended anymore?

Thanks for your great work @jasongaare

How to prematurely exit a walkthrough?

Thank you for all the hard work put into this library. It works great for our use-case.
I was wondering how to let the user exit the walkthrough in between.

Any help is appreciated.

No license

Is there any license for this code?

AFAIK legally the only thing one can do now with the code is browse the source on Github: https://opensource.stackexchange.com/a/1721

Popup should be clicked multiple times to close

Hi,

Awesome plugin btw!

Got problem with the popup though, it should be clicked until 2 times to fully close the popup. How can I only click 1 time and it is closing perfectly?

Keep background overlay visible during tooltip transition

Currently the dimmed tooltip background is hidden when transitioning to the next item. Can this be prevented?

Attribute "placement" is actualy required in GuideType

Regardless of documentation, attribute "placement" is actualy required in GuideType (ContextWrapper.tsx). So, TypeScript is highlighting the example from readme as an error.

Add props for changing timeout durations status

Hello,

Any updates regarding "add props for changing timeout durations" todo?
It will be introduce any time soon or should we open a PR for this?

Thank you 👍

Unable to handle click on overlay

If user wants to stop walkthrough by clicking on overlay, there is no way for this. Or do I miss someting?

Managed Scrolling

@jasongaare First off thanks for your work putting this together- awesome library!

In my project, I'm using this library to display a walkthrough on elements within a ScrollView. Some of the elements are initially below-the-fold and not visible until you scroll down.

Right now, when I target below-the-fold elements, the modal overlay is shown, but I cannot see the tooltip.

I'd like to use a single guide for all the elements on the page, and have the library automatically scroll the below-the-fold elements into view. Do you think we should implement this into the library or do you know of a different way to manage this?

Happy to write a PR if you think it should be included. Best!

Overriding tooltip prop onClose of WalkthroughEvent makes tooltip impossible to close

As the title says, whenever you override the onClose function of the tooltip, it makes the tooltip impossible to be closed.

I tried to override it because I need to scroll down the screen (as exemplified in issue #11), but I can't make it work properly, since I can't access the WalkthroughEvent ref to force it to close or go the next. Passing an dispatchWalkthroughEvent to the next event doesn't work either.

<ScrollView ref={(ref) => (this.scrollView = ref)}>
  <WalkthroughElement
    id="element-1"
    tooltipProps={{
      onClose: () => this.scrollView.scrollToBottom({ animated: true })
    }}
  >
    <Element1>
  </WalkthroughElement>
  <WalkthroughElement id="element-2">
    <Element2>
  </WalkthroughElement>
</ScrollView>