@optisolbusiness/react-native-survey-question NPM

@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