The ReactXP library is designed to be as lightweight as possible, including only those cross-platform APIs and “primitive” components that are required by almost every app. Functionality that is needed less commonly is provided in the form of optional extensions.
There are two distinct types of extensions.
Extensions are published as separate npm packages. They typically start with the prefix “reactxp-“.
Using a higher-level component is just like using any other component in React. Because these components are built on cross-platform ReactXP primitives, they also work in a cross-platform manner.
To use a primitive extension in your app, add it to your package.json like any other npm module. Then import it at the top of the code module where you want to consume it.
Here is an example of how to use a hypothetical extension that provides video playback capabilities in a cross-platform manner.
import RXVideoPlayer from 'reactxp-videoplayer';
class MyVideoPanel extends RX.Component<null, null> {
render() {
return (
<RXVideoPlayer
source={ this.props.source }
showControls={ true }
onProgress={ this._onVideoProgress }
onEnded={ this._onVideoEnded }
/>
);
}
}
A new “primitive” extension (either a component or an API namespace) must have a cross-platform interface and a platform-specific implementation of this interface for each of the platforms supported by ReactXP. In some cases, the implementation may be shared between platforms.
An implementation should be provided for each of the supported platforms. Web, iOS and Android are required. React Native for MacOS and Windows are still under development and are currently considered optional, but they may become required in the future. The main implementation file for each platform is named index.[platform].js
. For the web, the platform is omitted (that is, the file is named index.js
). These implementation files must live at the top level of the extension’s published directory, but it is typical for them to simply import code from a dist
directory.
Many ReactXP apps are written in TypeScript, so it’s highly recommended that all ReactXP extensions provide a type definition file that defines the cross-platform interface to the extension. The extension’s package.json
should refer to this type file. For example: "types": "dist/MyExtension.d.ts"
. If you are implementing the extension in TypeScript, the compiler can be used to ensure that the implementation for each platform matches the public interface.
Refer to the “Extensions” section of the documentation for a full list of available ReactXP extensions. Some of these are in separate git repositories, and others are in the extensions directory of the reactxp repository. The reactxp-video extension is a good example of a complete extension that involves native code for each of the supported platforms. To build any of these sample extensions:
reactxp/extensions/video
).npm install
.npm run build
.The resulting code will be found in the dist
directory.