@huds0n/components

Enhanced components for React Native.Badge, Button, FadeOverlay, FlatList, Icon, Pressable, ScrollView, and View.

📝 Table of Contents

About
Components
Getting Started
Usage
- Badge
- Button
- FadeOverlay
- FadeOverlayContainer
- FlatList
- Icon
- Pressable
- ScrollView
- View
Authors
Acknowledgments

🧐 About

Enhanced common react native components!

✅ List of Components

Badge: Numbered badge, similar to IOS notification badge.
Button: Highly customizable button, with built-in spinner.
FadeOverlay: Overlay container that enables fading at component edges.
FlatList: Enhanced to have built-in pull to refresh, scroll fading, and more.
Icon: Use either image or vector icon props, and optional badge.
Pressable: Easily control feedback.
ScrollView: Automatic scroll to focus when used with @huds0n/inputs, dynamically disables scrolling when content less than view.
View: Has onPressThrough method and enables passing layout directly to children._

🏁 Getting Started

Prerequisites

Requires React Native 0.63 or above. If using Expo install @expo/vector-icons and expo-linear-gradient, otherwise install and link react-native-vector-icons and react-native-linear-gradient.

Installing

npm i @huds0n/components

🧑‍💻 Usage

Badge

Prop	Required/(Default)	Description	Type
color	#E63B2E	Background color	string
containerStyle	-	Badge container style	viewstyle
maxValue	9	Over this value the badge will just show a plusPrevents large badge values which will be difficult to see	number
offset	-	Translates badge to the right offset	{ x?: number,y?: number }
size	14	Size of badge	number
textColor	#FFFFFF	Text color	string
textStyle	#FFFFFF	Button text style color	textStyle
value	✔	Current badge value	number

Button

Inherits all Pressable props.

Prop	Required/(Default)	Description	Type
color	-	Background color	string
disabledLabelStyle	-	Label style when disabled	textStyle
disabledStyle	-	Disabled container style	viewstyle
dismissInputOnPress	true	If true, input is dismissed on button press	boolean
label	-	Label textAlso set by passing a string as a child prop	string
labelStyle	-	Label style	textStyle
pressedStyle	-	Pressed container style	viewstyle
pressedLabelStyle	-	Pressed label style	textStyle
spinner	false	Show activitity indicatior instead of label	boolean
spinnerColor	#FFFFFF	Color of activity indicator	string
spinnerStyle	-	Spinner container style	viewStyle
style	-	Base container style	viewstyle
useIsConnected	-	If true, becomes disabled when there is no networkRequires @huds0n/network-manager initialized	boolean

FadeOverlay

Prop	Required/(Default)	Description	Type
color	#FFFFFF	Oapaque color color	string
height	-	Height of container	number or string
intensity	2	The rate fade	integer
position	TOP	Defines which direction to fade	'TOP', 'BOTTOM', 'LEFT', or 'RIGHT'
width	-	Width of container	number or string

FadeOverlayContainer

Prop	Required/(Default)	Description	Type
top	-	Top fade	FadeOverlay Props or boolean
bottom	-	Bottom fade	FadeOverlay Props or boolean
left	-	Left fade	FadeOverlay Props or boolean
right	-	Right fade	FadeOverlay Props or boolean

This component can be placed within any view, quickly adding fading to any/all sides. If option is true a standard white fade is used

FlatList

Like the ScrollView, the FlatList will automatically disable its scroll if the conents are smaller than the container.

Prop	Required/(Default)	Description	Type
activityIndicatorColor	-	Activity indicator color on pull to refresh	string
fade	-	Controls edge fading	FadeOverlayContainer Props
keyName	-	Extract key from an element's propertyData elements must be objects	key of data element
onPullToRefresh	-	Adds Refresh Control, runs on pulling down	() => (void \| Promise<void>)

Icon

Inherits all Pressable props except style.

Prop	Required/(Default)	Description	Type
badge	0	Adds badge with value	number
dismissInputOnPress	true	If true, input is dismissed on icon press	boolean

backgroundColor	-	Background color	string
badgeProps	-	Style badge	Badge props
color	-	Icon color	string
containerStyle	-	Badge container style	viewstyle
size	20	Icon size	number

Component	-	Icon component	React.Component

imageProps	-	Icon image component props, if source is used	Image Props
source	-	Icon image source	Image Source

set	-	VectorIcon set name	Set Name
name	-	VectorIcon icon name	Icon Name

disableProps	-	Over-ride props when disabled	(any of the above)
pressedProps	-	Over-ride props when pressed	(any of the above)

Icon will preferentially be a vector icon if there is a name and set, then an image icon if there is a source, and finally a component icon.

Pressable

Inherits all React Native's Pressable props except style.

Prop	Required/(Default)	Description	Type
android_ripple	false	Adds ripple effect as feedback to android devicesIf true, defaults to darker background color	RippleConfig or boolean
feedback	'none'	Type of feedback	'fade', 'hightlight', or 'none'
feedbackIntensity	-	The intensity of the fade, highlight, or ripple	number
whilePress	-	Take a function that return another functionThe initial function is called on pressThe return function is called on release	() => () => void

ScrollView

Like the FlatList, the ScrollView will automatically disable its scroll if the conents are smaller than the container.Also, if the @huds0n/inputs module is being used, the ScrollView will automatically scroll to ensure any focused input is in view.

Prop	Required/(Default)	Description	Type
inputPadding	20	The amount of padding the ScrollView will ensure focused inputs will have	number
fade	-	Controls edge fading	FadeOverlayContainer Props

View

Inherits all React Native's View props.

Prop	Required/(Default)	Description	Type
onPressThrough	-	Called whenever the view captures a touch eventHowever, touch event still passed down to children	() => any
children	-	Accepts either children or function that receives layout	React Node or (layout: Layout) => React Node

Similar to Pressable, View can take a function. This function passes in Layout which can be directly used. Layout is undefined initally as it is calculated on mount. Once calculated, height, width, x, and y are available to use.

import { View } from '@huds0n/components';

export function ExampleFunction() {
  return (
    <View style={{ height: '100%', width: '100%' }}>
      {(layout) =>
        layout && (
          <Text style={{ fontSize: layout.height / 2 }}>
            This text will grow with View size
          </Text>
        )
      }
    </View>
  );
}

✍️ Authors

@JontiHudson - Idea & Initial work
@MartinHudson - Support & Development

See also the list of contributors who participated in this project.

🎉 Acknowledgements

Special thanks to my fiance, Arma, who has been so patient with all my extra-curricular work.

@huds0n/components