Atoms

List of Atoms

Action Bottom Sheet

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

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

<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

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

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

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

Backdrop

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

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

Badge

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

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

BodyText

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

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

Button

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

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

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

Card

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

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

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

Checkbox

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

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

Form

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

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

<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

Displays words and characters at various sizes used as headings.

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

Horizontal Rule Text

Component that displays text horizontally.

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

Image Background

Displays an image as background.

// Some code

Indicator

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

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

Input

Allows users to enter text.

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

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

Item About

Component used in the About Screen to display information.

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

Loader

Displays a loading indicator.

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

PDF Document Viewer

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

<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

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

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

Switch

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

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

Web-View

Renders web content in a native view.

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

PreviousCore UI Components NextMolecules

Last updated 2 years ago

Was this helpful?