Molecules
Action Bottom Menu
Displays a menu of action buttons using a modal.
actions
Array<ActionsSection>
Collection of ActionSection objects that represents each button
disabled
boolean (optional)
Does not display the Action Bottom Menu if it's true
backgroundColor
string (optional)
Color for the background of the sheet
title
string (optional)
Main title text of the sheet
onItemPressed
(actionId: string) => void
This method is called on every press of each button. The actionId is provided in the function so the action can be handled from the caller component
onClosePressed
() => void
This method is called when the ActionBottomMenu is closed
selectedItemColor
string (optional)
Color for the background of the selected button
selectedItemIconColor
string (optional)
Color for the icon inside of the selected button
selectedItems
any (optional)
An object of keys (actionIds) with boolean value to indicate if that action is selected or not.
menuHeight
number (optional)
Set a different height for the ActionBottomMenu
ref
ForwardedRef<Modalize>
ActionBottomSheet ref
<ActionBottomMenu
title={'More'}
actions={EXAMPLE_BOTTOM_MENU_ACTIONS}
ref={actionBottomMenuRef.current[0]}
disabled={isDisabled}
selectedItemColor={theme.color.action.primary[400]}
selectedItemIconColor={theme.color.surface[200]}
selectedItems={{actionA: actionASelected, actionB: actionBSelected}}
onItemPressed={item => demoAction(item)}
onClosePressed={() => actionBottomMenuRef.current[0].current?.close()}
backgroundColor={theme.color.surface[100]}
menuHeight={500}
/>
Action Button
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
text
string
Text to display inside the button
iconName
string
Name of the icon in the button
iconStyle
TextStyle (optional)
Style applied to the icon
textStyle
TextStyle (optional)
Style applied to the text
buttonStyle
ViewStyle (optional)
Style applied to the button
customIcon
JSX.Element (optional)
Custom icon for the button
event
() => void (optional)
Event called when the button is pressed
<ActionButton
text={'Example'}
iconName="upload"
event={() => null}
/>
Action Sheet Confirm
Modal that displays information
sheetRef
React.RefObject
ActionSheetConfirm ref
titlePrimary
string (optional)
Primary title for the modal
titleCancel
string (optional)
Cancel title for the modal
title
string (optional)
Text to display inside the modal as the title
description
string (optional)
Description message in the component
modalHeight
number (optional)
Height of the modal
event
() => void
Event called when the modal is pressed
<ActionSheetConfirm
sheetRef={actionSheetConfirmRef}
title={cardActionSelected?.title}
description={strings.reissueCard.description.replace(
'$CARD_LAST_FOUR',
cardLastFourDigits,
)}
event={() => {
if (cardActionSelected?.id) {
sendReissueCard(
cardActionSelected.id,
cardActionSelected.analyticsEventName,
);
}
}}
/>Base Action Card
Displays a common card that can contain a left component, center component, and right component. It also handles a press event.
It could be displayed without a card, and only display the child elements.
All props are optional.
onPress
() => void
Handler to be called when the user presses the card
withCard
boolean
If true, renders a card for the component
cardProps
Omit<CardProps, 'onPress' | 'children'>
Props for the card when withCard is true.
rowStyles
ViewStyle
Style applied to the rows in the component
contentStyles
ViewStyle
Style applied to the content in the component
text
string
Text to be displayed in the base action card
contentComponent
JSX.Element
Content to be displayed on a View inside the card
leftIconName
string
Name for the icon shown to the left of the component
leftComponent
JSX.Element
Component displayed to the left of the base action card
hideLeftIcon
boolean
If true, hides the left icon
rightIconName
string
Name for the icon shown to the right of the component
rightComponent
JSX.Element
Component displayed to the right of the base action card
hideRightIcon
boolean
If true, hides the right icon
actionCardAnalyticsParams
ParamsTrackAnalytics
<BaseActionCard
withCard={false}
leftIconName={iconLeft ?? (leftIconComponent ? iconLeft : 'bookmark')}
leftComponent={leftIconComponent}
onPress={event}
contentComponent={renderAccountItem()}
rowStyles={{...rowStyles}}
/>Basic Toast Notification
A customizable animated notification pop-up with timing.
interactable
boolean
If true, the toast notification can be pressed
onMainAction
() => {} (optional)
Function to be called when the toast notification is pressed
title
string (optional)
Text to be displayed
body
string (optional)
Content of the component
containerStyle
ViewStyle (optional)
Style applied to the container of the component
childrenLeft
any (optional)
Children to the left of the basic toast notification
childrenRight
any (optional)
Children to the right of the basic toast notification
<BasicToastNotication
title={heading ? heading : errorHeading}
body={body}
interactable={false}
childrenLeft={<LeftContent id={id} />}
childrenRight={<RightContent hideNotification={hideNotication} />}
containerStyle={ToastNotificationStyle(theme).container}
/>Custom Top Tabs
Tab bar on the top of the screen that lets the user switch between different routes by tapping the tabs or swiping horizontally.
CustomTabsProps
event
(value?: string) => void
Even called when
CustomTabItem
value
string
Value of the tab item
active
boolean (optional)
If true, the item can be pressed
id
string
ID of each tab item
<CustomTopTabs event={() => {}} data={EXAMPLE_DATA_CUSTOM_TOP_TABS} />
Date Picker
Component that renders date and time.
onPress
() => void
Handler to be called when the date picker is pressed
isOpen
boolean
If true, date picker will be opened
selectedDate
Date
The date selected in the date picker
label
string (optional)
Label text for the date picker
shownDate
string (optional)
The date displayed in the date picker
withShadow
boolean (optional)
If true, the input of the date picker will have a shadow
labelStyle
ViewStyle (optional)
Style applied to the label
datePickerStyle
ViewStyle (optional)
Style applied to the date picker
containerStyle
ViewStyle (optional)
Style applied to the container
disabled
boolean (optional)
If true, disables the interaction for the date picker
error
string (optional)
Error message when there is one
primary
boolean (optional)
If true, sets the date picker input to primary
onError
(error: string | null) => void (optional)
Handler to be called when an error occurs
<DatePicker
isOpen={isDatePickerOpen}
onPress={() => setIsDatePickerOpen(true)}
label={strings.enterBirthDate.birthDateInputLabel}
containerStyle={editOnboardingInfoScreenStyles.marginBottom}
selectedDate={currentSelectedDate.current}
shownDate={valueDate}
error={birthDateInputError}
onError={setBirthDateInputError}
onConfirm={date => {
const formattedDate = dateFormatter(date);
validateDate(formattedDate);
setValueDate(formattedDate);
currentSelectedDate.current = date;
setIsDatePickerOpen(false);
}}
onCancel={() => {
setIsDatePickerOpen(false);
}}
/>
Dropdown
Displays a list of options to select one.
All props are optional.
label
string
Label text displayed on the dropdown
labelRight
string
Label text displayed to the right of the component
containerStyle
ViewStyle
Style applied to the container
labelStyle
TextStyle
Style applied to the label
rowTextStyle
TextStyle
Style applied to the row
withSuccess
boolean
If true, the success style input will be applied
withError
boolean
If true, the error style input will be applied
disabled
boolean
If true, disables all interaction wit the dropdown
primary
boolean
If true, applies the primary settings for the dropdown
iconStyles
TextStyle
Style applied to the icon
<Dropdown
label={strings.componentsDemo.dropdownDefaultDefaultValue}
data={['Java', 'C#']}
defaultValueByIndex={0}
onSelect={() => {}}
buttonTextAfterSelection={(selectedItem, _index) => {
return selectedItem;
}}
rowTextForSelection={(selectedItem, _index) => {
return selectedItem;
}}
containerStyle={componentsDemoStyles.marginBottom}
/>
Error Web View
Renders web error content in a native view.
All props are optional.
title
string
Text displayed as the title of the error web view
subtitle
string
Subtitle of the error web view
icon
string
Icon in the component
<ErrorWebView title='Error example' />Global Loader
Displays a global loading indicator.
All props are optional.
backgroundColor
string
Background color for the global loader
containerStyle
ViewStyle
Style applied to the container of the component
<GlobalLoader
backgroundColor={'blue'}
containerStyle={webViewLayoutStyles().globalLoader}
/>
Header List
Header component, that consists of an icon to the left, a title, a subtitle and a JSX element to the right.
All props are optional.
iconLeft
string
Icon located to the left of the Header List
title
string
Text displayed as the title
subTitle
string
Text displayed as the subtitle
rightIcon
string
Name of the icon that goes to the right
event
() => void
Handler called when the accessory to the right is pressed
iconStyle
TextStyle
Style applied to the icon
titleStyles
TextStyle
Style applied to the title
accessoryRight
JSX.Element
Element located to the right of the Header List
<HeaderList
title={strings.componentsDemo.headerListTitle}
accessoryRight={
<Switch
onValueChange={setIsDisabled}
value={isDisabled}
style={componentsDemoStyles.marginBottom}
/>
}
/>
List Action Card
A card component that contains an icon, a title and some text.
CustomIcon
React.FC<SvgProps>
iconName
string
iconSize
number
title
string
text
string
event
() => void
containerStyles
ViewStyle
backgroundColor
string
iconColor
string
titleStyles
TextStyle
textStyle
TextStyle
analyticsParamListActionCard
ParamsTrackAnalytics
<ListActionCard
iconName="info"
title={strings.componentsDemo.actionCardTitle}
text={strings.componentsDemo.actionCardText}
event={() => {}}
/>
Main Layout Header
Component used for header layout.
All props are optional.
title
string
Text displayed as title for the main layout header
titleProps
HeadingProps
Props for the title displayed
titleContainerStyle
ViewStyle
Style applied to the title container
leftIcon
string
Icon located to the left of the component
leftIconPres
() => void
Handler called when the left icon is pressed
hideLeftIcon
boolean
If true, hides the left icon
rightIcon
string
Icon located to the right of the component
rightIconPress
() => void
Handler called when the right icon is pressed
containerStyle
ViewStyle
Style applied to the container
<MainLayoutHeader
leftIcon="user"
leftIconPres={() => dispatch(DrawerActions.openDrawer())}
rightIcon={isCloseButton ? 'x' : undefined}
rightIconPress={
isCloseButton ? () => dispatch(DrawerActions.closeDrawer()) : undefined
}
title={title ?? customerFullName}
titleContainerStyle={
title === undefined ? headerWithMenuStyles.titleContainer : {}
}
/>
Menu Item
Component used for the Main Menu.
All props are required.
leftIcon
string
Name for the icon that goes to the left of the card menu item.
description
string
Title or description that tells the user where it will redirect.
event
() => void
Event that will happen when the item is pressed.
<MenuItem
leftIcon={iconName}
description={itemTitle}
event={onPress}
/>
Modal
A way to present content above an enclosing view.
isOpen
boolean
If true, the modal is opened
onDismiss
() => void
Function called when the modal is dismissed
cardStyle
ViewStyle (optional)
Style applied to the card
backdropStyle
ViewStyle (optional)
Style applied to the backdrop
containerStyle
ViewStyle (optional)
Style applied to the container
children
JSX.Element | JSX.Element[] (optional)
Children of the component
<Modal
isOpen={isActionModalOpen}
onDismiss={() => setIsActionModalOpen(false)}>
<View>
<BodyText type="s3">
{strings.componentsDemo.actionIdLabel} {actionId}
</BodyText>
</View>
</Modal>Radio Buttons Group
Group that contains various of Radio Button component.
radioButtons
OptionRadioButton[]
Array of radio buttons
containerStyle
ViewStyle (optional)
Style applied to the container
radioButtonStyle
ViewStyle (optional)
Style applied to each radio button
textStyle
TextStyle (optional)
Style applied to the text
onPress
({id, text}: OptionRadioButton) => void
Function called when the radio buttons are clicked
<RadioButtonsGroup
radioButtons={EXAMPLE_RADIO_BUTTONS}
onPress={radioButtonSelected}
/>
Search Input
Input component used for searching a value
These props extend the InputProps.
initialSearchValue
string (optional)
Initial value for the input
onQueryChanged
(text: string) => void
Function called when the query has been changed
currentQuery
string
Current query in the input
<SearchInput
containerStyle={styles.separator}
placeholder={'Search'}
initialSearchValue={''}
onQueryChanged={requestAfterSearchQueryChanged}
currentQuery={queryValue}
/>
SVG Background
Last updated
Was this helpful?