npm package: @optisolbusiness/react-native-survey-question
Description: react-native-survey-question
Author: saisushma
Latest version: 0.0.6

# @optisolbusiness/react-native-survey-question

@optisolbusiness/react-native-survey-question

## Installation

```sh

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

```js
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'

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

```

type: 'inputTextQuestion'

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

```

type: 'multiSelectQuestion'

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

```

type: 'progressBarQuestion'

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

```

type: 'progressBar_text_Question'

```js
         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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)