UI element for Dropthought React Native SDK
- 5.11.0
- >= 0.69 (Please refer: react-native-document-picker)
Using npm:
npm install @dropthought/react-native-ui
or using yarn:
yarn add @dropthought/react-native-ui
- lottie-react-native
- react-native-document-picker
- react-native-image-crop-picker
- react-native-safe-area-context
- react-native-webview
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>;
A custom hook returns theme setting.
import { useTheme } from '@dropthought/react-native-ui';
const {
themeOption,
colorScheme,
hexCode,
fontColor,
backgroundColor,
autoClose,
autoCloseCountdown,
} = useTheme();
A custom hook returns current screen type.
- screen types: phone | tablet
import { useDimensionWidthType } from '@dropthought/react-native-ui';
const widthType = useDimensionWidthType();
A helper returns localization content.
import { i18n } from '@dropthought/react-native-ui';
i18n.t('start-survey:placeholder-message');
Collection of predefined styles.
A activity indicator component.
- Props:
-
loading
: true | false
-
Activity indicator component.
- Props:
-
message
: string -
imageSource
: string -
imageType
: IPlaceholderImageTypesType
-
Survey start screen component.
- Props:
-
onLanguageSelect
: (language: string) => void -
onStart
: () => void -
survey
: Survey
-
Survey component.
- Props:
-
pageIndex
: number -
survey
: Survey -
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;
-
Survey end screen component.
- Props:
-
survey
: Survey
-
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT