Skip to content
Freestyle Docs

Getting Started With React Native

If you’re starting a new React Native project, you can use the freestyle-react-native-template to get started quickly.

If you’re already using React Native, you’ll need to make a few changes to your project to get started.

Installation

First, install the freestyle-sh package:

Terminal window
npm install freestyle-sh

Change your package.json to type module:

{
  "type": "module"
}

You might have some problems with non-module files like babel.config.js. To fix this, rename it to babel.config.cjs.

Add a freestyle.config.ts file to your project.

import { defineConfig } from "freestyle-sh";


export default defineConfig({
  dev: {
    command: "npm run web",
    proxy: "http://localhost:8081",
  },
});

In the root of your app, such as in _layout.tsx, configure the freestyle client to point to your freestyle server. In order for this to work in simulators, you’ll need to set the FREESTYLE_API_URL environment variable to the URL of your server. Locally that url will be http://localhost:8910. In production it will be https://your-project.freestyle.dev.

configureFreestyle({
  baseUrl: process.env.FREESTYLE_API_URL,
});

Cloudstate

You can use cloudstate in any .ts file in your project but we recommend putting it in the /cloudstate directory.

/cloudstate/counter.ts
import { cloudstate } from "freestyle-sh";


@cloudstate
export class Counter {
  static id = "counter";
  value = 0;
  increment() {
    return ++this.value;
  }
}