Skip to content

Releases: jiunshinn/react-native-focus-guide

v0.2.0

18 May 13:29

Choose a tag to compare

What's new

Highlight overhaul — the tooltip and hole are now measured from real content (no more hardcoded 320×120), so topCenter / topRight / right etc. anchor to the actual size you render. Animated fade-in, native-driver.

New props

  • visible — drive the tooltip declaratively
  • overlayColor, overlayOpacity — dim layer customization
  • holePadding — extra padding (dp) around the highlighted target
  • holeBorderColor, holeBorderWidth, holeBorderRadius — outline around the hole
  • dismissOnPress, dismissOnTargetPress — fine-grained dismiss control
  • animationDuration — fade duration (0 disables)

Fixed

  • Android coordinate misalignment on Expo edge-to-edge — Modal now opens with statusBarTranslucent and navigationBarTranslucent, plus +StatusBar.currentHeight is added to the measured Y so target and overlay share one coordinate space.
  • Boundary flip now preserves horizontal alignment (topRight → flips down but stays right-aligned).
  • Offset is clamped before the screen-bounds check, so it can no longer push the tooltip off-screen.
  • targetRef typed as React.RefObject<View | null> instead of RefObject<any>.
  • Dropped legacy findNodeHandle in favor of ref.measureInWindow — Fabric-safe.
  • No more setState after unmount.

Verified

  • Android: 17/17 targets pixel-perfect via agent-device sweep on Pixel 10 Pro emulator.
  • iOS: 17/17 targets pixel-perfect on iPhone 17 Pro simulator (SDK 55).
  • 30 Jest tests covering position math + component behavior.

Other

  • File renamed HighLightToolTip.tsxHighlightToolTip.tsx (case-correct).
  • Library + example bumped to React Native 0.83.6, React 19.2, Expo SDK 55.
  • Exported computeTooltipPosition helper for advanced consumers.

See CHANGELOG.md for the full list.