Organisms
Account Info Card
Component that displays the account's information (title, subtitle, value) and can be pressed.
iconLeft
string
Name of the icon located to the left of the card
title
string
Title of the component
subtitle
string
Subtitle of the component
value
string
Value that will appear in the component
leftIconComponent
JSX.Element
Icon to be displayed to the left of the component
rowStyles
ViewStyle
Style applied to the component's row
event
() => void
Event to be called when the user presses the card
<AccountInfoCard
title={'Account Information'}
subTitle={'•••• •••• •••• 3456'}
value={'$ 3.00'}
event={() => {}}
/>
Form Layout
Renders form content and handles input submission and loading.
title
string
Text displayed as title
subtitle
string
Text displayed as subtitle
withScroll
boolean
If true, scroll will be enabled
withSafeAreaLayout
boolean
If true, safe area layout component will be enabled for the form
safeAreaLayoutProps
SafeAreaLayoutProps
Props for the safe area layout
keyboardVerticalOffset
number
isSubmitButtonDisabled
boolean
onSubmit
() => void
onCancel
() => void
textBtnOnSumbit
string
children
React.ReactNode
currentScreen
number
indicatorsLength
number
buttonAnalyticsParams
ParamsTrackAnalytics
hasFiveOrMoreInputs
boolean
<FormLayout
title={strings.enterSSN.title}
isSubmitButtonDisabled={isButtonDisabled()}
onSubmit={onSubmit}
currentScreen={6}
buttonAnalyticsParams={{
eventName: ANALYTICS_EVENT_NAMES.socialSecuritySubmitted,
params: {
success: true,
},
}}
indicatorsLength={CONFIG_VALUES.indicatorsLength}>
<Input
label={strings.enterSSN.ssnInputLabel}
containerStyle={enterSSNStyles.marginBottom}
{...getSSNProps()}
value={formatSSN(ssnInput)}
onChangeText={text => dispatch(setSSNInput(text))}
error={ssnInputError}
onError={setSSNInputError}
autoFocus
/>
</FormLayout>Main Menu
By default, it contains an About Menu Item under the Settings section that redirects to the About Screen.
It also fetches the documents under the category of 'settings' to the API. So each document retrieved from the API will be displayed as a Menu Item dynamically in the Settings section.
Each document should contain a content with type url or pdf. This links/documents from the API are opened in the Setting Document Screen.
Functionality
Redux state management of these documents are handled by contentsDocuments slice.
initialItems
Array<SectionMenu>
Array of the items that make up the initial part of the menu
finalItems
Array<SectionMenu>
Array of the items that make up the final part of the menu
settingsItems
Array<SectionMenu>
Array of the items that make up the settings part of the menu
headerComponent
JSX.Element
Header of the menu
onItemPressed
(actionId: string) => void
Function called when an item is pressed
<MainMenu
{...props}
initialItems={initialItemsList}
settingsItems={settingsItemsList}
finalItems={finalItemsList}
headerComponent={<HeaderWithMenu isCloseButton />}
/>
Safe Area Layout
Renders content within the safe area boundaries of a device and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other views.
headerComponent
JSX.Element
Renders a screen header
hideHeader
boolean
If true, the header component will be hidden.
defaultHeaderProps
MainLayoutHeaderProps
Props for the header component in the safe area layout
contentStyle
ViewStyle
Style applied to the content inside the safe area layout
showLoading
boolean
If true, a loader will be rendered when refreshing the content in the safe area layout
withScroll
boolean
If true, scroll will be enabled
refreshControlProps
RefreshControlProps
Enable pull to refresh functionality
children
React.ReactNode
Children for the component
background
React.ReactNode
Background of the safe area layout
stylesBackground
ViewStyle
Style applied to the background of the safe area layout
backgroundColor
string
backgroundColor for the safe area layout. It covers the entire screen including the Header component.
<SafeAreaLayout
withScroll
hideHeader={true}
contentStyle={componentsDemoStyles.container}
refresControlProps={{refreshing: false}}>
<View/>
</SafeAreaLayout>State View
This view supports different default states, so indicates error, warning, success, refresh, etc.
title
string (optional)
Custom title (each type has a default)
message
string (optional)
Custom message (each type has a default)
iconResult
React.ReactNode (optional)
Custom center icon (each type has a default)
buttonTitle
string (optional)
Custom button title (each type has a default)
onContinuePressed
() => void
Method that handles button press event
type
'error' | 'warning' | 'success' | 'refresh'
Each type represents a state and has a default title, icon, message, buttonText.
<StateView
type="error"
onContinuePressed={() => setStateViewOpen(false)}
/>Toast Notification
Renders a toast component to show a message.
id
string
ID number for the toast component
heading
string
Text displayed as heading
body
string
Body or message of the toast notification.
hideNotification
() => void
This function is called when the user taps on the toast to be hidden
<ToastNotification
id={strings.notificationsContent.message.id}
heading={props.heading}
body={props.body}
hideNotication={hideToastNotification}
/>
Toast Notification Provider
Component that renders a set of toast notifications examples.
Primers View
Component that renders information on card layout.
title
string
Text displayed as the title of the primer
subtitle
string
Text displayed as the subtitle of the primer
message
string
Message the primer will display
iconPrimers
React.ReactNode
Icon to be displayed in the primer
backgroundImage
React.ReactNode
Image to display at the background of the primer
buttonAllowTitle
string
Title for the 'Allow' button
buttonCancelTitle
string
Title for the 'Cancel' button
permissionIos
Array<PermissionIosTypes>
Permissions for iOS
permissionAndroid
Array<PermissionIosTypes>
Permissions for android
shouldHandlePermissionsRequest
boolean
If true, handles the request for the permissions
onAllowPressed
() => void
Function called when the allow button is pressed
onCancelPressed
() => void
Function called when the cancel button is pressed
<PrimersView
subTitle={strings.primerPushNotifications.primersSubTitle}
shouldHandlePermissionsRequest={false}
onAllowPressed={allowPrimers}
onCancelPressed={cancelPrimers}
/>
Result Detailed View
View that displays detailed results of a process.
title
string
Title for the the view
message
string
Message displayed in the view
buttonTitle
string
Title for the button
onContinuePressed
() => void
Function called when the 'Continue' button is pressed
children
React.ReactNode
Children of the component
type
'custom' | 'success' (optional)
Type of result, can be custom or success
customIcon
React.ReactNode (optional)
Custom icon for the view
<ResultDetailedView
title={strings.requestBiometrics.titleResultView}
message={strings.requestBiometrics.messageResultView}
buttonTitle={strings.requestBiometrics.titleButtonResultView}
onContinuePressed={handleContinue}
/>
Result View
Displays results in a view.
title
string
Title for the the view
message
string
Message displayed in the view
backgroundImage
React.ReactNode
Background image
iconResult
React.ReactNode
Icon displayed
buttonTitle
string
Title for the button
onContinuePressed
() => void
Function called when the 'Continue' button is pressed
lottieSource
string
Source of the lottie
<ResultView
title={strings.componentsDemo.result}
message={strings.componentsDemo.modalDescription}
buttonTitle={strings.common.continue}
onContinuePressed={continueResultView}
/>Web View Layout
Renders web content in a native view layout.
children
React.ReactNode (optional)
Children of the Web View Layout
<WebViewLayout
errorWebView={errorWebView}
loadingWebView={isLoadingSetPin || isLoadingContent}>
{!errorWebView && (
<WebView
source={{uri}}
onMessage={webViewMessage}
ref={webviewRef}
containerStyle={setPinStyles(theme).webView}
javaScriptEnabled={true}
scalesPageToFit={Platform.OS === 'android' ? false : true}
setBuiltInZoomControls={false}
onError={() => OnError()}
onHttpError={() => OnError()}
/>
</WebViewLayout>Last updated
Was this helpful?