@optisolbusiness/react-native-survey-question

@optisolbusiness/react-native-survey-question

Installation

npm install --save @optisolbusiness/react-native-survey-question @react-native-community/slider

If using iOS please remember to install cocoapods by running: npx pod-install

Usage

import { SurveyQuestion } from "@optisolbusiness/react-native-survey-question";

// ...

 <SurveyQuestion
        options={[
          {
            question: 'Which stage of career are you at?',
            type: 'singleSelectQuestion',
            user_options: [
              { questionOptions: 'question 2' },
              { questionOptions: 'question 3' },
            ],
          },
          {
            question: 'question one InputText',
            type: 'inputTextQuestion',
            user_options: [
              { textInputQuestionTitle: 'text one', textInputvalue: '',placeholder: '' },
              { textInputQuestionTitle: 'text two', textInputvalue: '',placeholder: ''},
            ],
          },
          {
            question: 'question name Button',
            type: 'multiSelectQuestion',
            user_options: [
              { questionOptions: 'question 2', unSelectedColor: 'transparent',
              selectedColor: 'green', selectedTextColor: 'white',unSelectedTextColor: 'red' },
              { questionOptions: 'question 5',  unSelectedColor: 'transparent',
              selectedColor: 'green', selectedTextColor: 'white',unSelectedTextColor: 'red' },
              { questionOptions: 'question 8', unSelectedColor: 'transparent',
              selectedColor: 'green', selectedTextColor: 'white',unSelectedTextColor: 'red' },
            ],
          },
          {
            question: 'question name slider',
            type: 'progressBarQuestion',
            user_options: [
              {
                title: 'test title -7',
                values: 70,
                min:20,
                max:50,
                minValue: '',
                maxValue: ''
              },
              {
               title: 'test title -9',
                values: 50,
                min:20,
                max:50,
                minValue: '',
                maxValue: ''
              },
            ],
          },
          {
            question: 'question name slider',
            type: 'progressBar_text_Question',
            user_options: [
              {
               title: 'test title -9',
                value: 50,
                min:20,
                max:50,
                minValue: '',
                maxValue: '',
                textInputValue: '',
                placeholder: '',
              },
            ],
          },
        ]}
        onAnswer={(ans) => sample(ans)}
        onAllResp={(allResp) => console.log("allResp--", allResp)}
        styleContiner={styles.surveyBackground}
      />

How to pass type value and it's usage

type: 'singleSelectQuestion'

      options={[
          {
          question: '',
          type: 'singleSelectQuestion',
          user_options: [
              { questionOptions: 'question 1' },
              { questionOptions: 'question 2' },
              { questionOptions: 'question 3' },
            ],
          }
      ]}

type: 'inputTextQuestion'

      options={[
          {
          question: '',
          type: 'inputTextQuestion',
          user_options: [
              { textInputQuestionTitle: 'text one', textInputvalue: '', placeholder: '' },
              { textInputQuestionTitle: 'text two', textInputvalue: '' , placeholder: ''},
              { textInputQuestionTitle: 'text one', textInputvalue: '', placeholder: '' },
            ],
          }
      ]}

type: 'multiSelectQuestion'

      options={[
          {
          question: '',
          type: 'multiSelectQuestion',
          user_options: [
               { questionTitle: 'question 2', unSelectedColor: 'transparent',
                 selectedColor: 'green',selectedTextColor: 'white',unSelectedTextColor: 'red'
              },
            ],
          }
      ]}

type: 'progressBarQuestion'

      options={[
          {
          question: '',
          type: 'progressBarQuestion',
          user_options: [
               {
                title: 'test title -7',
                values: 70,
                min: 20,
                max: 50,
                minValue: '',
                maxValue: ''
              },
            ],
             }
      ]}

type: 'progressBar_text_Question'

         options={[
          {
          question: '',
          type: 'progressBar_text_Question',
          user_options: [
              {
                progressBarTitle: 'test title',
                value: 80,
                textInputValue: '',
                min: 20,
                max: 50,
                minValue: '',
                maxValue: '',
                placeholder: '',
                textInputTitle: ''
              },
            ],
             }
      ]}

Detailed description of props usage mentioned in table below

Props and Methods

| Prop | Type | Description | :------------ |:---------------| :-----| | progressHeaderMainContainerStyle | Style | Optional. Style of Progress Bar Container | | progressHeaderSubContianerStyle | Style | Optional. Style of Progress Bar | | onProgressColor | Color | Mandatory. Current Progress Bar color E.g: onProgressColor={'green'}| | nextProgressColor | Color | Mandatory. Next Progress bar color E.g: nextProgressColor={'blue'}| | previousProgressColor | Color | Mandatory. Previous Progress bar color E.g: previousProgressColor={'red'}| | buttonMainContainerStyle | Style | Optional. Previous and Next Button Main Container Style | | buttonContainerStyle | Style | Optional. Previous and Next Button Styling | | buttonTextStyle | Style | Optional. Previous and Next Button Text Styling | | previousText | String | Optional. Previous text prop, default: Previous | | nextText | String | Optional. Next text prop, default: Next | | options | Array of Objects | Mandatory. Need to pass question ,type, user_options | | question | String | Mandatory. Question heading | | type | String | Mandatory. 'SingleSelectQuestion' or 'inputTextQuestion' or 'multiSelectQuestion' or 'PrograssBarQuestion' or 'PrograssBar_text_Question' | | user_options | Array of Objects | Mandatory. based on type value user_options will differ,user_options is mandatory for all types | | inputTextOuterContainerStyle | Style | Optional. Container Styling of text input and title | | textInputTitleStyle | Style | Optional. Styling of text input title | | textInputStyle | Style | Optional. TextInput style | | progressbarContainerStyle | Style | Optional. progressBar Container Style | | progressTitleStyle | Style | Optional. progressBar Title Style | | sliderStyle | Style | Optional. slider Style | | minimumTrackTintColor | Style | Optional. The color used for the track to the left of the button. Overrides the default blue gradient image on iOS. | | maximumTrackTintColor | Style | Optional. The color used for the track to the right of the button. Overrides the default gray gradient image on iOS. | | thumbTintColor | Style | Optional. Color of the foreground switch grip. | | minMaxStyleContainer | Style | Optional. minValue, maxValue Text Container Style | | onAnswer | Function | Mnadatory. for individual screen response | | onAllResp | Function | Mandatory. for complete screens response |

type: 'singleSelectQuestion' props

| Prop | Type | Description | :------------ |:---------------| :-----| | questionOptions | String | Mandatory. Questions to conduct survey in singleSelectQuestion type | | optionStyle | Style | Optional. unSelected question styling | | selectedOptionStyle | Style | Optional. selected question styling | | optionTextStyle | Style | Optional. unSelected question text style | | selectedOptionTextStyle | Style | Optional. selected question text style |

type: 'inputTextQuestion' props

| Prop | Type | Description | :------------ |:---------------| :-----| | textInputQuestionTitle | String | Optional. Title for text input | | textInputvalue | String | Optional. value to show for the text input | | placeholder | String | Optional. placeholder value for text input |

type: 'multiSelectQuestion' props

| Prop | Type | Description | :------------ |:---------------| :-----| | questionTitle | String | Mandatory. Questions Title | | selectedColor | Color | Mandatory. selected question color | | unSelectedColor | Color | Mandatory. unSelected question color | | selectedTextColor | Color | Mandatory. selected question text color | | unSelectedTextColor | Color | Mandatory. unSelected question text color | | buttonStyleProps | Style | Optional. question outer style | | buttonOptionTextStyle | Style | Optional. question text style |

type: 'progressBarQuestion' props

| Prop | Type | Description | :------------ |:---------------| :-----| | title | String | Optional. progress Title | | values | String | Mandatory. to show progress value | | minValue | number | Optional. to show minvalue | | maxValue | number | Optional. to show maxvalue | | min | number | Optional. Initial minimum value of the slider. Default value is 0. | | max | number | Optional. Initial maximum value of the slider. Default value is 1. |

type: 'progressBar_text_Question' props

| Prop | Type | Description | :------------ |:---------------| :-----| | progressBarTitle | String | Optional. progress Title | | value | String | Mandatory. to show progress value | | minValue | number | Optional. to show minvalue | | maxValue | number | Optional. to show maxvalue | | min | number | Optional. Initial minimum value of the slider. Default value is 0. | | max | number | Optional. Initial maximum value of the slider. Default value is 1. | | textInputTitle | String | Optional. Title for text input | | textInputValue | String | Optional. value to show for the text input | | placeholder | String | Optional. placeholder value for text input |

Contributing

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

License

MIT

Made with create-react-native-library