#Getting Started

This guide walks you through setting up Brownie from scratch - defining stores, generating native types, building XCFrameworks, and using shared state in both React Native and Swift.

#Prerequisites

Before starting, ensure you have:

• Completed the React Native Brownfield Quick Start guide
• React Native project with @callstack/react-native-brownfield installed
• Native iOS app (SwiftUI or UIKit)
• Xcode 15+

#Step 1: Install Brownie

In your React Native project:

npm install @callstack/brownie

#Step 2: Define Your Store

Create a store definition file with the .brownie.ts extension:

// src/stores/AppStore.brownie.ts
import type { BrownieStore } from '@callstack/brownie';

interface AppStore extends BrownieStore {
  counter: number;
}

declare module '@callstack/brownie' {
  interface BrownieStores {
    AppStore: AppStore;
  }
}

Import the store in your app entry point:

// App.tsx
import './stores/AppStore.brownie';

#Step 3: Use the Store in React Native

import { useStore } from '@callstack/brownie';

function Counter() {
  const [counter, setState] = useStore('AppStore', (s) => s.counter);

  return (
    <View>
      <Text>Count: {counter}</Text>
      <Button
        title="Increment"
        onPress={() => setState((prev) => ({ counter: prev.counter + 1 }))}
      />
    </View>
  );
}

#Step 4: Build XCFrameworks

The CLI generates native types and builds everything into XCFrameworks:

npx brownfield package:ios --scheme YourScheme --configuration Release

This produces the following in ios/.brownfield/package/build/:

• YourScheme.xcframework - Your React Native module
• hermesvm.xcframework - JavaScript engine (or hermes.xcframework for RN < 0.82.0)
• ReactBrownfield.xcframework - Brownfield integration
• Brownie.xcframework - Shared state library (only when using the Brownie package)
• BrownfieldNavigation.xcframework - Brownfield navigation integration (only when using the brownfield-navigation package)

The ios/.brownfield/build/ directory contains the build cache.

#Step 5: Add Frameworks to Native App

1. Open your native Xcode project
2. Drag all XCFrameworks from ios/.brownfield/package/build/ into your project
3. In target settings → General → Frameworks, Libraries, and Embedded Content, set all to Embed & Sign

#Step 6: Register Store in Swift

In your app's entry point, register the store with initial state:

import Brownie
import ReactBrownfield
import SwiftUI

let initialState = AppStore(counter: 0)

@main
struct MyApp: App {
  init() {
    ReactNativeBrownfield.shared.startReactNative {
      print("React Native loaded")
    }

    AppStore.register(initialState)
  }

  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

#Step 7: Use the Store in SwiftUI

import Brownie
import SwiftUI

struct CounterView: View {
  @UseStore(\AppStore.counter) var counter

  var body: some View {
    VStack {
      Text("Count: \(Int(counter))")
      Button("Increment") {
        $counter.set { $0 + 1 }
      }
    }
  }
}

#Done!

State changes now sync automatically between React Native and Swift. Increment from either side and both update immediately.

#Next Steps

• Defining Stores - Nested objects and multiple stores
• TypeScript Usage - Advanced React Native patterns
• Swift Usage - UIKit integration and API reference
• XCFramework Packaging - SPM distribution and advanced options