Creating a ReactXP Extension

Mar

November 17, 2018

For some cross-platform projects we’re working on (mobile and web), we’re using ReactXP. One of the aspects we like is that when we need platform-specific implementations for a ReactXP Extension, we simply follow a naming convention and ReactXP will choose the implementation appropriately. The convention is to use index.tsx for Web, index.ios.tsx for iOS, and index.android.tsx for Android.

index.tsx: import component for Web

import thingy from "react-web-thingy";

class SampleClass { 
  public someMethod() { 
    thingy.doWebThing(); 
  };
}

const implementation = new SampleClass();

export { 
  implementation as Sample,
};

index.ios.tsx: import component for iOS

import thingy from "react-native-ios-thingy";

class SampleClass { 
  public someMethod() { 
    thingy.doiOSThing(); 
  };
}

const implementation = new SampleClass();

export { 
  implementation as Sample,
};

index.android.tsx: import component for Android

import thingy from "react-native-android-thingy";

class SampleClass { 
  public someMethod() { 
    thingy.doAndroidThing();
  };
}

const implementation = new SampleClass();

export {
 implementation as Sample,
};

‍

Note: In most situations you will use the same component for Android and iOS (React Native)

Using the sample extension:

import {Sample} from "./extensions/sample";

Sample.someMethod();