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

Colors

Colors you can use in React Native

Fonts

Fonts you can use in React Native