Installation

Installation guide for Stallion in 5 easy steps.

Setting up Stallion is straight forward, just install the CLI and SDK and start using. Stallion requires react-native version 0.69 or higher for optimal performance.

SDK Installation

To get started, install the SDK using npm or yarn.

1

Step 1: Install the Stallion SDK and CLI

Begin by installing SDK in your react-native project:

npm i react-native-stallion

or if you are using yarn then

yarn add react-native-stallion

for steps to install the CLI checkout CLI Installation Docs

2

Step 2: Native Installation

After installing the SDK, you need to install pods for iOS and gradle sync android project:

npx pod-install
3

Step 3: Add Stallion bundle support in Android and iOS projects

  • Android - Inside MainApplication.java, override and implement getJSBundleFile method :

    MainApplication.java
    // ...other imports
    import com.stallion.Stallion;
    
    public class MainApplication extends Application implements ReactApplication {
      // ...rest of the class
      @Override
      protected String getJSBundleFile() {
          return Stallion.getJSBundleFile(getApplicationContext());
      }
    }
    

    If running on latest version of react-native (>v0.76)
    Inside MainApplication.kt file edit the reactNativeHost method:

    MainApplication.kt
    // ...other imports
    import com.stallion.Stallion
    
    // ...other functions
    override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
          //other methods...
    
          override fun getJSBundleFile(): String? {
              return Stallion.getJSBundleFile(applicationContext)
          }
      }
    
  • iOS - Inside ios/AppDelegate.mm file edit sourceURLForBridge method

    // ...other imports
    #import "StallionModule.h"
    
    @implementation AppDelegate
    // ...other implemetations
    - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
    {
        #if DEBUG
          return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
        #else
          return [StallionModule getBundleURL];
        #endif
    }
    

    If running on latest version of react-native (>v0.76)
    Inside ios/AppDelegate.swift file edit the bundleURL method:

    // ...other imports
    import react_native_stallion
    
    // ...other functions
    override func bundleURL() -> URL? {
        #if DEBUG
            RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
        #else
            StallionModule.getBundleURL()
        #endif
    }
    
4

Step 4: Add ProjectId & AppToken in native

  • Get projectID from Stallion Dashboard : On project info page, copy project id. Alt text for the image

  • Generate App Token : Navigate to Project > Project Settings > Access Tokens, and select Generate or Regenerate App Token to create a new token. Alt text for the image

Add StallionProjectId & StallionAppToken as shown below -

  • iOS: Add the copied App Token and projectId to info.plist

    <plist version="1.0">
      <dict>
        <!-- ...other configs... -->
        <key>StallionProjectId</key>
        <string>66ed03380eb95c9c316256d3</>
        <!-- make sure app token starts with spb_... and is 46 characters long -->
        <key>StallionAppToken</key>
        <string>spb_FTLx5umZgKLTEyiMNf9-81BgANTOvx7pNhA-gFXbg9</string>
        <!-- ...other configs... -->
      </dict>
    </plist>
    

    Alt text for the image

  • android: Add the copied App Token and projectId to strings.xml

    <resources>
      <string name="app_name">my_app</string>
      <!-- make sure app token starts with spb_... and is 46 characters long -->
      <string name="StallionProjectId">66ed03380eb95c9c316256d3</string>
      <string name="StallionAppToken">spb_FTLx5umZgKLTEyiMNf9-81BgANTOvx7pNhA-gFXbg9</string>
    </resources>
    

    Alt text for the image

5

Step 5: Import and add Stallion as HOC in App.js

  • Import withStallion HOC
    import { withStallion } from 'react-native-stallion';
    
  • Wrap root component (generally App.tsx or App.js) with HOC
    export default withStallion(App)
    

With this setup, you’ll have installed Stallion. I next section we will see how to use Stallion to deploy bundles and get realtime updates.

Remember:

After installing Stallion in your React Native app, make sure to publish a build (APK or TestFlight) with Stallion fully integrated. This is essential to test and verify that OTA updates are being correctly installed via Stallion. Note: If you're running your app in development mode connected to the Metro bundler, Stallion's OTA changes will not be applied. To properly test OTA updates, you must use a published app build.