React Native Survey Module ⚛️

The survey module's purpose is to resolve daily challenges of re-writing the code to use surveys in any application. With this user will be able to directly use the module in plug and play manner without having to go deep in the coding of it.

Compatible with Expo & React Native 🚀

• Features
• Installation
• Dependencies
• Usage
• Props

Features

• Easy to use Survey module package
• Offers 6 types of answering modes
• Survey displayed in 2 modes
• Consistent look and feel on iOS and Android
• Colors of the module can be customized
• Implemented with typescript

Installation

#npm
npm install --save survey-module

#yarn
yarn add survey-module

Dependencies

The following packages must be installed in the project for it to work.

#npm
npm install react-native-responsive-dimensions
npm install react-native-element-dropdown
npm install react-native-vector-icons
npm install react-native-paper
npm install react-native-modal
npm install react-native-safe-area-context

#yarn
yarn add react-native-responsive-dimensions
yarn add react-native-element-dropdown
yarn add react-native-vector-icons
yarn add react-native-paper
yarn add react-native-modal
yarn add react-native-safe-area-context

Usage

The survey-module offers two features.

• SurveyList ﹣ Which lists the survey available to user in a card format.

• SurveyComponent ﹣ Which renders the selected survey to the user. The survey could be rendered as one question per page or all questions in a page.

Examples of theme and survey data is added for user refrence.

Working with SurveyList

import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {SurveyList} from 'survey-module';
import {data} from '../data';
import {color} from './Theme';

const SurveyListScreen = () => {
  const navigation = useNavigation();
  return (
    <SurveyList
      data={data} 
      buttonText={'Get Started'} 
      buttonOnPress={(x: any) => {
        navigation.navigate('SurveyComponentScreen', {response: x});
      }} 
      theme={color}
    />
  );
};

export default SurveyListScreen;

Working with SurveyComponent

import React from 'react';
import {SurveyComponent} from 'survey-module';
import {color} from './Theme';

const SurveyComponentScreen = ({route}) => {
  return (
    <SurveyComponent
      data={route.params.response.survey}
      submitButtonOnPress={(x: any) => console.log(x, route.params.response.id)}
      nextButtonText="Next"
      previousButtonText="Previous"
      submitButtonText="Submit"
      questionView={route.params.response.questionView}
      theme={color}
    />
  );
};

export default SurveyComponentScreen;

Theme (example):

export const color = {
  optionSelectionColor: '#f4c6cf', //Any color of your choice
  buttonColor: '#af5071', // Any color of your choice
  buttonTextColor: 'white', //Any color of your choice
};

Survey data (example):

export const data = [
  {
    id: 'Your Survey ID',
    name: 'Your Suvey Name',
    questionOnEachPage: '1/(Number)',
    introduction: 'Introduction of survey in a line',
    time: 'Time taken to complete your survey',
    endDate: 'End date of your surveuy',
    completed: 'True/False',
    survey: [
      {
        question: 'Example Question 1',
        detail: 'Detail to answer the question',
        type: 'radio',
        Options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
        answers: '',
        req: 1,
        marked: -1,
        questionID: 'q1',
      },
      {
        question: 'Example Question 2?',
        detail: 'Detail to answer the question',
        type: 'multi',
        Options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
        answers: '',
        req: 0,
        marked: [-1, -1, -1, -1],
        questionID: 'q2',
      },
      {
        question: 'Example Question 3?',
        detail: 'Detail to answer the question',
        type: 'textInput',
        Options: '',
        answers: '',
        req: 1,
        marked: -1,
        questionID: 'q3',
      },
      {
        question: 'Example Question 4?',
        detail: 'Detail to answer the question',
        type: 'rangeSelector',
        Options: '',
        answers: '',
        req: 1,
        marked: -1,
        questionID: 'q4',
      },
      {
        question: 'Example Question 5?',
        detail: 'Detail to answer the question',
        type: 'dropdown',
        Options: [
          {
            label: 'A',
            value: '1',
          },
          {
            label: 'B',
            value: '2',
          },
          {
            label: 'C',
            value: '3',
          },
          {
            label: 'D',
            value: '4',
          },
        ],
        answers: '',
        req: 1,
        marked: -1,
        questionID: 'q5',
      },
      {
        question: 'Example Question 6?',
        detail: 'Detail to answer the question',
        type: 'multiDropdown',
        Options: [
          {
            label: 'A',
            value: '1',
          },
          {
            label: 'B',
            value: '2',
          },
          {
            label: 'C',
            value: '3',
          },
          {
            label: 'D',
            value: '4',
          },
        ],
        answers: '',
        req: 1,
        marked: -1,
        questionID: 'q6',
      },
    ],
  },
  {...}
]

Props

SurveyList Props

| Props | Params | isRequired | Description | | ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- | | data | Array | Yes | Data is an array of objects | | buttonText | String | Yes | Text displayed on the button | | buttonOnPress | (x: any) => void | Yes | OnPress fuctionality for the button and returns the survey questions, survey ID and questionnaire view | | theme | Object | No | It is an object passed to change the theme | | buttonDisabled | Boolean | No | To disable the survey if completed |

SurveyComponent Props

| Props | Params | isRequired | Description | | ------------------ | -----------------------------------------------------| --------- | ------------------------------------------------------------------- | | data | Array | Yes | Data is a array of objects containing the survey field of the selected survey | | nextButtonText | String | Yes | Text displayed on the next button | | previousButtonText | String | Yes | Text displayed on the previous button | | submitButtonText | String | Yes | Text displayed on the submit button | | submitButtonOnPress | (x: any) => void | Yes | OnPress fuctionality for the button and returns the responses answered by the user | | theme | Object | No | It is an object passed to change the theme | | questionView | Number | Yes | It is required to display the questionnaire |