Atoms

List of Atoms

• Action Bottom Sheet

• Action Card Opacity

• Backdrop

• Badge

• Body Text

• Button

• Card

• Checkbox

• Form

• Heading

• Horizontal Rule Text

• Image Background

• Indicator

• Input

• Item About

• Loader

• PDF Document Viewer

• Radio Button

• Switch

• Web-View

Action Bottom Sheet

Description

Shows options on a modal at the bottom of the screen.

Props

All props are optional.

Prop Name	Type	Description
disabled	boolean	Disables all interactions for this component if it's true
backgroundColor	string	Background color of the sheet
title	string	Text for the title of the action bottom sheet
iconName	string	Name of the icon
onPressPrimary	() => void	Handler to be called when the user presses the primary button
onPressSecondary	() => void	Handler to be called when the user presses the secondary
onPressCancel	() => void	Handler to be called when the user presses cancel
titlePrimary	string	Primary title of the component
titleSecondary	string	Subtitle of the component
titleCancel	string	Title 'Cancel'
modalHeight	number	The height of the action bottom sheet

Usage

<ActionBottomSheet
   ref={actionBottomSheetRef.current[1]}
   disabled=false
   title='Example'
   description=''Description'
   titlePrimary='Title'
   onPressPrimary={() => null}
   titleCancel='Cancel'
   onPressCancel={() => actionBottomSheetRef.current[1].current?.close()}
/>

Action Card Opacity Feedback

Description

Displays information, can include content and actions about a single subject. Style may differ depending on parameter.

Props

Prop Name	Type	Description
children	JSX.Element | JSX.Element[] (optional)	Children of the component (if there are any)
withShadow	boolean (optional)	If true, adds a shadow effect to the outline of the card.
containerStyles	ViewStyle (optional)	The component's container style
backgroundColor	string (optional)	Background color of the card
borderRadius	number (optional)	Radius if the card's border
onPress	() => void (optional)	Handler to be called when the user presses the card
interactable	boolean	If true, enables interaction to the component

Usage

<ActionCardOpacityFeedback
   onPress={() => void}
   interactable={true}
   containerStyles={style}>
   <View> 
       {children}
   </View>
</ActionCardOpacityFeedback>

Backdrop

Description

Dims the area behind a component that has to be focused on.

Props

Prop Name	Type	Description
onDismiss	() => void	Function that will be called once the backdrop has been dismissed
backdropStyle	ViewStyle (optional)	Style applied to the backdrop

Usage

<Backdrop onDismiss={onDismiss} backdropStyle={backdropStyle} />

Badge

Description

Component used to communicate a numerical value or to indicate the status of an item to the user.

Props

All props are optional.

Prop Name	Type	Descripiton
children	string	Children of the component
containerStyle	ViewStyle	Style applied to the container
textStyle	TextStyle	Style applied to the text

Component

Badge

Usage

<Badge containerStyle={componentsDemoStyles.badge}>
    Example
</Badge>

BodyText

Description

Displays words and characters at various sizes. The styles of text are based on figma tokens (size, color, font)

Props

This extends TextProps.

Prop Name	Type	Description
type	BodyType	Size of the text. This can be s1, s2, s3, s4 or s5.

Component

Usage

<BodyText
   type="s4"
   style={style}>
   Text example
</BodyText>

Button

Description

Touchable element that when it is clicked, does a specific action. Color (primary or secondary) may change according to tokens.

Props

Prop Name	Type	Description
text	string	Text displayed in the button
type	buttonType (optional)	Type of the button, it can be 'primary', 'secondary', 'primaryText' or 'secondaryText'
withShadow	boolean (optional)	If true, applies a shadow at the outline of the button
containerStyle	ViewStyle (optional)	The component's container style
accessoryLeft	string | JSX.Element (optional)	Icon located to the left of the button
accessoryRight	string | JSX.Element (optional)	Icon located to the right of the button
iconStyle	TextStyle (optional)	Style applied to the icon
analyticsParams	ParamsTrackAnalytics (optional)	Analytics for the button component
onPress	() => void (optional)	Function called when the button is pressed
disabledWithoutStyle	boolean (optional)	If true, disables all interactions for this component without the applying style

Component

Primary

Secondary

Usage

<Button
   text="Button with Icon"
   type="secondary"
   disabled={false}
   accessoryRight="arrow-up-circle"
   containerStyle={style}
   withShadow
   onPress={() => null}
/>

Card

Description

Displays information, can contain content and actions about a single subject. Style may differ depending on parameter.

Props

All props are optional.

Prop Name	Type	Description
children	JSX.Element | JSX.Element[]	Children of the component
withShadow	boolean	If true, applies a shadow at the outline of the card
containerStyles	ViewStyle	The component's container style
backgroundColor	string	Background color of the card
borderRadius	number	Radius for the border of the card
onPress	() => void	Function called when the card is pressed
disabled	boolean	If true, disables all interactions for this component
cardAnalyticsParams	ParamsTrackAnalytics	Analytics for the card component

Component

Example Card for "Add Account"

Usage

<Card containerStyles={style} onPress={event}>
   <View style={style}>
      <BodyText type="s5" style={textStyle}>
          {text}
      </BodyText>
   </View>
</Card>

Checkbox

Description

Allows the user to complete a task that involves making choices such as selecting options.

Props

All props are optional.

Prop Name	Type	Description
text	string	Text displayed for the checkbox
checkboxStyle	ViewStyle	Style applied to the checkbox
containerStyle	ViewStyle	Style applied to the container
textStyle	TextStyle	Style applied to the text
onPressLink	() => void	Handler called when the checkbox is pressed
accessoryRight	JSX.Element | JSX.Element[]	Right icon for the checkbox

Component

Unchecked

Checked

Usage

<Checkbox
   boxType="square"
   text="Checkbox text"
   value={isCheckboxEnabled}
   onValueChange={setIsCheckboxEnabled}
   containerStyle={style}
/>

Form

Description

Wrapper component for form items (inputs, buttons, labels, etc).

Props

All props are optional.

Prop Name	Type	Description
withScroll	boolean	If true, enables scrolling
showsVerticalScrollIndicator	boolean	If true, shows a vertical scroll indicator
keyboardVerticalOffset	number	Vertical offset for the keyboard
children	JSX.Element | JSX.Element[]	Children for the component

Usage

<Form>
   <View style={formDemoStyles.container}>
      <Input
          label={strings.componentsDemo.inputName}
          containerStyle={formDemoStyles.marginBottom}
          {...getNameInputProps()}
          required
          error={nameInputError}
          onError={setNameInputError}
          value={nameInput}
          onChangeText={setNameInput}
      />
      <Input
          label={strings.componentsDemo.inputEmail}
          containerStyle={formDemoStyles.marginBottom}
          {...getEmailInputProps()}
          required
          error={emailInputError}
          onError={setEmailInputError}
          value={emailInput}
          onChangeText={setEmailInput}
      />
      <Button
          text={strings.formDemo.submit}
          disabled={isButtonDisabled()}
          containerStyle={formDemoStyles.marginBottom}
          onPress={() => setIsLoading(true)}
       />
   </View>
</Form>

Heading

Description

Displays words and characters at various sizes used as headings.

Props

Prop Name	Type	Description
type	HeadingTypes	The HeadingTypes are 's1' | 's2' | 's3' | 's4'

Component

Click on the image to see it bigger

Usage

<Heading type="s4">Example</Heading>

Horizontal Rule Text

Description

Component that displays text horizontally.

Props

All props are required.

Prop Name	Type	Description
text	string	Text displayed in the horizontal rule text
containerStyle	ViewStyle	The component's container style

Usage

<HorizontalRuleText
   text={strings.signInScreen.horizontalRuleText}
   containerStyle={SignInScreenStyles(theme).horizontalRule}
/>

Image Background

Description

Displays an image as background.

Props

All props are optional.

Prop Name	Type	Description
children	JSX.Element	Children for the component
imageBackground	React.ReactNode	The background image

Usage

// Some code

Indicator

Description

Component used to indicate which part or page of a process the user is currently on.

Props

Prop Name	Type	Description
activeColor	string (optinal)	Color to display as the active indicator
inactiveColor	string (optinal)	Color to display as the inactive indicator
activeIndex	number	Index for the active indicator
count	number	Count of the where it is on the indicating process

Usage

<Indicator
   count={indicatorsLength}
   activeColor={theme.color.action.tertiary[400]}
   inactiveColor={theme.color.action.tertiary[100]}
   activeIndex={currentScreen}
/>

Component

Indicator

Input

Description

Allows users to enter text.

Props

All props are optional

Prop Name	Type	Description
label	string	Text displayed as label
labelStyle	ViewStyle	Style applied to the label
inputStyle	ViewStyle	Style applied to the input
containerStyle	ViewStyle	Style applied to the container
inputContainerStyle	ViewStyle	Style applied to the input container
primary	boolean	If true, it will be a primary input
withSuccess	boolean	If true, success state will be triggered
withError	boolean	If true, error state will be triggered
disabled	boolean	If true, disables interaction with the input
accessoryLeft	string	Name of icon to the left of the input
onAccessoryLeftPress	() => void	Function called when accessory left is pressed
accessoryRight	string	Name of icon to the right of the input
onAccessoryRightPress	() => void	Function called when accessory right is pressed
iconStyle	TextStyle	Style applied to the icon
required	boolean	If true, input must be filled
value	string	Value to show for the input
regexp	RegExp	Regular expression
formatMessage	string	String validation if the message needs formatting
error	string | null	Text to display as the message error
onError	(error: string | null) => void	Function called when an error occurs
onChangeText	((text: string) => void) | undefined	Function called when the input's text changes
secureTextEntry	boolean	If true, the text input obscures the text entered so that sensitive text like passwords stay secure.
toggleEntryVisibilityOnLeftPress	boolean	If true, the input entry will be visible on left press
toggleEntryVisibilityOnRightPress	boolean	If true, the input entry will be visible on right press
onHandleEndEditing	() => void	Function that is called when text input ends
placeholderColor	string	Color of the placeholder string
isDatePickerInput	boolean	If true, the input will be a date picker
canClean	boolean	If true, a clean button will be rendered inside the input so it can be cleared

Usage

<Input
   placeholder="Placeholder Text"
   label="Label Text"
   containerStyle={style}
   accessoryLeft="home"
   onAccessoryLeftPress={() => console.log('Hello!')}
   canClean={false}
/>

Component

Empty

Filled and not selected

Filled and selected

With error

With success

Disabled

Item About

Description

Component used in the About Screen to display information.

Props

All props are required.

Prop Name	Type	Description
label	string	Text displayed as the label of the component
value	string	Text displayed as the value

Usage

<ItemAbout value={version} label={strings.about.labelVersion} />

Loader

Description

Displays a loading indicator.

Props

All props are optional.

Prop Name	Type	Description
containerStyle	ViewStyle	The component's container style
lottieSource	string	Source for the lottie that is going to be used as loader

Usage

<Loader
   containerStyle={componentsDemoStyles.loaderLottie}
   lottieSource="lottie source"
/>

Component

Linker Spinner

PDF Document Viewer

Description

Implements react-native-pdf library to display a PDF document through a URL.

Props

Prop Name	Type	Description
url	string	URL to open the PDF
containerStyle	ViewStyle (optional)	The component's container style
contentStyle	ViewStyle (optional)	The component's content style
onError	(error: object) => void (optional)	Invoked on load error

Usage

<PdfDocumentViewer
   url={'https://www.clickdimensions.com/links/TestPDFfile.pdf'}
/>

Tips for creating a friendly mobile PDF document:

• Use bold text and 30 pt font for headlines.

• Use 26 pt font for paragraph text.

• Opt for single columns of text where possible.

• Apply .25 margins all around to give yourself room to work.

• Keep document files small in size for quicker load times.

Radio Button

Description

Allows the user to complete a task that involves making choices such as selecting options.

Props

Prop Name	Type	Description
id	string	id given to the radio button
text	string	Text displayed in the radio button
selectedValue	string | null	Value of the radio button
radioButtonStyle	ViewStyle (optional)	Style applied to the radio button
textStyle	TextStyle (optional)	Style applied to the text displayed
setSelectedValue	React.Dispatch<React.SetStateAction<string | null>>	Used to set the value of the radio button
onPress	({id, text}: OptionRadioButton) => void	Function to execute on press

Usage

<RadioButton
   key={id}
   selectedValue={selectedValue}
   setSelectedValue={setSelectedValue}
   radioButtonStyle={radioButtonStyle}
   textStyle={textStyle}
   {...radioButton}
   onPress={onPress}
/>

Component

Unchecked

Checked

Switch

Description

A boolean control component which sets its value to true or false when pressed.

Props

This props extend the React Native SwitchPropsRN

All props are optional.

Prop Name	Type	Description
thumbColor	ColorValue	Color of the foreground switch grip
trackColor	ColorValue	Custom colors for the switch track.
value	boolean	The value of the switch. If true, the switch will be turned on. Default value is false.
onValueChange	() -> void	Invoked when the user tries to change the value of the switch. Receives the new value as an argument.
disabled	boolean	Disables interaction for the component
style	ViewStyle	Style of the component
ios_backgroundColor	ColorValue	Background of the switch. Only available on iOS.

Usage

<Switch
   onValueChange={setIsDisabled}
   value={isDisabled}
   style={componentsDemoStyles.marginBottom}
/>

Component

Active

Inactive

Disabled

Web-View

Description

Renders web content in a native view.

Props

Prop Name	Type	Description
url	string	URL to open the Web-View
onError	() => void (optional)	Invoked when there is an error opening the url

Usage

<WebView url={'https://www.linkerfinance.com'} />