Run Code Stop

Press Run Code to see code changes

View on Mobile with Expo

Download the Expo app, then:

Android: Scan this QR code from the Expo app.

iPhone: Scan this QR code from your camera app.

Errors:

Looks like something is taking longer than usual. We stopped running your code. Please try again.

HINT: You might have an infinite loop in your code.

Components

Drag a component into your code to add that component to your app.

Search for a component

View

Fundamental component for building a UI

Text

Component for displaying text

Image

Displays an image which is hosted elsewhere and available via a link.

ImageBackground

Set an image as the background

TouchableHighlight

Wrapper for making views respond properly to touches

Button

Basic button component that renders nicely on any platform.

Video

A component that displays a video inline.

Audio

Plays a remote audio file.

TextInput

Allows entering text via keyboard.

Svg

A set of drawing primitives such as Circle, Rect, Path, ClipPath, and Polygon.

LinearGradient

A React component that renders a native gradient view.

Location

Read geolocation information from the device.

MapView

A Map component that uses Apple Maps on iOS and Google Maps on Android.

Accelerometer

Access the device accelerometer sensor(s) to respond to changes in acceleration in 3d space.

Switch

Renders a boolean input.

ActivityIndicator

Displays a circular loading indicator.

BlurView

A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android.

BarCodeScanner

Use the devices camera to scan bar codes.

Google Login

Google authentication integration for Expo apps.

Facebook Banner Ad

Renders a native Facebook Banner Ad.

Facebook Interstitial Ad

API to display a fullscreen interstitial ad.

Facebook Login

Facebook login integration for Expo apps.

GLView

A View that acts as an OpenGL ES render target.

External Links
React Native
Expo

Stylesheet Values
Colors
Fonts

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.

View

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>

            </View>
        );
    }
}

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

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',
    },
});

Image

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
                    style={{ height: 140, width: 200 }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: '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
    }
});

TouchableHighlight

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

export default class App extends Component {

    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={styles.touchableButton}
                    onPress={() => {
                        Alert.alert('Alert Message!');
                    }}
                >
                    <Text style={styles.buttonText}>
                        Press me!
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    touchableButton: {
        backgroundColor: '#55acee',
        height: 100,
        width: 300,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonText: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 24,
    }
});

Slides and Notes

No slides available for this video

Collaborate on this sandbox program!

A collaborative program is a program you can work on with a partner or group of people. The program shows up in all of your sandbox pages, and when any of you save code, it will save it for each person.

Current Collaborators:

Add a Collaborator:

Add

Embed Your Code On an HTML Page

Want to use your CodeHS code outside of CodeHS? Use this embed code to get started.

Error

Autograder Results

Your Output

Solution Output

View on Mobile with Expo

Errors:

Components

View

Text

Image

ImageBackground

TouchableHighlight

Button

Video

Audio

TextInput

Svg

LinearGradient

Location

MapView

Accelerometer

Switch

ActivityIndicator

BlurView

BarCodeScanner

Google Login

Facebook Banner Ad

Facebook Interstitial Ad

Facebook Login

GLView

React Native + Expo Documentation

React Native Documentation

Expo Documentation

View

Text

Image

Alert on Button Press

Switch

Text Input

TouchableHighlight

Colors

Fonts

Upload an image

Upload from your computer

Or paste a link here

Slides and Notes

Collaborate on this sandbox program!

Embed Your Code On an HTML Page

How to Use

Version 1: On Your Computer

Version 2: Online

Note this only works on single files currently.