react-native-ui

UI element for Dropthought React Native SDK

Latest version

• 5.14.0

Minimum RN version required

• >= 0.74 (Please refer: react-native-safe-area-context)

Installation

Using npm:

npm install @dropthought/react-native-ui

or using yarn:

yarn add @dropthought/react-native-ui

Installing dependencies

• lottie-react-native
• react-native-image-crop-picker
• react-native-safe-area-context
• react-native-webview
• react-native-svg
• @react-native-documents/picker

Usage

KioskProvider

This component provides the theme (classic) setting to all components.

• Props:
  • themeOption: THEME_OPTION.CLASSIC | THEME_OPTION.OPTION1 | THEME_OPTION.OPTION2 | THEME_OPTION.OPTION3 | THEME_OPTION.OPTION4 | THEME_OPTION.OPTION6 | THEME_OPTION.BIJLIRIDE(NEW)
  • appearance: APPEARANCE.SYSTEM | APPEARANCE.LIGHT | APPEARANCE.DARK
  • hexCode: React Native Color Reference
  • fontColor: React Native Color Reference
  • backgroundColor: React Native Color Reference
  • autoClose: Boolean (enable auto close on end page)
  • autoCloseCountdown: Number (countdown in ms)

import { KioskProvider, APPEARANCE } from '@dropthought/react-native-ui';

<KioskProvider
  themeOption={THEME_OPTION.CLASSIC}
  appearance={APPEARANCE.SYSTEM}
  hex="#4b3693"
  fontColor="white"
  backgroundColor="#4c3794"
  autoClose={true}
  autoCloseCountdown={3000}
>
  {/* ... */}
</KioskProvider>;

useTheme

A custom hook returns theme setting.

import { useTheme } from '@dropthought/react-native-ui';

const {
  themeOption,
  colorScheme,
  hexCode,
  fontColor,
  backgroundColor,
  autoClose,
  autoCloseCountdown,
} = useTheme();

useDimensionWidthType

A custom hook returns current screen type.

• screen types: phone | tablet

import { useDimensionWidthType } from '@dropthought/react-native-ui';

const widthType = useDimensionWidthType();

i18n

A helper returns localization content.

import { i18n } from '@dropthought/react-native-ui';

i18n.t('start-survey:placeholder-message');

GlobalStyle

Collection of predefined styles.

ActivityIndicatorMask

A activity indicator component.

• Props:
  • loading: true | false

PlaceholderScreen

Activity indicator component.

• Props:
  • message: string
  • imageSource: string
  • imageType: IPlaceholderImageTypesType

StartScreenLayout

Survey start screen component.

• Props:
  • onLanguageSelect: (language: string) => void
  • onStart: () => void
  • survey: Program

SurveyScreenLayout

Survey component.

• Props:
  • pageIndex: number
  • survey: Program
  • onSubmit: (surveyFeedback: SurveyFeedback) => void
  • onNextPage: (nextPageIndex: number) => void
  • onPrevPage: () => void
  • onPageEnter: () => void
  • onPageLeave: () => void
  • onFeedback: () => void
  • SurveyProgressBar: ReactNode
  • surveyProgressBarPosition: ReactNode
  • SurveyPageIndicator: ReactNode
  • onUpload: (file: ImageFileProps) => Promise<string | undefined>
  • isUploading: boolean | undefined;

EndScreenLayout

Survey end screen component.

• Props:
  • survey: Program

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT