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