{"id":28505108,"url":"https://github.com/curiosum-dev/react-native-survey-kit","last_synced_at":"2025-07-06T12:32:22.391Z","repository":{"id":266849094,"uuid":"897805634","full_name":"curiosum-dev/react-native-survey-kit","owner":"curiosum-dev","description":"React Native package with survey component.","archived":false,"fork":false,"pushed_at":"2024-12-13T14:23:37.000Z","size":2609,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T19:06:58.025Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/curiosum-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-03T09:17:57.000Z","updated_at":"2025-04-29T13:05:43.000Z","dependencies_parsed_at":"2024-12-06T14:54:07.553Z","dependency_job_id":null,"html_url":"https://github.com/curiosum-dev/react-native-survey-kit","commit_stats":null,"previous_names":["curiosum-dev/react-native-survey-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/curiosum-dev/react-native-survey-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curiosum-dev%2Freact-native-survey-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curiosum-dev%2Freact-native-survey-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curiosum-dev%2Freact-native-survey-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curiosum-dev%2Freact-native-survey-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curiosum-dev","download_url":"https://codeload.github.com/curiosum-dev/react-native-survey-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curiosum-dev%2Freact-native-survey-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263900843,"owners_count":23527328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-08T19:06:40.931Z","updated_at":"2025-07-06T12:32:22.385Z","avatar_url":"https://github.com/curiosum-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-survey-kit\n\nA highly customizable survey component for React Native.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n  - [SurveyComponent](#surveycomponent)\n  - [SurveyProvider](#surveyprovider)\n- [Customization](#customization)\n- [Styling](#styling)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nInstall the package using npm:\n\n```sh\nnpm install react-native-survey-kit\n```\n\nor yarn:\n\n```sh\nyarn add react-native-survey-kit\n```\n\n## Usage\n\nBelow is an example showing how to use the `SurveyComponent` with comprehensive usage of props and styling for some customization.\n\n```javascript\nimport { useState } from 'react';\nimport { View, Button, StyleSheet, Text } from 'react-native';\nimport {\n  SurveyProvider,\n  SurveyComponent,\n  QuestionTypeKeys,\n  type SurveyData,\n} from 'react-native-survey-kit';\n\nconst App = () =\u003e {\n  const [isSurveyVisible, setSurveyVisible] = useState(false);\n  const [surveyResult, setSurveyResult] = useState\u003cRecord\u003c\n    string,\n    string | string[] | number\n  \u003e | null\u003e(null);\n\n  const surveyData: SurveyData = [\n    {\n      questionId: 'q1',\n      questionType: QuestionTypeKeys.Info,\n      questionText: 'Welcome to the survey!',\n      questionSettings: {\n        type: QuestionTypeKeys.Info,\n        description: 'Some description!',\n      },\n    },\n    {\n      questionId: 'q2',\n      questionType: QuestionTypeKeys.TextInput,\n      questionText: 'What is your name?',\n      questionSettings: {\n        type: QuestionTypeKeys.TextInput,\n        maxLength: 100,\n        placeholder: 'Enter your name',\n      },\n      required: true,\n    },\n    {\n      questionId: 'q3',\n      questionType: QuestionTypeKeys.SelectionGroup,\n      questionText: 'Pick your favorite fruit',\n      questionSettings: {\n        type: QuestionTypeKeys.SelectionGroup,\n        maxMultiSelect: 2,\n        options: [\n          { value: 'apple', optionText: 'Apple' },\n          { value: 'banana', optionText: 'Banana' },\n          { value: 'orange', optionText: 'Orange' },\n          { value: 'grape', optionText: 'Grape' },\n        ],\n      },\n      required: true,\n    },\n    {\n      questionId: 'q4',\n      questionType: QuestionTypeKeys.SelectionGroup,\n      questionText: 'Select all your hobbies',\n      questionSettings: {\n        type: QuestionTypeKeys.SelectionGroup,\n        maxMultiSelect: 1,\n        options: [\n          { value: 'reading', optionText: 'Reading' },\n          { value: 'traveling', optionText: 'Traveling' },\n          { value: 'cooking', optionText: 'Cooking' },\n          { value: 'sports', optionText: 'Sports' },\n        ],\n      },\n      required: false,\n    },\n    {\n      questionId: 'q5',\n      questionType: QuestionTypeKeys.NumericInput,\n      questionText: 'Rate your experience with our service (0-10)',\n      questionSettings: {\n        type: QuestionTypeKeys.NumericInput,\n        min: 0,\n        max: 10,\n        step: 1,\n      },\n      required: true,\n    },\n    {\n      questionId: 'q6',\n      questionType: QuestionTypeKeys.NumericInput,\n      questionText: 'How many cups of water do you drink daily?',\n      questionSettings: {\n        type: 'numeric',\n        min: 0,\n        max: 20,\n        sliderOnly: true,\n      },\n      required: true,\n    },\n    {\n      questionId: 'q7',\n      questionType: QuestionTypeKeys.SelectionGroup,\n      questionText: 'Do you agree with our terms?',\n      questionSettings: {\n        type: QuestionTypeKeys.SelectionGroup,\n        options: [\n          { value: 'yes', optionText: 'Yes' },\n          { value: 'no', optionText: 'No' },\n        ],\n      },\n      required: true,\n    },\n    {\n      questionId: 'q8',\n      questionType: QuestionTypeKeys.SelectionGroup,\n      questionText: 'Select your hobbies',\n      questionSettings: {\n        type: QuestionTypeKeys.SelectionGroup,\n        maxMultiSelect: 3,\n        options: [\n          { value: 'reading', optionText: 'Reading' },\n          { value: 'traveling', optionText: 'Traveling' },\n          { value: 'cooking', optionText: 'Cooking' },\n        ],\n      },\n      required: true,\n    },\n  ];\n\n  const handleSurveyComplete = (answers: any) =\u003e {\n    setSurveyResult(answers);\n    setSurveyVisible(false);\n  };\n\n  return (\n    \u003cSurveyProvider\u003e\n      \u003cView style={styles.container}\u003e\n        \u003cButton title=\"Start Survey\" onPress={() =\u003e setSurveyVisible(true)} /\u003e\n        \u003cSurveyComponent\n          isVisible={isSurveyVisible}\n          onClose={() =\u003e setSurveyVisible(false)}\n          surveyData={surveyData}\n          modalAnimationType=\"fade\"\n          onSurveyComplete={handleSurveyComplete}\n          textProps={{\n            surveyTitle: (\n              \u003cText style={styles.surveyTitle}\u003eMy Custom Survey\u003c/Text\u003e\n            ),\n            errorText: 'Please answer this question.',\n            previousButtonText: 'Go Back',\n            nextButtonText: 'Proceed',\n            finishButtonText: 'Submit',\n          }}\n          buttonProps={{\n            previousButton: (\n              \u003cText style={styles.buttonText}\u003ePrevious Question\u003c/Text\u003e\n            ),\n            nextButton: \u003cText style={styles.buttonText}\u003eNext Question\u003c/Text\u003e,\n            finishButton: \u003cText style={styles.buttonText}\u003eFinish Survey\u003c/Text\u003e,\n          }}\n          customStyles={{\n            container: styles.surveyContainer,\n            closeButtonProps: {\n              closeButtonTouchable: styles.closeButton,\n              closeButtonText: styles.closeButtonText,\n            },\n          }}\n          closeButtonText=\"End Survey\"\n        /\u003e\n        {surveyResult \u0026\u0026 (\n          \u003cView\u003e\n            \u003cText\u003eSurvey Result:\u003c/Text\u003e\n            \u003cText\u003e{JSON.stringify(surveyResult, null, 2)}\u003c/Text\u003e\n          \u003c/View\u003e\n        )}\n      \u003c/View\u003e\n    \u003c/SurveyProvider\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    padding: 20,\n  },\n  surveyTitle: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#007AFF',\n    marginBottom: 24,\n  },\n  surveyContainer: {\n    padding: 20,\n    borderRadius: 8,\n  },\n  closeButton: {\n    position: 'absolute',\n    top: 40,\n    right: 10,\n  },\n  closeButtonText: {\n    color: '#ff0000',\n  },\n  buttonText: {\n    fontSize: 16,\n    fontWeight: 'bold',\n    color: 'white',\n  },\n});\n\nexport default App;\n```\n\n## Props\n\n### SurveyComponent\n\n| Prop                   | Type                                                              | Required | Description                                                                              |\n| ---------------------- | ----------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------- |\n| `isVisible`            | `boolean`                                                         | Yes      | Controls the visibility of the survey modal.                                             |\n| `onClose`              | `() =\u003e void`                                                      | Yes      | Callback when the survey modal is closed.                                                |\n| `surveyData`           | `SurveyData`                                                      | Yes      | Array of questions defining the survey.                                                  |\n| `onSurveyComplete`     | `(answers: Record\u003cstring, string \\| string[] \\| number\u003e) =\u003e void` | Yes      | Callback invoked upon survey completion with the answers.                                |\n| `modalAnimationType`   | `'slide' \\| 'fade'`                                               | No       | The type of animation for modal transition.                                              |\n| `textProps`            | `object`                                                          | No       | Customize text elements used in the survey (e.g., title, error messages).                |\n| `buttonProps`          | `object`                                                          | No       | Provide custom components for navigation buttons (Previous, Next, Finish).               |\n| `customStyles`         | `SurveyComponentStyles`                                           | No       | Use this for styling various parts of the survey, such as questions and navigation bars. |\n| `closeButtonComponent` | `React.ReactNode`                                                 | No       | Custom component for the close button.                                                   |\n| `closeButtonText`      | `string`                                                          | No       | Text for the close button, used if `closeButtonComponent` is undefined.                  |\n\n### SurveyProvider\n\nThe `SurveyProvider` provides context and state management for your survey. Wrap your app or the relevant section in `SurveyProvider`.\n\n## Customization\n\nThe component allows extensive customization for various UI elements and interactions:\n\n- **Text and Buttons**: Modify text and button elements with `textProps` and `buttonProps`.\n- **Styles**: Fully customize styles using `customStyles`.\n\n## Styling Individual Question Components\n\nThe survey components are highly customizable, enabling you to define specific styles for different question types. Below is a list of available style properties you can use for different question types.\n\n### InfoQuestion\n\nYou can customize the appearance of informational questions using the following properties:\n\n- `questionText`: Styles the main question text.\n- `surveyDescription`: Styles the description text.\n\n**Example:**\n\n```javascript\nconst styles = {\n  infoQuestion: {\n    questionText: {\n      fontSize: 18,\n      color: '#333',\n      fontWeight: 'bold',\n    },\n    surveyDescription: {\n      fontSize: 16,\n      color: '#666',\n      fontStyle: 'italic',\n    },\n  },\n};\n```\n\n### TextInputQuestion\n\nCustomize text input questions with these properties:\n\n- `container`: Styles the outer container.\n- `textInput`: Styles the text input field itself.\n\n**Example:**\n\n```javascript\nconst styles = {\n  textInputQuestion: {\n    container: {\n      padding: 10,\n      backgroundColor: '#f8f8f8',\n    },\n    textInput: {\n      borderWidth: 1,\n      borderColor: '#ccc',\n      padding: 8,\n    },\n  },\n};\n```\n\n### SelectionGroupQuestion\n\nFor questions that involve selecting one or more options, use these styles:\n\n- `flatListContainer`: Styles the flat list's container wrapping all options.\n- `flatListContent`: Styles the content within the flat list.\n- `optionButton`: Styles the option button itself.\n- `selectedOption`: Styles applied to a selected option.\n- `optionText`: Styles the text of each option.\n\n**Example:**\n\n```javascript\nconst styles = {\n  selectionGroupQuestion: {\n    flatListContainer: {\n      marginVertical: 20,\n    },\n    optionButton: {\n      backgroundColor: '#fff',\n      padding: 10,\n      borderRadius: 5,\n    },\n    selectedOption: {\n      backgroundColor: '#e6f7ff',\n    },\n    optionText: {\n      color: '#333',\n    },\n  },\n};\n```\n\n### NumericInputQuestion\n\nNumeric questions, which can include sliders, have these customizable styles:\n\n- `container`: Styles the container for numeric input questions.\n- `sliderTrack`: Styles the track of the slider.\n- `sliderThumb`: Styles the thumb of the slider.\n\n**Example:**\n\n```javascript\nconst styles = {\n  numericInputQuestion: {\n    container: {\n      padding: 20,\n      alignItems: 'center',\n    },\n    sliderTrack: {\n      height: 10,\n      borderRadius: 5,\n      backgroundColor: '#ddd',\n    },\n    sliderThumb: {\n      width: 20,\n      height: 20,\n      backgroundColor: '#007aff',\n    },\n  },\n};\n```\n\n### Customizing with `customStyles`\n\nTo apply these styles, pass them into the `customStyles` prop of the `SurveyComponent`. This allows you to maintain a sleek and consistent design across your entire survey.\n\n**Example:**\n\n```javascript\n\u003cSurveyComponent\n  ...\n  customStyles={{\n    infoQuestion: styles.infoQuestion,\n    textInputQuestion: styles.textInputQuestion,\n    selectionGroupQuestion: styles.selectionGroupQuestion,\n    numericInputQuestion: styles.numericInputQuestion,\n  }}\n/\u003e\n```\n\n## Contributing\n\nWe welcome contributions! Feel free to fork the repo, make your changes, and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\n[Curiosum](https://curiosum.com/)\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/curiosum-dev/react-native-survey-kit/blob/main/LICENSE) file for details.\n\n---\n\nCreated with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n\n## Screenshot\n\n![alt text](https://raw.githubusercontent.com/curiosum-dev/react-native-survey-kit/main/image.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuriosum-dev%2Freact-native-survey-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuriosum-dev%2Freact-native-survey-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuriosum-dev%2Freact-native-survey-kit/lists"}