Napoleon's Pixelated Mugshot

    @huds0n/components
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0-beta63 • Public • Published

    @huds0n/components

    Status GitHub Issues GitHub Pull Requests License


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

    📝 Table of Contents

    🧐 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

    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.

    Install

    npm i @huds0n/components

    DownloadsWeekly Downloads

    3

    Version

    1.6.0-beta63

    License

    MIT

    Unpacked Size

    457 kB

    Total Files

    96

    Last publish

    Collaborators

    • jonti_hudson