Creating a ReactXP Extension

Mar
November 17, 2018
Blog

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();

Calgary

1700, 308 4th Avenue SW
Calgary, AB T2P 0H7
Canada
403.242.4361

info.calgary@arcurve.com

Houston

5090 Richmond Avenue
Houston TX, 77056
USA
713.422.2135

info.houston@arcurve.com

© 2024 Arcurve. All rights reserved.