RNSurvey is a React Native application that adds JSON-based surveys to Android and iOS applications. This repository contains basic building blocks to create your own survey. RNSurvey can be used as a standalone application, but could also be integrated into an existing native application.
-
Clone this repository:
git clone https://github.com/sluijs/RNSurvey.git. -
Install the dependencies:
yarn addornpm install. RNSurvey has few dependencies, but needs ajv and redux to function properly. -
Run
npm startandreact-native run-iosorreact-native run-androidto start the application.
This is a quick overview to kickstart your RNSurvey.
RNSurvey enables you to create a survey based on a JSON-template. This JSON-template needs to be created in accordance with its schema. Validation failure of the provided JSON-template will result in a fatal error.
The JSON-template must have a data property, which in turn, should have a property named questionnaire. The questionnaire property has two obligatory children: questionnaire_id and questions. questions is an array of question specifications.
You could create a survey with one slider question like this:
{
"data": {
"questionnaire": {
"questionnaire_id": 1,
"questions": [
{
"question_id": 1,
"type": 1,
"title": "Numeric slider",
"description": "This is an obligatory slider, with a minimum value of 30, default value of 120 and a maximum value of 220.",
"obligatory": true,
"min_value": 30,
"default_value": 120,
"max_value": 220
}
]
}
}
} An example covering all available question types can be found here.
The type attribute of a question indicates which layout and IO component RNSurvey will draw. RNSurvey uses the <QuestionPicker> component internally to choose a layout for the question. This repository contains one simple layout: <BasicQuestion>, but you could easily add your own question layouts in this manner. <BasicQuestion> is responsible to draw the right IO component to enable the user to interact with the survey. A couple of IO components are currently included:
-
Numeric slider: Slide between a minimum value and a maximum value. You can set a default value to start with. The according question type is 1. -
Numeric input: Lets the user type an integer between a minimum and a maximum value. You can set a placeholder and a default value. Its question type is 5. -
Single choice: Users can pick a single item from a list of options. You can set an option that is selected by default. The corresponding question type is 2. -
Multiple choice: Users can select multiple items from a list of options. Options that are selected by default can be set. The corresponding question type is 4.
RNSurvey is based on three containers (components that are connected to the Redux store) internally: HeaderContainer, FooterContainer, and QuestionnaireContainer. Both the HeaderContainer and the FooterContainer are mainly concerned with navigation. The QuestionnaireContainer contains most of the logic that deals with the actual survey. Its main purpose is to provide the <QuestionPicker> component with the right props.
Creating a question layout
If you want to create a new question layout (e.g. an alternative to <BasicQuestion>), make sure to add it to the <QuestionPicker> component. This component can then decide which layout to draw based on the type property of the question.
Creating an IO component
RNSurvey is flexible such that it easily allows for new IO components. If you create a new IO component, make sure to give it a unique type property. Once created, you should make sure that your question layout (e.g. <BasicQuestion>) knows when to render this IO component.
Downloading and submitting questionnaires
If you do not want to include the JSON-template for the survey in the RNSurvey component, you have two options: fetch it from a remote server, or passing it to RNSurvey via its props. If you want to fetch it from a remote server, I'd recommend to use Redux Thunk. You can find a tutorial on how to pass information between native and React Native components here.
- Author: Rogier van der Sluijs