React-native-questionnaire NPM

react-native-questionnaire

A custom dialog view for React Native that can display multiple questions in a beautiful way.

NOTE: This repository is currently in a very early state and significant (most likely breaking) changes will be made very often. I still need to add a majority of the animations. I would recommend waiting for v1.0.0

SECOND NOTE: This package used to be called react-native-multi-question-dialog. It was renamed to this repo, react-native-questionnaire.

All contributions are welcome!

Screenshots

Example App

react-native-questionnaire comes with an example app for you test out before you decide if you want to add it to your project. To run the example app, follow these steps: 1. Check out this repository 2. cd to where you cloned it. 3. cd example 4. npm i 5. react-native run-ios or react-native run-android

How To Install

This package is available via the npm registry. Navigate to a React Native project and run:

npm install --save react-native-questionnaire

How To Use

Import it into your file:

import QuestionnaireDialog from 'react-native-questionnaire'

And you can use it like so:

<QuestionnaireDialog
          visible={this.state.dialogVisible}
          onTapOutside={() => {
            this.setState({ dialogVisible: false })
          }}
          questions={this.questions} />

Note that some props must be defined and formatted correctly. See details below.

How Do I Reset The Questionnaire To The Beginning?

Pass in a ref prop to QuestionnaireDialog like so:

<QuestionnaireDialog
          visible={this.state.dialogVisible}
          close={() => {
            this.setState({ dialogVisible: false })
          }}
          questions={this.questions}
          ref={'PUT_WHATEVER_YOU_WANT_HERE'} />

And then you can reset the questionnaire like this:

this.refs.REF_NAME.reset()

Can I Cut Off The Questionnaire Early If I See A Certain Answer?

Yes! Each answer to every question has a special callback that you define via the questions prop. If you want to skip to the end after a certain answer, simply call this.refs.REF_NAME.skipToEnd() in that answer's callback. Make sure you define a ref name as described above.

Custom Props

Prop Name	Prop Type	Prop Default	Prop Required?	Prop Notes
onTapOutside	function()	None (Will show warning if nothing is passed)	Yes	This prop is called when the user taps outside of the dialog's area. This prop is also called internally when the user finishes to close your dialog.
width	integer	300	No	This prop will resize your dialog if you don't want it to take up the entire screen
height	integer	300	No	This prop will resize your dialog if you don't want it to take up the entire screen
backgroundColor	string	'white'	No	This prop will set the background color of the dialog itself
title	string	null	No	This prop will add a title header to the dialog
questions	Array	null	No	Note that while this prop is not required to render the dialog, it is required if you want to, you know, show some questions. This prop must be formatted the correct way or the library will display a warning. See below for details.
complete	function({} answers)	None (Will show warning if nothing is passed)	No	This prop will be called once the user has answered all of the provided questions

Inherits All Props From Modal

See React Native Modal's documentation

How Do I Format The `questions` Prop?

The questions prop is an array of dictionaries. Each entry dictionary in the array represents a question. For example, a questions prop with two questions may look like this:

questions = [
    {
      question: "Isn't React Native great?!",
      yes: () => {
        //This is called if the user selects yes to this question
      },
      no: () => {
        //This is called if the user selects no to this question
      }
    },
    {
      question: "Isn't computer science cool?!",
      yes: () => {
        //This is called if the user selects yes to this question
      },
      no: () => {
        //This is called if the user selects no to this question
      }
    },
  ]

Remember that if this prop is not formatted correctly, the library will warn you.