Tutorial

ReactXP: Building Cross Platform Apps

Published on March 5, 2019
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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors

Still looking for an answer?

Ask a questionSearch for more help

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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel