# React Native

_Using `Fielder` with React Native projects._

## Differences from web

The API is identical with the only limitations being dependent on your component library.

Unlike in web, most popular React Native form component's don't adhere to a prop naming standard (i.e. _onChange_, _onBlur_, _value_, etc).
Because of this, you'll need to proxy the provided [UseFieldProps](../api/usefield/#usefieldprops) to work with your components.

```tsx
const [fieldProps, fieldMeta] = useField({ name: 'firstName' });

return (
  // React (web)
  <input {...fieldProps} />
  // React Native
  <TextInput {...fieldProps} onChangeText={fieldProps.onChange} /> // TextInput change prop is called 'onChangeText'
);
```

### Scaling this up

It might be worth creating your own _useField_ proxy hooks if you find yourself having to proxy props frequently.

```tsx
export const useTextField = (...args: Parameters<typeof useField>) => {
  const [fieldProps, fieldMeta] = useField(..args);

  return useMemo(() => [
    { ...fieldProps, onChangeText: fieldProps.onChange }, // Apply needed transforms here
    fieldMeta,
  ], [fieldProps, fieldMeta]);
};
```

## Examples

Check out the [React Native example repo](https://github.com/andyrichardson/fielder/tree/master/examples/4-native).