// Tutorial //

ReactXP: Building Cross Platform Apps

Published on March 5, 2019
Default avatar
By PaulHalliday
Developer and author at DigitalOcean.
ReactXP: Building Cross Platform Apps

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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

Our app running on both Web and 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:

Final app

You can see a full list of components inside of ReactXP here.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
1 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

How to create a executable file after the development of the Reactxp application