@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