@dropthought/react-native-ui NPM

react-native-sdk-ui

UI element for Dropthought React Native SDK

Installation

Using npm:

npm install @dropthought/react-native-ui

or using yarn:

yarn add @dropthought/react-native-ui

Installing dependencies

react-native-safe-area-context

Usage

KioskProvider

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

Props:
- appearance: system | light | dark
- fontColor: React Native Color Reference
- backgroundColor: React Native Color Reference

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

<KioskProvider
  appearance={APPEARANCE.SYSTEM}
  fontColor="white"
  backgroundColor="#4c3794"
>
  {/* ... */}
</KioskProvider>;

useTheme

A custom hook returns theme setting.

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

const { themeOption, colorScheme, fontColor, backgroundColor } = 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: Survey

SurveyScreenLayout

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

EndScreenLayout

Survey end screen component.

Props:
- survey: Survey

Contributing

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

License

MIT

react-native ios android

@react-native-community/hooks @types/luxon i18next jotai lodash lottie-react-native luxon ramda react-native-autoheight-webview react-native-document-picker react-native-image-crop-picker react-native-safe-area-context react-native-svg react-native-webview

@dropthought/react-native-dt-sdk

9 months ago

9 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

1 year ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago