React Native + Expo Documentation

React Native Documentation

React Native lets you build native mobile apps using JavaScript and React.

Expo Documentation

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. On CodeHS, you can use Expo in your React Native programs.

Text

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Hello world.
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
    },
    paragraph: {
        fontSize: 18,
        textAlign: 'center',
    },
});

Alert on Button Press

import React, { Component } from 'react';
import { View, StyleSheet, Button, Alert } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
    _handleButtonPress = () => {
        Alert.alert(
            'You pressed the button!',
        );
    };

    render() {
        return (
            <View style={styles.container}>
                <Button
                    title="This is a button."
                    onPress={this._handleButtonPress}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
    },
});

Switch

import React, { Component } from 'react';
import { View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
    state = {
        switchValue: true
    };

    _handleToggleSwitch = () => this.setState(state => ({
        switchValue: !state.switchValue
    }));

    render() {
        return (
            <View style={styles.container}>
                <Switch
                    onValueChange={this._handleToggleSwitch}
                    value={this.state.switchValue}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
    },
});

Text Input

export default class App extends Component {
    state = {
        inputValue: "Change this text!"
    };

    _handleTextChange = inputValue => {
        this.setState({ inputValue });
    };

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    value={this.state.inputValue}
                    onChangeText={this._handleTextChange}
                    style={styles.input}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
    input: {
        width: 200,
        height: 44,
        padding: 8
    }
});