Press Run Code to see code changes
Download the Expo app, then:
Android: Scan this QR code from the Expo app.
iPhone: Scan this QR code from your camera app.
Drag a component into your code to add that component to your app.
Fundamental component for building a UI
Component for displaying text
Displays an image which is hosted elsewhere and available via a link.
Set an image as the background
Wrapper for making views respond properly to touches
Basic button component that renders nicely on any platform.
A component that displays a video inline.
Plays a remote audio file.
Allows entering text via keyboard.
A set of drawing primitives such as Circle, Rect, Path, ClipPath, and Polygon.
A React component that renders a native gradient view.
Read geolocation information from the device.
A Map component that uses Apple Maps on iOS and Google Maps on Android.
Access the device accelerometer sensor(s) to respond to changes in acceleration in 3d space.
Renders a boolean input.
Displays a circular loading indicator.
A React component that renders a native blur view on iOS and falls back to a semi-transparent view on Android.
Use the devices camera to scan bar codes.
Google authentication integration for Expo apps.
Renders a native Facebook Banner Ad.
API to display a fullscreen interstitial ad.
Facebook login integration for Expo apps.
A View that acts as an OpenGL ES render target.
React Native lets you build native mobile apps using JavaScript and React.
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.
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', }, });
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', }, });
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', }, });
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, }, });
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, }, });
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 } });
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, } });
Colors you can use in React Native
Fonts you can use in React Native
No slides available for this video
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.
Want to use your CodeHS code outside of CodeHS? Use this embed code to get started.
codehs.html
on your desktopcodehs.html
on your desktop