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

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.

Contributions of any kind are warmly appreciated!