ReactXP: Building Cross Platform Apps

Building cross platform applications with React isn’t a new thing. Many companies have used (and still are using) React Native for mobile-first projects today. ReactXP looks to take this further by seeking to reuse the view-layer across multiple platforms, something that React Native doesn’t achieve out of the box.

Creating a ReactXP project

We can clone the GitHub repo with various samples included, or alternatively install the Create RX CLI globally like so:

$ npm install create-rx-app -g

To create your first ReactXP application, run the following after installing the CLI:

$ create-rx-app HelloRX

# OR

$ npx create-rx-app HelloRX

If we investigate the package.json file, we can gain some insights on how to start / build our project as seen in the scripts object:

"scripts": {
  "start:android": "yarn rn-cli run-android",
  "start:windows": "yarn rn-cli run-windows",
  "start:ios": "yarn rn-cli run-ios",
  "start:web": "cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development",
  "start:rn-dev-server": "yarn rn-cli start --reset-cache",
  "build:web": "cross-env platform=web webpack --config=web/webpack/prod.js --progress --colors --mode=production",
}

For the purposes of our demo, I’ll be running this on iOS and the web. You can do the same or select another platform of your choice.

$ npm run start:web
$ npm run start:ios

Hello, Alligator.

We’ll be creating an example application that uses ReactXP to fetch data from a HTTP server and display it on screen. Inside of App.tsx, add the following code:

import React from 'react';
import { Component, Styles, View, Text, ScrollView } from 'reactxp';

const _styles = {
  main:
    Styles.createViewStyle({
      flex: 1,
    }),

  navBarText:
    Styles.createTextStyle({
      color: 'white',
    }),

  navBar:
    Styles.createViewStyle({
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#0984e3',
      height: 65,
    }),

  scroll:
    Styles.createScrollViewStyle({
      alignSelf: 'stretch',
      backgroundColor: '#f5fcff',
      padding: 16,
    }),

  user:
    Styles.createTextStyle({
      marginBottom: 10,
    }),
};

export class App extends Component {
  public state = {
    users: [],
  };

  public async componentWillMount() {
    const req = await fetch(`https://jsonplaceholder.typicode.com/users`);

    const data = await req.json();

    this.setState({
      users: data,
    });
  }

  public displayUsers = (users) => {
    return users.map((user) => (
      <View key={user.id} style={_styles.user}>
        <Text>{user.name}</Text>
        <Text>{user.email}</Text>
      </View>
    ));
  }

  public render() {
    return (
      <View useSafeInsets={true} style={_styles.main}>
        <View style={_styles.navBar}>
          <Text style={_styles.navBarText}>Users</Text>
        </View>
        <ScrollView style={_styles.scroll}>{this.displayUsers(this.state.users)}</ScrollView>
      </View>
    );
  }
}

Starting with our _styles object, to tailor the styles across each platform, we use createXStyle which converts the styling to each unique native element. As expected, each style element must match the appropriate tag - so for example, createViewStyle must be placed on a View element.

Everything from here on out is similar to a standard React/React Native application. Note how we’re having to import each component from reactxp prior to using it.

Here’s how our final app looks like: