Skip to content

Instantly share code, notes, and snippets.

@MovingGifts
MovingGifts / SecondPanel.js
Last active January 30, 2018 00:46
ToggleSwitch vs ProgressIndicator
/*
* This file demonstrates a basic ReactXP app.
*/
import React from 'react';
import RX from 'reactxp';
import ToggleSwitch from './ToggleSwitch';
const styles = {
container: RX.Styles.createViewStyle({
import React from 'react'
import RX from 'reactxp'
export default class TextAreaMultiFocus extends RX.Component {
constructor(props) {
super(props);
this.state = {
field1: '',
field2: ''
@MovingGifts
MovingGifts / TextArea.js
Created September 21, 2017 21:57
Expanding Text Area
import React from 'react'
import RX from 'reactxp'
import { observable, computed, action } from 'mobx'
import { observer } from 'mobx-react'
import ReactDOM from 'react-dom'
@observer
export default class TextArea extends RX.Component {
@observable input = '';
@observable inputHeight = 0;
import React from 'react'
import RX from 'reactxp'
export default class Flex extends RX.Component {
render() {
return (
<RX.View style={ styles.container}>
<RX.View style={ styles.parent }>
<RX.View style={ styles.child_1 }>
<RX.Text style={ styles.child_text}>Hello</RX.Text>
import React from 'react'
import RX from 'reactxp'
import ReactDOM from 'react-dom'
const numbersDataSource = [
{id: '1', text: 'one'},{id: '2', text: 'two'},{id: '3', text: 'three'},{id: '4', text: 'four'},{id: '5', text: 'five'},{id: '6', text: 'six'},{id: '7', text: 'seven'},{id: '8', text: 'eight'},{id: '9', text: 'nine'},{id: '10', text: 'ten'},
{id: '11', text: 'eleven'},{id: '12', text: 'twelve'},{id: '13', text: 'thirteen'},{id: '14', text: 'fourteen'},{id: '15', text: 'fifteen'},{id: '16', text: 'sixteen'},{id: '17', text: 'seventeen'},{id: '18', text: 'eighteen'},{id: '19', text: 'nineteen'},{id: '20', text: 'twenty'}
];
export default class Offset extends RX.Component {
@MovingGifts
MovingGifts / CenterPanel.js
Created July 25, 2017 23:17
ScrollView Vertical Align
import React from 'react';
import RX from 'reactxp';
const styles = {
scroll: RX.Styles.createScrollViewStyle({
backgroundColor: 'red',
justifyContent: 'center',
alignSelf: 'stretch'
}),
container: RX.Styles.createViewStyle({
import React from 'react'
import RX from 'reactxp'
import { VirtualListView, VirtualListViewItemInfo } from 'reactxp-virtuallistview';
const _headerItemHeight = 20;
const _fruitItemHeight = 32;
const _headerItemTemplate = 'header';
const _fruitItemTemplate = 'fruit';
export default class FruitListView extends RX.Component {
var gulp = require('gulp');
var argv = require('yargs').argv; // This was needed
var runSequence = require('run-sequence'); // This was needed
var config = {
aliasify: {
src: './.temp/' + argv.platform, // Is this the correct directory for ReactXP
dest: './dist/js/', // Is this the correct directory for ReactXP
aliases: (argv.platform === 'web') ?
// Web Aliases
var RX = require('reactxp'); // I tried import, but it threw an error when on `gulp run`, so var seemed to work
var gulp = require('gulp');
var config: { // I get "SyntaxError: Unexpected token :" on `gulp run`
aliasify: {
src: './.temp/' + RX.Platform.getType(),
dest: getBuildPath() + 'js/',
aliases: (RX.Platform.getType() === 'web') ?
// Web Aliases
{
/*
* This file demonstrates a basic ReactXP app.
*/
import RX = require('reactxp');
interface MainPanelProps {
onPressNavigate: () => void;
}