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