Walkthrough: Getting started with JSS for React Native

Version: 22.x

This walkthrough describes how to create and run your first JSS for React Native application.

Before you can create an application with JSS for React Native, you must set up your development environment according to the React Native guide, as follows:

  • The JSS application sample for React Native is based on a project created with the React Native CLI using the react-native init command. When you are setting up React Native, you must select the React Native CLI Quickstart tab.

    • In the new page view, choose your development and target operating systems from the available options.

    • Install any dependencies as directed by the React Native guide.

    • Confirm you can run the application created during this setup process.

  • Familiarize yourself with the available application modes for React Native apps built with JSS.

  • Install the JSS CLI.

Note

The basic app created with JSS for React Native has been tested with the following configurations and tools:

  • Windows/Android, using a physical device connected using USB to the development machine.

  • macOS / iOS, using the Xcode simulator.

This walkthrough describes how to:

  • Create the application.

  • Run the application.

Create the application

To create an application with JSS for React Native:

  • Run the following command:

    RequestResponse
    npx create-sitecore-jss@ver<version-number> react-native [--appName <your-app-name> --fetchWith [REST | GraphQL]]

    Replace <version-number> with the version you wish to use. For example, 21.

    Note

    If choosing GraphQL, your application must be connected to Sitecore. GraphQL requests are not supported in disconnected mode.

Run the application

To start your JSS React Native application, run one of the following scripts in a terminal, depending on the application mode you are using:

  • If you do not have a Sitecore instance available, start the application in disconnected mode:

    Note

    You can find script definitions in the package.json file of your new JSS React Native application.

    • For an Android app:

      RequestResponse
      jss start-android

    • For an iOS app:

      RequestResponse
      jss start-ios

  • If you have a Sitecore instance and want to develop against it, connect and deploy your JSS application to Sitecore, and then start the application in connected mode:

    • For an Android app:

      RequestResponse
      jss start-android:connected

    • For an IOS app:

      RequestResponse
      jss start-ios:connected

The React Native build process opens one or two separate terminal window(s) or tab(s) containing the output from the React Native Metro bundler, and the output from a React Native platform-specific compiler, such as Xcode or Android SDK.

When the build process is completed, you can see the JSS React Native sample app in the simulator or on the screen of a physical device.

Note

The initial build can take several minutes. Subsequent builds are typically much faster. This is normal behavior for React Native.

Do you have some feedback for us?

If you have suggestions for improving this article,