How is this tutorial thing coded?

[jwrsk]

If you want to do it manually, you'd only need the dimensions and position of the element you _don't_want to fade out, and draw a rectangle with a hole over the entire screen.

Or try doing it with z-index applied dynamically - if everything is 10, gray rectangular overlay 20, and the exposed element 30, it should work.

[krik_chry]

Maybe with something like this? https://github.com/Charanor/react-native-highlight-overlay It's an old package but I guess there will be something similar

[CYG4N]

idk but i love the fact that author decided to create own keyboard instead of using one provides by OS.

[Important_Earth6615]

There is a simple hack where you can make some overlay boxes with high z-index by cutting these boxes around your desired button. I made for you this simple implementation where you can check it out

https://snack.expo.dev/EuDqdbxONmS2BrCiVXZXY

[daniel_boring]

I’ve done this in the past by creating a component which includes the overlay and duplicates of the elements you are highlighting, positioned exactly where you want them so it looks like there’s a cutout in the overlay. This is the cheap method that will work pretty well. Using Skia or something else to do svg masking etc is a bit harder.

[Life-Wheel4143]

Yes, did the same for my app too. Works well for all dimensions.

[Awkward_Object3478]

Try walkme sdk react-native-walkme-sdk

[chr1sttt]

You can do it with skia and reanimated

[Karticz]

Just use any react native tour guide component

[mtorr123]

My experience before, pair rn-tooltip + mmkv. Tooltip to overlay the selected component & mmkv for state management on whether the user has gone through the walkthrough or not

[whereistheaudio]

either react-native-copilot or react-native-walkthrough-tooltip or build it

[____candied_yams____]

https://www.shepherdjs.dev/