Repository files navigation

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, andsize.

We recommend using thereact-native-vector-icons library withreact-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 theHudProvider component.

• yarn add react-native-hud-view ornpm install react-native-hud-view

You can use theHudProvider 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';importFontAwesomeIconfrom'react-native-vector-icons/FontAwesome';constApp=()=>{return(<HudProviderIconComponent={FontAwesomeIcon}><MainComponent/></HudProvider>);};

You can use theuseHudContext hook to access theshow andhide methods of the HUD context.

import{useHudContext}from'react-native-hud-view';constMyComponent=()=>{const{ show, hide}=useHudContext();consthandlePress=async()=>{show({name:'rocket'});awaitperformAsyncOperation();hide();};return<ButtononPress={handlePress}title="Perform Async Operation"/>;};

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 totrue by default. If you wish to disable it, please set it tofalse on theHudProvider.

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

You can pass these options as a second argument to theshow 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 yourHudProvider is configured like this:

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

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

You can use any icon library withreact-native-hud-view. You just need to provide anIconComponent to theHudProvider component. TheIconComponent should accept the following props:

• color: The color of the icon.
• name: The name of the icon.
• size: The size of the icon.

importFontAwesomeIconfrom'react-native-vector-icons/FontAwesome';constApp=({ children})=>{return<HudProviderIconComponent={FontAwesomeIcon}>{children}</HudProvider>;};

You can style the HUD container by passing styles to thecontainerStyles prop of theHudProvider component.

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

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

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

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 usereact-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.