survey-react-native-ui (POC)

⚠️ This package is an early, text-question-only proof of concept. The APIs will evolve as we add more question types.

What is this?

survey-react-native-ui renders a survey-core SurveyModel inside a React Native surface. The current prototype wires SurveyJS models to React Native Paper components (with graceful fallbacks to native primitives when a Paper equivalent does not exist) and includes:

• Survey component that renders visible pages/questions from an existing SurveyModel.
• Default Material Design 3 theming powered by React Native Paper's PaperProvider, with optional overrides.
• One built-in question renderer (text). Additional question types can be registered through registerQuestionRenderer.

Installing locally

This repo uses npm workspaces. From the repository root run:

npm install

Then build the package once:

cd packages/survey-react-native-ui
npm run build

Using the Survey component

import { Model } from "survey-core";
import { Survey } from "survey-react-native-ui";

const surveyJson = {
  elements: [
    { name: "name", type: "text", title: "What is your name?" }
  ]
};

const model = new Model(surveyJson);

export default function SurveyScreen() {
  return <Survey model={model} />;
}

Theming and customization

Survey wraps its output in a React Native Paper PaperProvider using the default MD3 theme. Supply the optional paperProviderProps prop to customize the theme or provider settings:

import { MD3DarkTheme } from "react-native-paper";

<Survey
  model={model}
  paperProviderProps={{ theme: MD3DarkTheme }}
/>;

If you already wrap your app with PaperProvider, pass the same theme via paperProviderProps so the survey UI stays aligned with the surrounding surface.

Adding more question types

Use registerQuestionRenderer to connect a SurveyJS question type to a React Native component.

import { registerQuestionRenderer } from "survey-react-native-ui";

registerQuestionRenderer("dropdown", ({ question }) => {
  // render question as you like
  return null;
});

We will upstream first-party renderers iteratively. Until then, the Expo sample (see /examples/react-native-expo) shows how to link the package and experiment.