README.md

react-json-schema-form themed for react-native

Getting Started

yarn add @rjsf/core rjsf-native

# This package also depends on `@react-native-community/slider` and `@react-native-community/datetimepicker`
yarn add @react-native-community/slider
yarn add @react-native-community/datetimepicker

Usage

import ReactNativeForm from 'rjsf-native';

const App = () => {
  const form = useRef(null);
  return (
    <ReactNativeForm
      ref={form}
      onError={e => {
        console.log(e);
        Alert.alert('Please check your form');
      }}
      schema={schema}
      uiSchema={uiSchema}
      onSubmit={form => console.log(form.formData)}>
      <Button
        title="Submit"
        onPress={() => {
          form.current?.submit();
        }}
      />
    </ReactNativeForm>
  );
};

We also provide a Context as a form of overriding defaults and theming

import ReactNativeForm, {defaultProps, FormContext} from 'rjsf-native';

const App = () => {
  const form = useRef(null)
  return (
    <FormContext value={{...defaultProps, requiredTitle: '*'}}>
        <ReactNativeForm .../>
    </FormContext>
  )
}

Form Context Props

{
  theme: {
    primaryColor: string; // Your main theme color. Used for e.g. buttons
    highlightColor: string; // Used for focused inputs, checked checkboxes, slider...
    borderColor: string; // Color of textinput borders
    textColor: string;
    placeholderTextColor: string;
    errorColor: string;
    [propName: string]: any;
  };
  requiredTitle: string;
  arrayAddTitle: string;
  radioLabelMapping?: (label: string) => string;
  [propName: string]: any;
}

Development

1. Run yarn start in root folder to run the dev server
2. cd example && yarn run android to start the example app

Tasks

• hidden widget
• unsupported field
• checkbox widget: Label does not honor theme.textColor
• support hidden schema title / description
• Datepicker (done until more specific functionality is required)
• TimePicker
• DateTimePicker widget
• SelectWidget
• FileUploadWidget
• NumberInput widget
• NullField to null fields from formData (Necessity questionable?)
• widget themes (for example for react-native-paper)
• fix error: After clicking submit with empty required fields and filling in a required field and clicking submit again, error message / inputs update but scrollview scroll to top not executed