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());
  }
}
  • iOS - Inside ios/AppDelegate.mm file edit sourceURLForBridge method
// ...other imports
#import <react-native-stallion/StallionModule.h>

@implementation AppDelegate
// ...other implemetations
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
    #if DEBUG
      return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
    #else
      return [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 : On project settings page click on Generate App Token to create a new app token Alt text for the image

Add StallionProjectId & StallionAppToken as shown below -

  • iOS: Add the copied App Token and projectId to info.plist Alt text for the image

  • android: Add the copied App Token and projectId to strings.xml 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)
  • Add a custom entry point to Stallion Modal UI Choose any custom entry point in your app. Import useStallionModal hook

    Trigger showModal from your custom component.

Tip:

The Stallion SDK entry point is determined by you and is intended only for internal users. Each app can hide this entry point behind more complex UI elements or a feature flag.

MyCustomPageComponent.tsx
   import { useStallionModal } from "react-native-stallion";

   //This is an example, you can call setShowModal from any custom component
   const MyCustomPageComponent: React.FC = () => {
       const { showModal } = useStallionModal();
       return (
           <>
               // Other page level components
               <Button title="Open Stallion" onPress={showModal} />
           </>
       );
   };
  • Finally
    Stallion Installation Complete

Stallion SDK modal should open by using the custom entry point from above step. All your builds should be available in a list to download and install.

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.