npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-hud-view

v2.1.0

Published

A lightweight, flexible, and customizable progress indicator library for React Native. The library provides an easy way to show a HUD (Heads-up Display) when you need to indicate progress or loading in your application.

Downloads

91

Readme

react-native-hud-view

react-native-hud-view is a lightweight, flexible, and customizable progress indicator library for React Native. The library provides an easy way to show a HUD (Heads-up Display) when you need to indicate progress or loading in your application.

react-native-hud-view is a standalone library and does not have any dependencies. However, you will need to provide your own icon component to use with the library. The icon component should accept the following props: color, name, and size.

We recommend using the react-native-vector-icons library with react-native-hud-view, as it is guaranteed to work with the library. To use a different icon library, simply provide the appropriate icon component to the HudProvider component.

Installation

  • yarn add react-native-hud-view or npm install react-native-hud-view

Usage

Wrap your app with HudProvider

You can use the HudProvider component at the root of your application to provide the context for showing the HUD. This component should wrap your application's main component.

import { HudProvider } from 'react-native-hud-view';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return (
    <HudProvider IconComponent={FontAwesomeIcon}>
      <MainComponent />
    </HudProvider>
  );
};

Show and hide the HUD

You can use the useHudContext hook to access the show and hide methods of the HUD context.

import { useHudContext } from 'react-native-hud-view';

const MyComponent = () => {
  const { show, hide } = useHudContext();

  const handlePress = async () => {
    show({ name: 'rocket' });
    await performAsyncOperation();
    hide();
  };

  return <Button onPress={handlePress} title="Perform Async Operation" />;
};

Options

The following options are available for configuring the HUD:

  • fadeDuration (default: 700): The duration of the fade animation in milliseconds.
  • backgroundColor (default: 'rgba(0,0,0,0.8)'): The background color of the HUD.
  • borderRadius (default: 5): The border radius of the HUD.
  • height (default: 80): The height of the HUD.
  • width (default: 80): The width of the HUD.
  • rotate (default: false): Whether or not to show a rotating animation on the HUD.
  • rotateDuration (default: 800): The duration of the rotation animation in milliseconds.

useNativeDriver is set to true by default. If you wish to disable it, please set it to false on the HudProvider.

<HudProvider IconComponent={Icon} useNativeDriver={false}>
  {children}
</HudProvider>

You can pass these options as a second argument to the show method of the HUD context. For example:

show({ name: 'rocket' }, { rotate: true });

You can also use these options to the HudProvider if you want to configured them once, globally. However, when using "show" the global options will be overwritten by the argument options. For example if your HudProvider is configured like this:

<HudProvider IconComponent={Icon} backgroundColor="blue">
  {children}
</HudProvider>

and you execute show({ name: 'rocket' }, { backgroundColor: 'red' }); the HUD will have the background color red for this particular execution.

Icons

You can use any icon library with react-native-hud-view. You just need to provide an IconComponent to the HudProvider component. The IconComponent should accept the following props:

  • color: The color of the icon.
  • name: The name of the icon.
  • size: The size of the icon.
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

const App = ({ children }) => {
  return <HudProvider IconComponent={FontAwesomeIcon}>{children}</HudProvider>;
};

Styling

You can style the HUD container by passing styles to the containerStyles prop of the HudProvider component.

<HudProvider IconComponent={Icon} containerStyles={{ backgroundColor: 'blue' }}>
  {children}
</HudProvider>

You can also style the wrapper view that contains the HUD by passing styles to the style prop of the HudProvider component.

<HudProvider IconComponent={Icon} style={{ backgroundColor: 'blue' }}>
  {children}
</HudProvider>

License

react-native-hud-view is licensed under the MIT License. This means that anyone can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software as long as they include the original copyright and license notice in all copies or substantial portions of the software.

You are free to use react-native-hud-view in any commercial or non-commercial project without attribution, but it is always appreciated if you mention the author in your project's acknowledgments or credits.