React Native

Use the same form model on mobile via the gform-react/native entry point - RNGForm and RNGInput.

gform-react ships a React Native build under the gform-react/native entry point. The model is the same - typed form, validators, formKey, the element render prop - adapted to native components.

Import from `gform-react/native`

import { RNGForm, RNGInput } from "gform-react/native";

The native entry exports RNGForm and RNGInput (the analogues of GForm and GInput).

Key differences from the web

React Native has no <form> element, so:

RNGForm requires an el prop - the component to use as the form container (e.g. View).
Submission is manual - there's no native submit event. Use a button's onPress with state.checkValidity().
State has no toFormData() - RNGFormState exposes toRawData(), toURLSearchParams(), checkValidity(), dispatchChanges(), and isValid / isInvalid.
Fields are text-based - RNGInput's element receives React Native TextInputProps (with onChangeText / onEndEditing wired up); by default it renders a <TextInput>.

Example

SignInScreen.tsx

import { View, Text, TextInput, Button } from "react-native";
import { RNGForm, RNGInput } from "gform-react/native";
import { GValidator, type GValidators } from "gform-react";
 
interface SignInForm {
  username: string;
  password: string;
}
 
const base = new GValidator().withRequiredMessage("Required");
 
const validators: GValidators<SignInForm> = {
  "*": base,
  password: new GValidator(base).withMinLengthMessage("At least 6 characters"),
};
 
export function SignInScreen() {
  return (
    <RNGForm<SignInForm> el={View} validators={validators}>
      {(state) => (
        <View style={{ gap: 12 }}>
          <RNGInput
            formKey="username"
            required
            element={(input, props) => (
              <View>
                <TextInput {...props} placeholder="username" />
                {input.error && <Text style={{ color: "red" }}>{input.errorText}</Text>}
              </View>
            )}
          />
          <RNGInput
            formKey="password"
            required
            minLength={6}
            secureTextEntry
            element={(input, props) => (
              <View>
                <TextInput {...props} placeholder="password" />
                {input.error && <Text style={{ color: "red" }}>{input.errorText}</Text>}
              </View>
            )}
          />
          <Button
            title="Sign in"
            disabled={state.isInvalid}
            onPress={() => {
              if (state.checkValidity()) {
                console.log(state.toRawData());
              }
            }}
          />
        </View>
      )}
    </RNGForm>
  );
}

Default control

If you omit element, RNGInput renders a plain <TextInput>. Provide element whenever you need custom layout, labels, or error display.

Validators are shared

GValidator and GValidators come from the main gform-react entry and work identically on native - see Validation.

Import from gform-react/native

Key differences from the web

Example

Import from `gform-react/native`