@triko-app/base NPM

Triko Base components

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
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'`