Organisms

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

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

Renders form content and handles input submission and loading.

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

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

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.

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

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.

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.

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

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

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

Renders a toast component to show a message.

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

Component that renders a set of toast notifications examples.

Component that renders information on card layout.

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

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

View that displays detailed results of a process.

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

Displays results in a view.

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

Renders web content in a native view layout.

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

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

Account Info Card

Form Layout

Main Menu

Functionality

Safe Area Layout

State View

Toast Notification

Toast Notification Provider

Primers View

Result Detailed View

Result View

Web View Layout