Fix/ Hint renders on wrong screen

[lidord-wix]

Description

Use TouchableWithoutFeedback instead of Modal to handle the Hint background press.
Checked on Android and on iOS, in the HintsScreen and in the ButtonsScreen.
WOAUILIB-2236

Changelog

Fix hint renders on the wrong screen

[ethanshar]

@lidord-wix I wrote a few comments..
Anyway this a big change, so we have to make sure the usages in One App are not affected in a bad way.

I would create a one app version with this fix and get a list of modules who use Hint (I hope they are not many) and then we probably want them to verify the functionality of the Hint is still intact

[ethanshar]

Why are you setting a default value here?
Also, it makes the check in line 400 redundant.. maybe it was intentional?

[lidord-wix]

Just because of the TS error, added a ts-expect-error for now

[ethanshar]

In that case it's better to fix the actual issue.
In this case ts-expect-error would never be solved, cause it's our code. If anything you can use ts-ignore

But I think that in this case we can just fix it.

You can declare the type of the targetLayoutInWindow in the state.
You can use casting to keep it simple, something like that

  state = {
    targetLayoutInWindow: undefined as {x: number, y: number, width: number, height: number} | undefined,
    targetLayout: this.props.targetFrame,
    hintUnmounted: !this.props.visible
  };

[ethanshar]

No need to condition this use case with onBackgroundPress
We take care of it in renderOverlay function, where we render the actual overlay.
Technically, the user can still have a hint with a background overlay

[ethanshar]

In that case it's better to fix the actual issue.
In this case ts-expect-error would never be solved, cause it's our code. If anything you can use ts-ignore

But I think that in this case we can just fix it.

You can declare the type of the targetLayoutInWindow in the state.
You can use casting to keep it simple, something like that

  state = {
    targetLayoutInWindow: undefined as {x: number, y: number, width: number, height: number} | undefined,
    targetLayout: this.props.targetFrame,
    hintUnmounted: !this.props.visible
  };

[ethanshar]

Added few more comments..