expo_jsonforms_form_rendering_with_dwidge_expo_renderers.ts

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