A tinted overlay that allows one or more elements to be highlighted (non-tinted).

Overview

Highlight overlay

A tinted overlay that allows one or more elements to be highlighted (non-tinted). Works with all types of components; native, function, class, etc.

Supports switching between highlights, useful for a "tutorial" / "walkththrough" flow where you step the user through different parts of a screen. Also very useful for highlighting an element when the user enters the app from a deep link.

⚠️ Caveats ⚠️

  • If the highlightedElementId given to the HighlightOverlay does not correspond to an existing HighlightableElement, the overlay will be shown without any highlight. Might change this in the future. For now make sure the id always exists.
  • In certain setups, the position of the highlighted element might be off by a fraction. If this happens to you, set the rootRef of HighlightableElementProvider manually to the root element of your app. However in most circumstances this is not necessary.
  • If your HighlightedElement is inside a scroll view (like in the demo video above) the HighlightOverlay must also be inside the scroll view, otherwise the highlighted element will not properly overlay the "root" element. This is because of how React Native handles measuring positions & sizes. I'm working on possible fixes to make this more user-friendly.

Installation

# npm
npm install react-native-highlight-overlay

# yarn
yarn add react-native-highlight-overlay

Usage

{/* * The HighlightOverlay should be next to the ROOT of the app, * since it is NOT a modal, it's just an absolutely positioned view. * If you want it to be a modal, wrap it in yourself first, * but I recommend not using modals since they can be buggy. */} { // Called when the user clicks outside of the highlighted element. // Set "highlightedElementId" to nullish to hide the overlay. }} /> ); ">
import {
    HighlightableElement,
    HighlightableElementProvider,
    HighlightOverlay,
} from "react-native-highlight-overlay";

// Remember to wrap the ROOT of your app in HighlightableElementProvider!
return (
    <HighlightableElementProvider>
        <HighlightableElement id="important_item">
            <TheRestOfTheOwl />
        </HighlightableElement>

        {/* 
          * The HighlightOverlay should be next to the ROOT of the app, 
          * since it is NOT a modal, it's just an absolutely positioned view.
          * If you want it to be a modal, wrap it in 
     
       yourself first,
     
          * but I recommend not using modals since they can be buggy.
          */}
        <HighlightOverlay
            // You would usually use a state variable for this :)
            highlightedElementId="important_item"
            onDismiss={() => {
                // Called when the user clicks outside of the highlighted element.
                // Set "highlightedElementId" to nullish to hide the overlay.
            }}
        />
    </HighlightableElementProvider>
);

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Issues
  • Mask highlight

    Mask highlight

    This PR replaces the original implementation of duplicating the highlighted element with an SVG overlay using clip paths. This solution is less hack-y and comes with a few additional improvements, namely the ability to customise the highlight.

    enhancement 
    opened by Charanor 0
Releases(v1.2.0)
  • v1.2.0(Oct 15, 2021)

    What's Changed

    • Changed method to use Svg with clip path instead of duplicating highlighted element. This allows for more configuration on how the highlight is displayed.

    Full Changelog: https://github.com/Charanor/react-native-highlight-overlay/compare/v1.1.0...v1.2.0

    Source code(tar.gz)
    Source code(zip)
Owner
Jesper Sporron
Picture by Ravenmore (https://ravenmore.itch.io/)!
Jesper Sporron
React Native Blur Overlay Library For Ios And Android

react-native-blur-overlay Getting started $ npm install react-native-blur-overlay --save Mostly automatic installation $ react-native link react-nativ

Sajjad Asadi 83 Aug 29, 2021
React Native Mapview component for iOS + Android

react-native-maps React Native Map components for iOS + Android ⚠️ Maintainers Wanted We are in need of more people or companies willing to help. If y

null 12.6k Oct 12, 2021
:barber: React Native loading spinner overlay

React Native Loading Spinner Overlay Table of Contents Install Example Options Recommended Implementation Contributors License Install npm: npm instal

Spontaneous 1.4k Oct 16, 2021
A button (or a grouped buttons) supporting multiple or radio selection by building with React Native. https://github.com/danceyoung/selectmultiplebuttons for Swift.

React Native SelectMultiple Button This library is a button (or a grouped buttons) supporting multiple or radio selection by building with React Nativ

Young 76 Sep 16, 2021
Step-by-step walkthrough for your react native app

React Native Copilot Step-by-step walkthrough for your react native app! Demo Creation of this project was sponsored by OK GROW! Installation npm inst

Mohamad Mohebifar 1.7k Oct 12, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.7k Oct 12, 2021
ScrollView with an image in header which becomes a navbar

react-native-image-header-scroll-view A ScrollView-like component that: Has a fixed image header Keep the image as a nav bar Works on iOS and Android

BAM 809 Oct 13, 2021
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 365 Oct 14, 2021
A drawer component for React Native Application.

react-native-drawer-menu A drawer component for React Native Application (ios / android) Similar to drawer menu component of QQ mobile. Examples iOS P

WyTiny 162 Oct 12, 2021
A react native android package to show a blurry overlay.

Blurry overlay for react-native android This is very experimental A react native android module to add a blurry overlay. Setup install module npm i -

null 74 Nov 26, 2020
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 241 Oct 3, 2021
A React Native component for drawing by touching on both iOS and Android.

react-native-sketch-canvas A React Native component for drawing by touching on both iOS and Android. Features Support iOS and Android Stroke thickness

Terry 543 Oct 4, 2021
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 406 Oct 3, 2021
A sibling elements manager.

react-native-root-siblings Version 4.x requires react-native version >= 0.59, 3.x requires react-native version >= 0.47 Add sibling elements after you

Horcrux 555 Oct 11, 2021
React Native Tip is a simple package inspired in MaterialUI-Tooltip

React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some important item in your app. It is useful to explain the user some funcionality.

Maicon Gilton de Souza Freire 26 Sep 18, 2021
📈Powerful React-Native ECharts Wrapper 📊

react-native-echarts-wrapper v2.0.0 Apache ECharts (incubating) wrapper build for React Native/Expo. Screenshots • How To Use • Authors A React Native

Thomas Leiter 153 Oct 7, 2021
A Popover component for react-native

react-native-popover A <Popover> component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas

Jean Regisser 651 Oct 12, 2021
Semantic layout components for React Native

react-native-layout Semantic JSX layout components for react-native This library contains multiple easy-to-use react-native layout components which br

Christoph Jerolimov 55 Oct 7, 2021
Parallax effects for React Native using Animated API

react-native-parallax NOTE: This module requires React Native 0.8+ Installation npm install --save react-native-parallax Usage Note: Parallax.Image e

Joel Arvidsson 567 Oct 7, 2021