react_native_expo_json_forms_schema_quickstart.ts

1import React, { useState } from 'react';
2import { SafeAreaView, ScrollView } from 'react-native';
3import { JsonForms } from '@jsonforms/react';
4import { expoRenderers } from '@dwidge/json-forms-expo';
5
6// 1. Define the data schema
7const schema = {
8  type: 'object',
9  properties: {
10    name: {
11      type: 'string',
12      minLength: 3,
13      description: 'Please enter your name',
14    },
15    done: {
16      type: 'boolean',
17    },
18    due_date: {
19      type: 'string',
20      format: 'date',
21    },
22    rating: {
23      type: 'integer',
24      maximum: 5,
25    },
26  },
27  required: ['name'],
28};
29
30// 2. Define the UI schema
31const uischema = {
32  type: 'VerticalLayout',
33  elements: [
34    {
35      type: 'Control',
36      scope: '#/properties/name',
37    },
38    {
39      type: 'Control',
40      scope: '#/properties/due_date',
41    },
42    {
43      type: 'Control',
44      scope: '#/properties/done',
45    },
46    {
47      type: 'Control',
48      scope: '#/properties/rating',
49    },
50  ],
51};
52
53const initialData = {
54  name: 'Send email to Jane',
55  done: true,
56};
57
58export default function App() {
59  const [data, setData] = useState<any>(initialData);
60
61  return (
62    <SafeAreaView style={{ flex: 1 }}>
63      <ScrollView contentContainerStyle={{ padding: 20 }}>
64        <JsonForms
65          schema={schema}
66          uischema={uischema}
67          data={data}
68          renderers={expoRenderers}
69          onChange={({ data }) => setData(data)}
70        />
71      </ScrollView>
72    </SafeAreaView>
73  );
74}