Learn REACTXP with Real Code Examples

import RX from 'reactxp';

class TodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], newTodo: '' };
    }

    addTodo = () => {
        if (this.state.newTodo.trim()) {
        this.setState({ todos: [...this.state.todos, this.state.newTodo], newTodo: '' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput
        value={this.state.newTodo}
        onChangeText={newTodo => this.setState({ newTodo })}
        placeholder='New Todo'
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        <RX.Button onPress={this.addTodo} style={{ marginBottom: 10 }}>
        <RX.Text>Add</RX.Text>
        </RX.Button>
        {this.state.todos.map((todo, index) => (
        <RX.Text key={index}>{todo}</RX.Text>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('TodoApp', () => TodoApp);

Demonstrates a simple ReactXP app with a Todo list, adding tasks, and displaying them using cross-platform components.

import RX from 'reactxp';

class CounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CounterApp', () => CounterApp);

A simple counter app with increment, decrement, and reset buttons.

import RX from 'reactxp';

class StepCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, step: '1' };
    }

    increment = () => this.setState({ count: this.state.count + parseInt(this.state.step || '1') });
    decrement = () => this.setState({ count: this.state.count - parseInt(this.state.step || '1') });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.TextInput
        value={this.state.step}
        onChangeText={step => this.setState({ step })}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        placeholder='Step'
        />
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('StepCounterApp', () => StepCounterApp);

Counter app with customizable step increment.

import RX from 'reactxp';

class DarkModeCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, isDark: false };
    }

    increment = () => this.setState({ count: this.state.count + 1 });
    decrement = () => this.setState({ count: this.state.count - 1 });
    reset = () => this.setState({ count: 0 });
    toggleTheme = () => this.setState({ isDark: !this.state.isDark });

    render() {
        return (
        <RX.View style={{ padding: 20, backgroundColor: this.state.isDark ? '#333' : '#fff', flex: 1 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10, color: this.state.isDark ? '#fff' : '#000' }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.decrement} style={{ marginRight: 10 }}><RX.Text>-</RX.Text></RX.Button>
        <RX.Button onPress={this.reset} style={{ marginRight: 10 }}><RX.Text>Reset</RX.Text></RX.Button>
        <RX.Button onPress={this.toggleTheme}><RX.Text>Toggle Theme</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('DarkModeCounterApp', () => DarkModeCounterApp);

Counter app with light/dark theme toggle.

import RX from 'reactxp';

class MultiCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { counters: [0,0,0] };
    }

    increment = index => {
        const counters = [...this.state.counters]; counters[index]++; this.setState({ counters });
    };
    decrement = index => {
        const counters = [...this.state.counters]; counters[index]--; this.setState({ counters });
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        {this.state.counters.map((count, i) => (
        <RX.View key={i} style={{ marginBottom: 10 }}>
        <RX.Text style={{ fontSize: 20 }}>Counter {i+1}: {count}</RX.Text>
        <RX.Button onPress={() => this.increment(i)} style={{ marginRight: 5 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={() => this.decrement(i)}><RX.Text>-</RX.Text></RX.Button>
        </RX.View>
        ))}
        </RX.View>
        );
    }
}

RX.App.register('MultiCounterApp', () => MultiCounterApp);

Multiple independent counters in a single view.

import RX from 'reactxp';

class AutoIncrementCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0, isRunning: true };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.isRunning) this.setState({ count: this.state.count + 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    toggleRunning = () => this.setState({ isRunning: !this.state.isRunning });
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.toggleRunning} style={{ marginRight: 10 }}><RX.Text>{this.state.isRunning ? 'Pause' : 'Resume'}</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AutoIncrementCounterApp', () => AutoIncrementCounterApp);

Counter that automatically increments every second.

import RX from 'reactxp';

class PriorityTodoApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], task: '', priority: '' };
    }

    addTodo = () => {
        if(this.state.task.trim()) {
        this.setState({ todos: [...this.state.todos, {task: this.state.task, priority: this.state.priority}], task:'', priority:'' });
        }
    };

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.TextInput placeholder='Task' value={this.state.task} onChangeText={task => this.setState({ task })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.TextInput placeholder='Priority' value={this.state.priority} onChangeText={priority => this.setState({ priority })} style={{ height:40,borderWidth:1,borderColor:'gray',marginBottom:5 }}/>
        <RX.Button onPress={this.addTodo}><RX.Text>Add</RX.Text></RX.Button>
        {this.state.todos.map((todo,i) => <RX.Text key={i}>{todo.task} (Priority: {todo.priority})</RX.Text>)}
        </RX.View>
        );
    }
}

RX.App.register('PriorityTodoApp', () => PriorityTodoApp);

Todo app where each task has a priority and displays it.

import RX from 'reactxp';

class CountdownApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 10 };
    }

    componentDidMount() {
        this.timer = setInterval(() => { if(this.state.count > 0) this.setState({ count: this.state.count - 1 }); }, 1000);
    }
    componentWillUnmount() { clearInterval(this.timer); }
    render() {
        return (
        <RX.View style={{ padding:20 }}>
        <RX.Text style={{ fontSize:24, marginBottom:10 }}>Time: {this.state.count}</RX.Text>
        <RX.Button onPress={() => this.setState({ count: 10 })}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('CountdownApp', () => CountdownApp);

Countdown timer starting from 10 seconds.

import RX from 'reactxp';

class AlertCounterApp extends RX.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        const newCount = this.state.count + 1;
        if(newCount === 10) RX.Alert.show('Count reached 10!');
        this.setState({ count: newCount });
    };
    reset = () => this.setState({ count: 0 });

    render() {
        return (
        <RX.View style={{ padding: 20 }}>
        <RX.Text style={{ fontSize: 24, marginBottom: 10 }}>Counter: {this.state.count}</RX.Text>
        <RX.Button onPress={this.increment} style={{ marginRight: 10 }}><RX.Text>+</RX.Text></RX.Button>
        <RX.Button onPress={this.reset}><RX.Text>Reset</RX.Text></RX.Button>
        </RX.View>
        );
    }
}

RX.App.register('AlertCounterApp', () => AlertCounterApp);

Counter shows an alert when it reaches 10.