### iOS Setup: Pod Install Source: https://github.com/callstack/react-native-brownfield/blob/main/docs/docs/docs/getting-started/quick-start.mdx After installing the library, run 'pod install' in your iOS directory to complete the setup for iOS. ```bash pod install ``` -------------------------------- ### Install CocoaPods for iOS Example App Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md If needed, install CocoaPods for the example React Native iOS app by navigating to its directory and running `pod install`. ```bash cd apps/RNApp/ios && pod install ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md Run this command in the root of the repository to install all project dependencies. ```bash yarn ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/callstack/react-native-brownfield/blob/main/apps/ExpoApp54/README.md Run this command in your project's root directory to install all necessary npm packages. ```bash npm install ``` -------------------------------- ### Run Example App Standalone on Android Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md Runs an example app standalone on Android. Ensure you are in the specific app directory within `apps/`. ```bash yarn android ``` -------------------------------- ### Run Example App Standalone on iOS Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md Runs an example app standalone on iOS. Ensure you are in the specific app directory within `apps/`. ```bash yarn ios ``` -------------------------------- ### Build Example React Native App for iOS Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md Builds the example React Native application specifically for the iOS platform. ```bash yarn build:example:ios-rn ``` -------------------------------- ### Build Example React Native App for Android Source: https://github.com/callstack/react-native-brownfield/blob/main/CONTRIBUTING.md Builds the example React Native application specifically for the Android platform. ```bash yarn build:example:android-rn ``` -------------------------------- ### Start the Expo Development Server Source: https://github.com/callstack/react-native-brownfield/blob/main/apps/ExpoApp54/README.md Executes the Expo start script to launch the development server, providing options to open the app on various platforms or simulators. ```bash npx expo start ``` -------------------------------- ### Start React Native Source: https://github.com/callstack/react-native-brownfield/blob/main/docs/docs/docs/api-reference/react-native-brownfield/swift.mdx Starts the React Native runtime. This is the primary method for initializing React Native within your application. It can optionally accept a callback to be executed once the JavaScript bundle has finished loading. ```swift ReactNativeBrownfield.shared.startReactNative() ``` ```swift ReactNativeBrownfield.shared.startReactNative(onBundleLoaded: { print("React Native started") }) ``` -------------------------------- ### Start Metro Bundler Source: https://github.com/callstack/react-native-brownfield/blob/main/apps/RNApp/README.md Start the Metro, the JavaScript build tool for React Native. Run this from the root of your React Native project. ```sh # Using npm npm start # OR using Yarn yarn start ``` -------------------------------- ### UIKit Counter Example Source: https://github.com/callstack/react-native-brownfield/blob/main/docs/docs/docs/api-reference/brownie/swift-usage.mdx A complete example of a UIKit view controller that integrates with Brownie to manage and display a counter's state, subscribing to updates. ```APIDOC ## UIKit Counter Example ### Description This example demonstrates a `CounterViewController` in Swift that utilizes Brownie to manage a shared counter state. It sets up the UI, initializes the store, subscribes to state changes, and updates the UI accordingly. It also handles incrementing the counter when a button is tapped. ### Setup 1. **UI Setup**: Configures a `UILabel` for the counter and a `UIButton` for incrementing. 2. **Store Setup**: Retrieves the `BrownfieldStore` using `StoreManager.get` and subscribes to its state changes. 3. **State Updates**: Updates the UI when the store's state changes. 4. **Event Handling**: Increments the counter in the store when the button is tapped. ```swift import UIKit import Brownie class CounterViewController: UIViewController { private var store: Store? private var cancelSubscription: (() -> Void)? private let counterLabel: UILabel = { let label = UILabel() label.font = .systemFont(ofSize: 24, weight: .bold) label.translatesAutoresizingMaskIntoConstraints = false return label }() private let incrementButton: UIButton = { var config = UIButton.Configuration.borderedProminent() config.title = "Increment" let button = UIButton(configuration: config) button.translatesAutoresizingMaskIntoConstraints = false return button }() override func viewDidLoad() { super.viewDidLoad() setupUI() setupStore() } private func setupUI() { view.backgroundColor = .systemBackground let stack = UIStackView(arrangedSubviews: [counterLabel, incrementButton]) stack.axis = .vertical stack.spacing = 16 stack.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stack) NSLayoutConstraint.activate([ stack.centerXAnchor.constraint(equalTo: view.centerXAnchor), stack.centerYAnchor.constraint(equalTo: view.centerYAnchor) ]) incrementButton.addTarget(self, action: #selector(incrementTapped), for: .touchUpInside) } private func setupStore() { // Retrieve store from manager store = StoreManager.get(key: BrownfieldStore.storeName, as: BrownfieldStore.self) guard let store else { counterLabel.text = "Store not found" return } // Initial UI update updateUI(with: store.state) // Subscribe to changes cancelSubscription = store.subscribe { self?.updateUI(with: $0) } } private func updateUI(with state: BrownfieldStore) { counterLabel.text = "Count: \(Int(state.counter))" } @objc private func incrementTapped() { store?.set { $0.counter += 1 } } deinit { cancelSubscription?() } } ``` ``` -------------------------------- ### Full Example: Profile Screen with State Management Source: https://github.com/callstack/react-native-brownfield/blob/main/docs/docs/docs/api-reference/brownie/typescript-usage.mdx A comprehensive example demonstrating the integration of `useStore` for accessing and updating both primitive and nested state values within a React Native component. It includes input handling and button interactions. ```tsx import { useStore } from '@callstack/brownie'; import { View, Text, TextInput, Button } from 'react-native'; function ProfileScreen() { const [counter, setState] = useStore('BrownfieldStore', (s) => s.counter); const [user] = useStore('BrownfieldStore', (s) => s.user); return ( Count: {counter} User: {user.name} setState((prev) => ({ user: { ...prev.user, name: text } })) } />