> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Learn how to render your first form using the Joyfill React Native SDK.

Joyfill's React Native SDK supports raw react native and expo projects. The SDK is NOT a wrapped web-view. The SDK uses all pure react native components in order to provide the best possible performance and support across your react native and expo apps.

# Requirements

* [Review SDK README](https://www.npmjs.com/package/@joyfill/components-react-native#project-requirements)

# 1. Install

* [Review SDK Installation](https://www.npmjs.com/package/@joyfill/components-react-native#install-dependency)

# 2. Usage

* Add the Template identifier from the previous setup step to the `App.js` file.
* Add the User Access Token from the preview setup step to the `api.js` file.

<CodeGroup>
  ```bash bash theme={null}
  import React, { useState, useEffect } from 'react';
  import { Dimensions } from 'react-native';
  import { retrieveTemplate } from '../api.js';

  import { JoyDoc } from '@joyfill/components-react-native';

  const screenWidth = Dimensions.get('window').width;

  function App() {

    const [ template, setTemplate ] = useState(null);

    /**
     * Add your template identifier
     */
    const identifier = '<REPLACE_WITH_TEMPLATE_IDENIFIER>';

    /**
     * Retrieve template via the Joyfill API 
     */
    useEffect(() => {

      const handleRetrieveTemplate = async () => {
        const response = await retrieveTemplate(identifier);
        setTemplate(response);
      };

      handleRetrieveTemplate();

    }, []);

    return (
      <JoyDoc
        mode="fill"
        doc={template}
        width={screenWidth}
        onChange={(changelogs, doc) => {

          /**
           * Changelogs represent the individual change that was made
           * Data represents the entire data structure with all new changes applied.
           */
          console.log('>>>>>>>>: ', changelogs, doc);

        }}
      />
    );

  }
  ```

  ```bash bash theme={null}
  const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
  const apiBaseUrl = "https://api-joy.joyfill.io";

  export const retrieveTemplate = async (identifier) => {

    //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
    const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
      method: 'GET',
      mode: 'cors',
      headers: {
        Authorization: `Bearer ${userAccessToken}`,
        'Content-Type': 'application/json'
      },
    });

    const data = await response.json();
    return data;
  }
  ```
</CodeGroup>

<Warning>
  ### Do not wrap JoyDoc component inside of a ScrollView. JoyDoc rendering optimizations will not work properly inside of ScrollView and will introduce unintended bugs.
</Warning>

# 3. Try it yourself

If you’re looking for a full example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.

* [Joyfill React Native Example](https://github.com/joyfill/examples/tree/main/react-native)
* [SDK NPM Package](https://www.npmjs.com/package/@joyfill/components-react-native)

***