Triko Base components

• AnimatedArrowDown
• AnimatedArrowLeft
• AnimatedArrowRight
• AnimatedArrowUp
• CircleWave
• Scale
• Slide
• Label
• LocationProvider
• LoaderScreen
• LoaderIcon
• NetworkStatus
• Text
• VersionDisplay

Structure

|__ src 
    |__ anims
    |    |__ animated-arrow-down
    |    |__ animated-arrow-left
    |    |__ animated-arrow-right
    |    |__ animated-arrow-up
    |    |__ circle-wave
    |    |__ scale
    |    |__ slide        
    |
    |__ components
    |    |__ label
    |    |__ location-provider    
    |    |__ network-status
    |    |__ text
    |    |__ version-display
    |
    |__ loaders
    |    |__ loader-icon
    |    |__ loader-screen

Components definition

AnimatedArrowDown

Displays an animated arrow down

| location | types | | :-- | :-- | | src/anims/animated-arrow-down | src/anims/types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | contentOnDone | No | boolean | If the content will be displayed only when the animation it's done | | | delay | No | number | The delay applied to the animation | 0 | | duration | No | number | The duration applied to the animation | 2000 | | style | No | any | Styles applied to the component | {} | | onAnimationCompleted | No | void | Function to be triggered when the animation its done | |

AnimatedArrowLeft

Displays an animated arrow left

| location | types | | :-- | :-- | | src/anims/animated-arrow-left | src/anims/types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | contentOnDone | No | boolean | If the content will be displayed only when the animation it's done | | | delay | No | number | The delay applied to the animation | 0 | | duration | No | number | The duration applied to the animation | 2000 | | style | No | any | Styles applied to the component | {} | | onAnimationCompleted | No | void | Function to be triggered when the animation its done | |

AnimatedArrowRight

Displays an animated arrow right

| location | types | | :-- | :-- | | src/anims/animated-arrow-right | src/anims/types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | contentOnDone | No | boolean | If the content will be displayed only when the animation it's done | | | delay | No | number | The delay applied to the animation | 0 | | duration | No | number | The duration applied to the animation | 2000 | | style | No | any | Styles applied to the component | {} | | onAnimationCompleted | No | void | Function to be triggered when the animation its done | |

AnimatedArrowUp

Displays an animated arrow up

| location | types | | :-- | :-- | | src/anims/animated-arrow-up | src/anims/types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | contentOnDone | No | boolean | If the content will be displayed only when the animation it's done | | | delay | No | number | The delay applied to the animation | 0 | | duration | No | number | The duration applied to the animation | 2000 | | style | No | any | Styles applied to the component | {} | | onAnimationCompleted | No | void | Function to be triggered when the animation its done | |

Image

Renders an image

| location | types | | :-- | :-- | | src/components/image | src/types/image.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | resizeMode | No | 'contain' \| 'cover' \| 'stretch' \| 'center' | Resize mode to apply | 'contain' | | source | Yes | {uri: string} | resource | Image source, can be a url object {uri: '...'} or a resource | | | style | No | any | Styles to be applied | |

Label

This component allows to create a form label.

| location | types | | :-- | :-- | | src/components/label | src/types/label.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | children | Yes | ReactNode \| string | The text you want to display | | | required | No | boolean | If the label should contain a required mark | | | disabled | No | boolean | If the label must be displayed as disabled | | | secondary | No | boolean | If the label should display secondary color | | | style | No | any | Styles to apply to the label | |

LoaderIcon

This component renders an animated icon loader

| location | types | | :-- | :-- | | src/loaders/loader-icon | src/types/loader-icon.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :--: | | delay | No | number | A delay for animation start | 0 | | duration | No | number | Animation duration | 1000 | | isTriko | No | boolean | If should load the triko icon or user icon | true |

LoaderScreen

Component which renders a full screen loader, useful to hide content to the user while the data is loading

| location | types | | :-- | :-- | | src/loaders/loader-screen | src/types/loader-screen.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | text | No | string \| boolean | A text to display when loading | |

NetworkStatus

Validates the device network connection, in case the connection is lost the content (children) is hidden and the user is notified

| location | types | | :-- | :-- | | src/components/network-status | src/types/network-status.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | children | No | ReactNode | The content to be hiden when the connection is lost | |

Text

This component renders a text for the application, also try to translate it's content using the translation service

| location | types | | :-- | :-- | | src/components/text | src/types/text.types.ts |

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | children | No | string, ReactNode | The thext to be diplayed | | | replacements | No | {[key: string]: string \| number \| boolean} | Map whith replacements on the translation | | | style | No | { [key: string]: StyleProp<any> } \| { [key: string]: StyleProp<any> }[] | Styles to apply | | | color | No | string | A color to apply | | | variant | No | 'text' \| 'title' \| 'subtitle' \| 'label' \| 'caption' \| 'title-primary' \| 'link' | Type of thext to render | 'text' | | | | | | |

VersionDisplay

Displays the current application version

| location | types | | :-- | :-- | | src/components/version-display | src/types/version-display.types.ts |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | classes | No | any | ClassNames to be applied to the component | {} |

Props

| name | required | type | description | default | | :-- | :--: | :-- | :-- | :-- | | | | | | |