exposed-view v4.0.0

exposed-view 👁 👁️

Simple react-native View wrapper, to expose its position / size via colors.

Demo

Live Demo

Check this expo snack out.

Installation

If you use expo, use:

expo install exposed-view

Otherwise, for npm use:

npm i exposed-view --save

And for yarn use:

yarn add exposed-view

Usage

First, wrap your main app with the context provider, like so:

import { ExposedViewContextProvider } from "exposed-view";

export default function App() {
  return (
    <ExposedViewContextProvider exposeGlobal={true}>
      <MyApp />
    </ExposedViewContextProvider>
  );
}

After that, you can use the ExposedView component across your app, like so:

<ExposedView color={"steelblue"} style={{ width: 200, height: 200 }}>
  <Text style={{ fontSize: 14 }}>Some Container Text...</Text>
</ExposedView>

Global Toggle / "Kill-switch"

To make any exposing possible, make sure that at least one of the env variables EXPOSE_VIEW or EXPO_PUBLIC_EXPOSE_VIEW is set to "true" - otherwise it will render a normal react-native View instead, which doesn't include the coloring of course. The decision for this had performance reason for production environments - we recommend you to not set these env variables on production environments for simple deactivation of any visual highlighting of ExposedViews. Instead, your app will fall back to using standard View components instead. If you use this library inside an Expo Snack, this global toggle is automatically set to true, otherwise it could not be used there, since reading environment variables is not possible in Expo Snacks.

Props for ExposedViewContextProvider

The props you set here define the behaviour of all ExposedView components (see below) within your app.

Props for ExposedView component

An <ExposedView /> accepts all props that the standard <View /> accepts.

It also accepts the optional expose prop, which has a higher priority than the global exposeGlobal setting on the context provider.

Besides that, the following one prop is mandatory: color (of type CSSProperties["color"]), which decides the "exposing" color for that ExposedView

Additionally, the following props are optional, and can be used, to override the corresponding setting from the ExposedViewContextProvider, for individual ExposedViews: showWarnings, showDimensions, showPosition, widthPosition, heightPosition, showUnit. The definition and behaviour of all these props can be seen in the table above.

Summary over switch hierarchy

Since there are multiple switch mechanisms that decide, whether a View is exposed or not, let's summarize it again:

1. The exposeGlobal prop (required) on the context provider. It will switch on or off exposing for any ExposedView without an explicitly set expose prop.
2. The expose prop (optional) on the ExposedView component.
3. The exposeOverride prop (optional) on the context provider. If this is set (to either true or false) it will render the exposeGlobal props (1) as well as any set expose prop (2) useless. Only use it for temporary overriding.
4. The EXPOSE_VIEW and EXPO_PUBLIC_EXPOSE_VIEW environment variables. If at least one of them is set to "true", it will activate the entire library. If none of them is set to "true", it will deactivate it, meaning any prop above (1-3) will be rendered useless.

Future ideas / improvements

• Add intelligent avoidance of labels (positions + dimensions) overflowing the screen edges?
• Make labels only appear on hover for web?
• Make labels have half opacity, and only show fully on hover for web?
• Add possibility to show defined width/height vs. effective px width/height?
• Make position values be relative to parent?
• Add warning icon if style prop overwriting occurs?

If you enjoy using this...