microsoft/reactxp

Library for cross-platform app development.

ReactXP

ReactXP is a library for cross-platform app development using React and React Native.

ReactXP End of Life

The ReactXP library is no longer being maintained and is is considered “end of life”. We recommend alternatives such as React Native for Web. The ReactXP github project will be put into “archive” mode and will remain available in read-only form for the benefit of those who are still using it within older projects, but no new versions will be published.

Why ReactXP

With React and React Native, your web app can share most of its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform. We have taken this a step further and developed a thin cross-platform layer we call ReactXP. If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms. Of course, you can still provide platform-specific UI variants, but this can be done selectively where desired.

Getting Started

The samples directory contains a minimal “Hello World” app that demonstrates some basic ReactXP functionality. You can use this as a starting point. Just follow the build instructions in the README file.

Also included in the samples directory is the RXPTest app which attempts to exercise all of the functionality of ReactXP. It is a good source to consult for sample usage of APIs, components, and props.

You can read more about ReactXP and its APIs from the ReactXP official Documentation.

Use the command-line tool called create-rx-app to create a starter project.

npm install create-rx-app -g
create-rx-app AppName

or

npx create-rx-app AppName

By default the project will be created in TypeScript. However if you prefer JavaScript instead, add --javascript when creating the project.

This will create a directory called AppName inside the current working directory. Inside AppName, this will generate the initial project structure and install all of its dependencies. Once this installation is done, there are some commands you can run in the project directory:

• npm run start:web - runs the Web version of the app in the development mode
• npm run build:web - builds the Web version of the app for production to the dist-web folder
• npm run start:ios - runs the iOS version of the app and attempts to open in the iOS Simulator if you're on a Mac and have it installed
• npm run start:android - runs the Android version of the app and attempts to open your app on a connected Android device or emulator
• npm run start:windows - runs the Windows version of the app
• npm start:rn-dev-server - runs react native (RN) development server

Prerequisites

• Node.Js (Setup Instructions)
• React Native (Setup Instructions)

ESLint rules

TSLint will be deprecated some time in 2019

If you plan to migrate your projects from TSLint to ESlint and want to continue using the rules to automate search common problems in ReactXP usage, you can use eslint-plugin-reactxp.

Contributing

We welcome contributions to ReactXP. See the CONTRIBUTING file for how to help out.

License

This project is licensed under the MIT License - see the LICENSE file for details

reactxp's Issues

Tutorial on updating reactxp

It would be great if the documentation added with tutorial for upgrading, for example when upgrading from 0.42.0_rc.1 to newer release later.

Provision for platform specific Styles

I am trying to understand how the Styles system can be utilized to design components across screen sizes (any pointers?). In React Native there is an ability to create styles specific to platforms using the Platform.select api.

container: {
        ...Platform.select({
            ios: {
                // ios specific
            },
            android: {
                // android specific
            }
        })
    }

Is the same possible with ReactXP?

Do we have recommended UI framework used with reactXP now?

How does this differ from react-native-web?

https://github.com/necolas/react-native-web

Was this considered and rejected for some reason?

Request: more comprehensive sample, incl. component usage examples

Looks like the docs and sample assume working knowledge of React/RN, but would be great to expound more for developers who are starting out with ReactXP with no prior experience (other than JS and general web development know-how).

Would ReactXP components be opinionated towards UX design patterns which work well on all platforms?

My team has also worked on building shared components across React and RN. A challenge we have faced (and still facing) is how to share not just components, but the entire page compositions which render equally well on web as well as device. So far, an Outlook like list > details > more-details kind of layout seems to work well for us. This has turned out to be a more complex problem than the technical challenges around cross-platform components. Please note that this goes beyond the notion of adding responsive components, as you need to provide a uniform and yet platform-oriented interface.

Is the ReactXP framework going to have opinions on how to use the cross-platform components in a way to build great looking and functional apps across platforms?

Thanks

hacking

How to release production mode for web?

i see on the index.html it loads a file 1.4MB bundle.js, normally I split libraries and the app code into two separate minified javascripts (lib.js and app.js), the lib.js are external libraries that rarely changed, where app.js my custom code that easily changed. How to do this in Reactxp?

CLI for reactXp

Will reactXp have a CLI lib like react-native-cli in future?

VirtualListView for horizontal lists

It doesn't look like the VirtualListView extension that was recently added supports horizontal lists. Is there a separate extension yet to be open sourced, or was there no need for this at Skype and thus left as a potential target for open source contributions?

RX.WebView do not have onMessage and postMessage

RX.WebView

Props
onMessage

Methods
postMessage

RX.

Question: .NET Integration?

I am curious on how this integrates with .NET. Is it (or will it be) possible to use .NET to build ReactXP applications?

Linux Gtk support

Gtk would be a great target for Reactxp since ubuntu announced their intent to move to gnome platform ,there is somewhat a broad consensus among linux vendors that gnome with gtk is their future.

Reactxp will enable devs to target these platforms to create truly cross platform app development experience

Importing react-native results in errors

Hey there,

Apologies as this issue might not be specifically due to ReactXP, but I'm building upon the Hello World example and when I import react-native I'm getting a series of errors:

const ReactNative: any = require('react-native');
(importing it as any temporarily to avoid issues I was having with the typings files)

ERROR in ./~/react-native/Libraries/react-native/react-native.js
Module not found: Error: Can't resolve 'ActivityIndicator' in '/Users/surfacepro/WebstormProjects/hydric-noodles-reactxp/node_modules/react-native/Libraries/react-native'
 @ ./~/react-native/Libraries/react-native/react-native.js 30:35-63
 @ ./src/App.tsx
 @ ./src/index.tsx

ERROR in ./~/react-native/Libraries/react-native/react-native.js
Module not found: Error: Can't resolve 'ReactNativeART' in '/Users/surfacepro/WebstormProjects/hydric-noodles-reactxp/node_modules/react-native/Libraries/react-native'
 @ ./~/react-native/Libraries/react-native/react-native.js 31:21-46
 @ ./src/App.tsx
 @ ./src/index.tsx

etc..

It would seem that if I open up node_modules/react-native/Libraries/react-native/react-native.js every single require('...') within the file is unable to resolve itself. I'm a bit uncertain about how to fix it up so that all the requires are able to resolve themselves.

Apologies again that this isn't about ReactXP itself, but I figured it'd be pretty common for somebody to continue on from the example project and try to implement some React Native components. So thank you if anyone is able to offer any suggestions on how to address the issue.

Windows Build & TS

When you guys have planned to implement this with Windows Mobiles? Will it come soon?

Can i use reactxp without using typescript ?

Need a better forum for discussion

GitHub is great for tracking issues, but it's a bit cumbersome as a general forum for discussions. We're thinking about creating a ReactXP forum somewhere else. Any suggestions or preferences? A dedicated Facebook Group? Reactiflux? Others?

Bug with next button in the documentation

When I click next from

https://microsoft.github.io/reactxp/docs/animations

to go to

https://microsoft.github.io/reactxp/docs/components/activityindiciator

There is a 404 File not found

Can i use this to build a website?

Any problems if i use this for a website, not a web app?

Navigator documentation

is there an example use of the Navigator component? Currently the doc only says:

TODO: Need to add full documentation that includes sample usage, styles, props, and methods. See other components for a template.

Feature Request: autoreload for web-watch

No autoreload for web-watch command on browser, just like Android and iOS version.

fadeDuration added by default on Android for RX.Image is resulting in error

ExceptionsManager.js:71 Warning: Failed prop type: Invalid props.style key `fadeDuration` supplied to `RCTImageView`.
Bad object: {
  "width": 360,
  "height": 360,
  "overflow": "hidden",
  "flex": 0,
  "borderRadius": 5,
  "fadeDuration": 0
}

Here's the code I'm creating my ImageStyle with

artistImageStyle =  RX.Styles.createImageStyle({
            borderRadius: 5,
            height: width,
            width: width
        });

And here's my Image element.

<RX.Image source={track.getHighResImage()} style={artistImageStyle}/>

Looking through the source, I believe this is where fadeDuration is being set

https://github.com/Microsoft/reactxp/blob/0e195c9cac45b15bcee324945720b91d1249b6d7/src/android/Image.tsx

I'm running the build through Android Studio and testing on my Samsung Galaxy S6.

Cheers

Is this work with redux?

Please but please consider Fable integration.

Fable is an excellent tool to convert F# to js. It also has a focus on react integration. Please consider adding fable bindings.

use react-navigation!

https://microsoft.github.io/reactxp/docs/components/navigator.html

my guess is that when you guys built this there is no react-navigation, is it possible to adopt https://reactnavigation.org/ instead of creating one more navigation lib/API, we already have plenty now ;)

How to get "this" context from TextInput event

I tried to set state from TextInput, but this refers to the object not the parent

class Foo extends RX.Component<void, AppState> {
	constructor() {
		super();
		this.state = {
			loginEmail: '',
		}
	}
	
	render() {
		return <RX.View style={ss.container}>
				<RX.Text style={ss.label}>via E-Mail or Mobile Phone</RX.Text>
				<RX.TextInput style={ss.input} value={this.state.loginEmail} onChangeText={this.onLoginEmail} />
			</RX.View>
		</RX.View>
	}
	
	onLoginEmail(val: string) {
                // this refers to TextInput, instead of Foo object
		this.state.loginEmail = val;
	}
	
}

How to get the this contect to refer to Foo object, so I can change the state value?

Should we pass this property as attribute one by one for each component?

Or is there a better example similar to Vue/Angular two-way binding?

Windows Phone is Really Dead?

windows uwp support ?

Can I use third party components like recharts?

Of course recharts wouldn't work if I build it for React-Native, but I want to integrate it for the web.

Is it possible to use existing components from React or React-Native?

react-addons-perf is in web prod build

react-addons-perf looks like it's ending up in production builds, as I experienced a build error when the package was not a peerDependency

ERROR in ./~/reactxp/dist/common/Profiling.js
Module not found: Error: Cannot resolve module 'react-addons-perf' in /path-to-app/node_modules/reactxp/dist/common
 @ ./~/reactxp/dist/common/Profiling.js 15:11-39

[email protected]

React Native 0.44 removes React Native's Experimental navigator as per this commit and release notes.

ReactXP uses Navigation Experimental here and as a result, there is a compilation error when bundling ReactXP with [email protected]

Bug: RX.TextInput with secureTextEntry={true} shows the text

Markup:

<RX.TextInput style={ss.input} secureTextEntry={true} value="aaa"></RX.TextInput>

Rendered Result:

<input value="aaa" style="outline: none; border: 1px solid blue; resize: none; 
position: relative; display: flex; flex-direction: row; flex: 0 0 auto; overflow-x: hidden; 
overflow-y: auto; align-items: stretch; margin: 2px; border-radius: 8px; padding: 4px 8px;">

There are no type="password" there

tested version:

{
        "name": "rxp-hello-world",
        "version": "1.0.0",
        "private": true,
        "main": "index.js",
        "scripts": {
                "web-watch": "webpack --progress --colors --watch",
                "rn-watch": "tsc --watch",
                "start": "node node_modules/react-native/local-cli/cli.js start"
        },
        "devDependencies": {
                "@types/node": "^7.0.12",
                "@types/webpack": "^2.2.14",
                "awesome-typescript-loader": "3.1.2",
                "source-map-loader": "^0.1.6",
                "ts-node": "^3.0.2",
                "typescript": "2.1.6",
                "webpack": "2.2.1"
        },
        "dependencies": {
                "reactxp": "0.42.0-rc.1",
                "react": "15.5.3",
                "react-addons-perf": "15.5.0-rc.2",
                "react-addons-test-utils": "15.5.1",
                "react-dom": "15.5.3",
                "react-native": "0.42.3",
                "react-native-windows": "^0.33.0"
        }
}

Surport midiApi/audioApi/vedio/webGL/canvas

let's do something cool that another framework can't do

: )

Mac OS Support

There is macos

Comparison with React Native?

It will be nice if you add some additional info about the differences between React Native.

Why `RX.Component`?

Please see my original question on SO: http://stackoverflow.com/questions/43342570/what-features-does-rx-component-class-provide-over-react-component.

Instructions for building on Windows

RXPHelloWorld contains only instructions for building on iOS, Android and Web. I thought the point of the library is to be able to target web, iOS, Android and Windows. Where are the examples for building on Windows?

https://github.com/Microsoft/reactxp/tree/master/samples/hello-world

ReactXP Types.d.ts not up to date with types definition for React v15.0

Hello,

Thank you for open sourcing your library.

When using types definition for React v15.0 with ReactXP 0.42.0-rc.2 I get errors such has:
reactxp/dist/common/Types.d.ts(207,54): error TS2314: Generic type 'HTMLAttributes<T>' requires 1 type argument(s).

If I change reactxp/dist/common/Types.d.ts(207) from:
export interface AccessibilityHtmlAttributes<T> extends React.HTMLAttributes {
to:
export interface AccessibilityHtmlAttributes<T> extends React.HTMLAttributes<T> {
The error disappears.

It might be worth updating ReactXP types definition to reflect changes made in React types definition, such as:
interface HTMLAttributes extends HTMLAttributesBase<HTMLComponent> {}
changed to:
HTMLAttributes<T> extends DOMAttributes<T> { ... }
Especially for those of us who want to access platform specific components provided by React Native.

Thanks,

Josh

I'm not 100 % clear on this. What benefits do i get from ReactXP

I'm just begining to port my phone application from ionic to React native.

I can write an app for ios and for android with react native, but React native doesnt work on web.
so ReactXP provides a way to run the app work on web just like https://goo.gl/pO9crq

What other benefits do i get from ReactXP if I'm already using React Native ?

no ListView component?

I'd like that very importance for mobile

Not showing error file/position if using web-watch

When running npm run web-watch for the first time it shows the error file and position, but after the file edited, it doesn't show anymore.

ERROR in [at-loader] ./src/LoginPage.tsx:1:9 
    TS2305: Module '"/home/asd/public/SPA/node_modules/reactxp/dist/ReactXP"' has no exported member 'RX'.

ERROR in [at-loader] ./src/LoginPage.tsx:3:8 
    TS1192: Module '"/home/asd/public/SPA/src/Resources"' has no default export.

ERROR in [at-loader] ./src/LoginPage.tsx:32:8 
    TS2339: Property 'state' does not exist on type 'LoginPage'.

ERROR in [at-loader] ./src/Resources.tsx:1:9 
    TS2305: Module '"/home/asd/public/SPA/node_modules/reactxp/dist/ReactXP"' has no exported member 'RX'.
 94% asset optimization                
[at-loader] Checking started in a separate process...

after some errors fixed:

[at-loader] Checking finished with 4 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
 94% asset optimization                
[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors

it would be nice if it's showing the changed error, so we don't have to kill and restart the npm manually.

Can one use Redux instead of ReSub?

ReactXP looks like a great project. Is it designed to be modular so that a developer can choose the best of breed, say use Redux instead of ReSub, or any other brilliant idea that may replace Redux in the future?

React Native 0.43

What's the plan to keep this project in sync with latest React and React Native? I see it's quite a bit behind react (^15.3.1-rc.2 vs 15.5.3), react-native (^0.34.0 vs 0.43.2) and even react-native-windows (^0.33.0 vs 0.43.0-rc.0).

My fear is that, by adopting this project, I'll be way behind on the latest features of all those projects, as you won't be able to keep it up-to-date.

No screenshots

There are pages and pages of documentation and a landing site, yet not a single screenshot in sight. What does this actually look like?

More descriptive readme.md

Shall i make the readme.md more descriptive?

• Now it contains info about contact details & code of conduct only

Fail to create react-native-windows project files

I tried to add Windows project to this reactxp example:
https://github.com/Microsoft/reactxp/tree/master/samples/hello-world
by these commands:

npm install -g react-native-cli
npm install
npm install -D rnpm-plugin-windows
react-native windows

Unfortunately, I got these error messages:

D:\git\reactxp\samples\hello-world>react-native windows
Scanning 749 folders for symlinks in D:\git\reactxp\samples\hello-world\node_modules (24ms)
Reading application name from package.json...
Reading react-native version from node_modules...
Checking for react-native-windows version matching 0.42.*...
Installing [email protected]...
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of react@~15.4.1 but none was installed.
npm WARN [email protected] requires a peer of react@~15.4.1 but none was installed.
npm WARN [email protected] requires a peer of react-native-windows@^0.33.0 but none was installed.
Command failed: npm install --save [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of react@~15.4.1 but none was installed.
npm WARN [email protected] requires a peer of react@~15.4.1 but none was installed.
npm WARN [email protected] requires a peer of react-native-windows@^0.33.0 but none was installed.

How to solve it?
My environment:
OS: Windows 10 64-bit ver. 1703
Node.js: 7.8.0
npm: 4.2.0
package.json:

{
  "name": "rxp-hello-world",
  "version": "1.0.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "web-watch": "webpack --progress --colors --watch",
    "rn-watch": "tsc --watch",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "devDependencies": {
    "@types/node": "^7.0.12",
    "@types/webpack": "^2.2.14",
    "awesome-typescript-loader": "3.1.2",
    "rnpm-plugin-windows": "^0.2.4",
    "source-map-loader": "^0.1.6",
    "ts-node": "^3.0.2",
    "typescript": "2.1.6",
    "webpack": "2.2.1"
  },
  "dependencies": {
    "react": "15.5.3",
    "react-addons-perf": "15.5.0-rc.2",
    "react-addons-test-utils": "15.5.1",
    "react-dom": "15.5.3",
    "react-native": "0.42.3",
    "react-native-windows": "^0.42.0",
    "reactxp": "0.42.0-rc.1"
  }
}

reactxp-imagesvg not in NPM

There is reactxp-virtuallistview, but no reactxp-imagesvg extension published in NPM.

ReactXP Project generator + questions

I've been trying to create a ReactXP project generator similar to Create React App or the React Native CLI's react-native init <Projectname>

One stumbling block I've had so far is that the AppRegistry method is hard-coded in the ReactXP node module. see this file

I was hoping someone from the team could give me some guidance / direction no only on this stumbling block but also if there are any features / requirements you would like to see in this generator.

I've registered it as create-xp-app with npm.

Correct way to do a cross-platform network request in ReactXP / API fetch

I tried to use fetch but it seems not available in ReactXP?

  fetch(Res.Endpoint.Login) // ...

it shows:

ERROR in [at-loader] ./src/LoginPage.tsx:103:4 
    TS2304: Cannot find name 'fetch'.

EDIT: now I'm using axios

Using react-native-web for web implementation

The native side of ReactXP is built on react-native. The web side could be built upon react-native-web, which is implementing the react-native API (with custom extensions for web). Let me know if you're interested in talking about it