Organisms

List of Organisms

• Account Info Card

• Form Layout

• Main Menu

• Primers View

• Result Detailed View

• Result View

• Safe Area Layout

• State View

• Toast Notification

• Toast Notifications Provider

• Web View Layout

Account Info Card

Description

Component that displays the account's information (title, subtitle, value) and can be pressed.

Props

Prop Name	Type	Decription
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

Usage

<AccountInfoCard
   title={'Account Information'}
   subTitle={'•••• •••• •••• 3456'}
   value={'$ 3.00'}
   event={() => {}}
/>

Component

Account Info Card

Form Layout

Description

Renders form content and handles input submission and loading.

Props

All props are optional.

Prop Name	Type	Description
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

Usage

<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

Description

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.

Props

Prop Name	Type	Description
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

Usage

<MainMenu
   {...props}
   initialItems={initialItemsList}
   settingsItems={settingsItemsList}
   finalItems={finalItemsList}
   headerComponent={<HeaderWithMenu isCloseButton />}
/>

Component

Main Menu Example

Safe Area Layout

Description

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.

Props

Prop Name	Type	Description
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.

Usage

<SafeAreaLayout
   withScroll
   hideHeader={true}
   contentStyle={componentsDemoStyles.container}
   refresControlProps={{refreshing: false}}>
  <View/>  
</SafeAreaLayout>

State View

Description

This view supports different default states, so indicates error, warning, success, refresh, etc.

Props

Prop Name	Type	Description
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.

Usage

<StateView
   type="error"
   onContinuePressed={() => setStateViewOpen(false)}
/>

Toast Notification

Description

Renders a toast component to show a message.

Props

Prop Name	Type	Description
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

Usage

<ToastNotification
   id={strings.notificationsContent.message.id}
   heading={props.heading}
   body={props.body}
   hideNotication={hideToastNotification}
/>

Component

Toast Notification

Toast Notification Provider

Description

Component that renders a set of toast notifications examples.

Primers View

Description

Component that renders information on card layout.

Props

Prop Name	Type	Description
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

Usage

<PrimersView
   subTitle={strings.primerPushNotifications.primersSubTitle}
   shouldHandlePermissionsRequest={false}
   onAllowPressed={allowPrimers}
   onCancelPressed={cancelPrimers}
/>

Component

Result Detailed View

Result Detailed View

Description

View that displays detailed results of a process.

Props

Prop Name	Type	Description
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

Usage

<ResultDetailedView
   title={strings.requestBiometrics.titleResultView}
   message={strings.requestBiometrics.messageResultView}
   buttonTitle={strings.requestBiometrics.titleButtonResultView}
   onContinuePressed={handleContinue}
/>

Component

Result View

Description

Displays results in a view.

Props

Prop Name	Type	Description
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

Usage

<ResultView
   title={strings.componentsDemo.result}
   message={strings.componentsDemo.modalDescription}
   buttonTitle={strings.common.continue}
   onContinuePressed={continueResultView}
/>

Component

Web View Layout

Description

Renders web content in a native view layout.

Props

Prop Name	Type	Description
errorWebView	boolean	If true, renders the ErrorWebView component
loadingWebView	boolean	If true, renders the GlobalLoader component
children	React.ReactNode (optional)	Children of the Web View Layout

Usage

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