@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 i18next jotai lodash lottie-react-native ramda 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

11 days ago

11 days ago

16 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

5 months ago

6 months ago

5 months ago

6 months ago

10 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

10 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 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

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 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

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