Rectangular customizable spotlight, fading animation, touchable backdrop

[alxpkhl]

Premise

The library is good in general. During the tests, our team didn't encounter any issues. It works great and looks clean from the code perspective as well. Great work!

Unfortunately, it doesn't cover all requirements of our project at the moment. That's why we decided to improve this library by adding alternatives for the highlighted area and animation, a touchable backdrop, Native Driver for Android, etc.

Status

Stable. A review will be appreciated.

Changes

• Code refactored (removed unused imports, refactored AttachStep component)
• Added the possibility to use a rectangular spotlight as an alternative to a circle using the shape prop
• Added a possibility to style a rectangular spotlight with border-width and border-radius props using the shapeProperties prop
• Added the possibility to use a fade animation as an alternative to sliding using the motion prop
• Enabled Native Driver for animations by default (was previously disabled for Android)
• Added the possibility to prepare actions for the stop event using the onStop prop
• Added the possibility to go to the next step by pressing on the backdrop using the shouldContinueOnBackdropPress prop

[JoseLion]

Hi @Enneson, sorry for the delayed response! Thanks a lot for your contribution, I'll be reviewing the changes in the following days and try to post some status updates along the way 🙂

[JoseLion]

@Enneson, sorry for the late review. I think there are great features in this PR, but unfortunately, I passed the changes through the example in the repo and it seems they are breaking the spotlight sizing (see the attached video).

My first thought is that the issue may be caused by the changes in the styles of the AttachStep component, but I'm not entirely sure. Would you be able to take a look?

I think the AttachStep component should not have any styles. It should be a transparent component used only to attach the tour steps. I'll be checking that in the next few days 🙂

Cheers!

spotlight-example-pr54.mov

[tragicmj]

@JoseLion Hey, I guess the issue is also live in the package any updates on this one?

[JoseLion]

The issue should be solved now on version v2.0.0. We had to go over a refactor on the animation flow, so it might be hard to reconcile this PR with main. However, I'll work on adding all the features and ideas of this PR in the next minor releases ASAP. Thanks a lot for the contributions and for helping the library improve! 🎉